React + React highlight. Code highlighting

Question

Im using react with meteor and the react-highlight . The problem is my code is not being highlighted and im getting this error on the console

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/singlearticle/node_modules/highlight.js/styles/tomorrow.css".

What does it mean and what should I do about it.?

Answer 1

You can just drop the css file tomorrow.css from "/node_modules/highlight.js/styles/tomorrow.css" in your meteor client folder it wil be automatically added to your project.

Or

On your jsx file you can import it like below:

import React, { Component } from 'react';
import Highlight from 'react-highlight';
import "../node_modules/highlight.js/styles/tomorrow.css";

export default class App extends Component {

    render() {
        return (
            <div className="container">
                <header>
                    <h1>Example</h1>
                </header>
                <Highlight className='js'>{"var test = 'hello'"}</Highlight>
            </div>
        );

    }
}

Answer 2

What is the dev environment of yours? Gulp? Webpack? It seems you do not have a correct handler for css files on React? React does not magically handle css files.

In the webpack, you will need to have a loader handling css, sass and style files. like,

  // css loader
  {
    test: /\.css$/,
    loader: "style-loader!css-loader!postcss-loader"
  },

  // font file loaders
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&minetype=application/font-woff"
  },

  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
  }

You will need to install style-loader, css-load and any other loaders that handles this type of file. So for webpack, it will automatically parse through all these kind of dependencies through the dependency tree, translate and package everything into one js file.

Answer 3

What I did was to create a file "\source\code-highlight.scss" at the root of my project, and import this file in app.js

import "@source/code-highlight.scss"; // could be css

The content of this file is gotten from any style you wish to use in

\node_modules\highlight.js\scss\

or if you use css

\node_modules\highlight.js\styles\

Just copy the style and paste in

\source\code-highlight.scss

In any file now, you could use:

import Highlight from "react-highlight";

<Highlight>{snippet}</Highlight>