Answer the question
In order to leave comments, you need to log in
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
}),
]
};
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
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')
Answer the question
In order to leave comments, you need to log in
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()
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question