I am using React + Type and markdown-it + highlight.js packages. <p dir="aut

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Could we add to the README a reference to this or to <a href="https://highlightjs.org/

<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="18

Highlight.js + markdown-it is not working about markdown-it HOT 7 CLOSED

kristijorgji commented on June 2, 2024 2

Highlight.js + markdown-it is not working

from markdown-it.

Comments (7)

david-mcafee commented on June 2, 2024 2

Attempted this with a fenced code block, but highlighting is still not present.

from markdown-it.

mbaraa commented on June 2, 2024 1

@kristijorgji of course it won't work, you're not importing a highlighting style (alongside fencing the code)
for example using solarized dark

import "highlight.js/styles/base16/solarized-dark.css";

I forgot where I found it, but here is an example of where I used it, also if you take a look at the directory highlight.js/styles/ you'll find a ton of other highlighting themes.

Hope I helped!

from markdown-it.

gillo04 commented on June 2, 2024 1

Could we add to the README a reference to this or to https://highlightjs.org/#usage ?

from markdown-it.

rlidwka commented on June 2, 2024

Are you expecting that: .render('<pre>const a = 2; console.log(a);</pre>); to be highlighted?

Syntax highlighting works only for fenced code blocks like this:

```js
const a = 2; console.log(a);
```

from markdown-it.

mbaraa commented on June 2, 2024

sure

from markdown-it.

cris-m commented on June 2, 2024

I faced the same issue. I noticed that hljs.getLanguage(lang) always return undefined.

const md = new MarkdownIt({
            html: true,
            linkify: true,
            quotes: '“”‘’',
            // langPrefix: 'language-',
            typographer: true,
            highlight: (str, lang) => {
                console.log(hljs.getLanguage(lang))
                if (lang && hljs.getLanguage(lang)) {
                    try {
                        return '<pre class="hljs"><code>' +
                            hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
                            '</code></pre>';
                    } catch (__) {}
                }

                return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
            },
        });

you need to register the language you want to highlight otherwise it will return undefined

hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));        
hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));