R
R
rvsbox2018-10-03 21:53:40
webpack
rvsbox, 2018-10-03 21:53:40

How to properly include the hightlight.js library in webpack?

Greetings!
It is not possible to correctly include the highlight.js library in webpack.config.js .
Connected in webpack.config.js highlight.pack.js

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

module.exports = {
    entry: [
        "./src/libs/highlight/highlight.pack.js",
        "./src/js/app.js"
    ],
    output: {
        filename: "bundle.js",
    },
    devtool: "inline-source-map",
    optimization: {
        minimize: false
    },
    module: {
        // loaders: [
        //     // {
        //     //   test: /\.md$/,
        //     //   loader: 'html!highlight!markdown',
        //     //   include: PATHS.markdown
        //     // }
        //     {
        //         test: /\.html$/,
        //         loader: 'html!highlight!markdown',
        //         include: "./dist/index.html"
        //     }
        // ],
        rules: [
            {
                test: /\.sass$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            autoprefixer: {
                                browsers: ["last 2 versions"]
                            },
                            plugins: () => [
                                autoprefixer
                            ]
                        },
                    },
                    {
                        loader: "sass-loader",
                    }]
            },
            {
                test: /\.pug$/,
                loader: "pug-loader",
                options: {
                    pretty: true
                }
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.pug",
            filename: "./index.html",
            inject: false
        }),
    ]
};

As a result, the browser gives an error:
highlight.pack.js:308 Uncaught ReferenceError: hljs is not defined
at Object. (highlight.pack.js:308)
at __webpack_require__ (bootstrap:19)
at Object.n (bootstrap:83)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83

I used highlight-loader, but I don't understand the usage instructions:
module: {
  loaders: [
    {
      test: /\.md$/,
      loader: 'html!highlight!markdown',
      include: PATHS.markdown
    }
  ]
}

// Reading HTML from parsed markdown
var highlightedMarkdown = require('html!highlight!markdown!./README.md');
 
// Reading a file's raw contents and auto-detecting the language
var highlightedRaw = require('html!highlight?raw=true!./example-script.js');
 
// Reading a file's raw contents and specifying the language
var highlightedRawCss = require('html!highlight?raw=true&lang=css!./example-stylesheet.css');
 
// Reading HTML from a template loader
var highlightedRenderedJadeTemplate = require('html!highlight?exec!apply!jade!./index.jade')

How can I add this correctly to my webpack.config.js?
Here is a link to my github
All packages are installed with the "yarn" command, the build is "yarn run build".

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
rvsbox, 2018-10-03
@rvsbox

SOLUTION
Install highlightjs module via npm and call highlightjs programmatically (api - here https://highlightjs.org/usage/ 1) from javascript file.
Most likely the code below will suffice.

const hljs = require('highlightjs')
hljs.initHighlightingOnLoad()

The only thing you may need to include styles for highlightjs separately on the page.
You can get confused with configuring webpack to allow styles to be required. Then just require a style from the npm package itself, a list of all styles can be found in the package directory. It is tied to the use of a global variable, so it works if you just include it. In the case of assembly via webpack, the variable is created in the scope of the module.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question