highlight.js not detected!

[miadabdi]

Describe the bug I'm trying to use this package. even though I import it after highlight.js, it keeps throwing highlight.js not detected!

To Reproduce Steps to reproduce the behavior: First of all I'm using Webpack with this config:

const path = require("path");

module.exports = {
    devtool: "source-map",
    entry: path.join(__dirname, "js/index.js"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "../public/js"),
    },
    watch: true,
    mode: "development",
};

I installed highlight.js and highlightjs-line-numbers.js using npm. I imported them this way (using es6 import/export):

import hljs from "highlight.js";
import "highlightjs-line-numbers.js";
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

and it throws:

I also tried to import highlight.js this way. still throws the same error

import "highlight.js";

Expected behavior To detect highlight.js

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser firefox
• Version 76.0.1 (64-bit)

webpack version: 4.44.1 highlight.js version: 10.2.1 highlightjs-line-numbers.js version: 2.8.0

[qinchao888]

because of import is asynchronous，you can use like this:

const hljs = require('highlight.js');

window.hljs = hljs;

require('highlightjs-line-numbers.js');

because of 'highlightjs-line-numbers.js' check window.hljs is exist，so you need to set window.hljs = hljs，or it will be show error message like 'highlight.js not detected! '

[miadabdi]

@qinchao888 Thanks, it did fix it. but apparently import in ES6 modules is async and cannot be used for this package and we're restricted to use CommonJs!

[mbritton]

I was only able to get line numbers to work like this.

import markdownStyles from './markdown-styles.module.css';
const hljs = require('highlight.js');

export async function highlightJSLoad() {
    return await import('highlight.js');
}
export async function highlightLineNumbersLoad() {
    return await import('highlightjs-line-numbers.js');
}

const PostBody = ({ content }: any) => {
    useEffect(() => {
        highlightJSLoad().then((hljs_arg) => {
            window.hljs = hljs;
            hljs.highlightAll();
            highlightLineNumbersLoad().then(() => {
                const blocks = document.querySelectorAll('pre code');
                blocks.forEach((block) => {
                    hljs.lineNumbersBlock(block);
                });
            });
        });
    }, []);
    return (
        <div className="max-w-2xl mx-auto">
            <div
                className={markdownStyles['markdown']}
                dangerouslySetInnerHTML={{ __html: content }}
            />
        </div>
    );
};

export default PostBody;