8000 highlight.js not detected! · Issue #78 · wcoder/highlightjs-line-numbers.js · GitHub
[go: up one dir, main page]
Skip to content

highlight.js not detected! #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
C 8000 losed
miadabdi opened this issue Oct 4, 2020 · 3 comments
Closed

highlight.js not detected! #78

miadabdi opened this issue Oct 4, 2020 · 3 comments

Comments

@miadabdi
Copy link
miadabdi commented Oct 4, 2020 •
edited
Loading

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:
Screenshot from 2020-10-04 17-38-37

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
Copy link
qinchao888 commented Oct 30, 2020 •
edited
Loading

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
Copy link
Author

@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!

@miadabdi miadabdi closed this as completed Nov 4, 2020
@thinkverse thinkverse mentioned this issue Aug 31, 2022
Closed
@pjebs pjebs mentioned this issue Oct 24, 2022
Closed
@mbritton
Copy link
mbritton commented Mar 2, 2023

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mbritton @qinchao888 @miadabdi
0