valeriangalliat / markdown-it-highlightjs

Preset to use highlight.js with markdown-it.

markdown-it-highlightjs

Preset to use highlight.js with markdown-it.

Usage

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs'), opts)

// All code blocks will be highlighted.

The opts object can contain:

Name	Type	Description	Default
auto	boolean	Whether to automatically detect language if not specified.	true
code	boolean	Whether to add the hljs class to raw code blocks (not fenced blocks).	true
register	object	Register other languages which are not included in the standard pack.	null
inline	boolean	Whether to highlight inline code.	false
hljs	object	Provide the instance of highlight.js to use for highlighting	require('highlight.js')
ignoreIllegals	boolean	Forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception.	true

Register languages

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs'), {
    register: {
      cypher: require('highlightjs-cypher')
    }
  })

Inline code highlighting

You can enable inline code highlighting by setting inline to true:

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs'), { inline: true })

You can specify the language for inline code using Pandoc syntax:

`x=4`{.js}

Or kramdown IAL syntax:

`x=4`{:.js}

If you do not specify a language, then highlight.js will attempt to guess the language if auto is true (which it is by default).

Usage with markdown-it-attrs

If you use markdown-it-attrs, make sure to include it after markdown-it-highlightjs if you want inline code highlighting to work:

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs'), { inline: true })
  .use(require('markdown-it-attrs'))

Provide the highlight.js instance

You can specify the hljs option to override the default highlight.js instance with your own:

const hljs = require('highlight.js/lib/core')

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

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs'), { hljs })

Core plugin

You may import the core markdown-it-highlightjs plugin directly, without any default options. You must specify an instance of highlight.js for the hljs option.

const hljs = require('highlight.js/lib/core')

const md = require('markdown-it')()
  .use(require('markdown-it-highlightjs/core'), { hljs })

markdown-it-highlightjs's Issues

inline code support

I found that inline code in markdown document won't be highlighted. However, code blocks can be highlighted normally. Here is an example for this case. Is there anything wrong with my usage?

https://codesandbox.io/s/elated-banach-5v3tz?file=/src/App.js

Inline language breaks with markdown-it-attrs

I am using https://www.npmjs.com/package/markdown-it-attrs and it broke the inline language feature:

`alert("Dog")`{:.js}

I tried to put highlights before attrs - didn't help.

This helped:

.use(markdownItAttrs, {
  leftDelimiter: '{attrs=',
  rightDelimiter: '=attrs}',
})

Please, can You add ES5 code?

Hi,

I'm happy to use this package in my project, but I have problem with UglifyJsPlugin. UglifyJsPlugin can only uglify ES5 code but Your code is written in ES6. You should deliver ES5 code if You are pushing it to NPM.

My temporary solution is to config webpack like this:

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules\/(?!markdown-it-highlightjs)/
}

But please, add ES5 code to dist or lib folder.

https://stackoverflow.com/questions/29738381/how-to-publish-a-module-written-in-es6-to-npm
https://booker.codes/how-to-build-and-publish-es6-npm-modules-today-with-babel/

Distribution version

Hello,

Can you please release a dist version?
(like in https://github.com/markdown-it/markdown-it-footnote, folder dist
This is an example of repo, but there is a lot of repo where you can find this)

Thanks a lot in advance

Load only languages needed support

At the moment, highlightjs is loading every language included.

As you can see in this section: https://github.com/highlightjs/highlight.js#es6-modules, there is a possibility to only load the languages you need in your project.

What we have now (The default import imports all languages.)

import hljs from 'highlight.js'; // require('highlight.js')

Import only the library and the languages you need:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

It will be nice to have an option call languages, by default could be all and just leave require('highlight.js') as it's now, and if it is filled just make as you're doing for register new languages:

require('highlight.js/lib/core')

const loadLangs = (languages) => languages &&
  Object.entries(languages).map((lang) => { hljs.registerLanguage(lang, require(`highlight.js/lib/languages/${lang}`)) })

What do you think? If you think is a good improvement I'm open to do it, I'm using this module in my personal projects 💜 Thanks a lot for your work!

It doesn't highlight the code attributes, classes etc.

It only highlights the code background css - only "hljs" class is being attached to the codeblock. Probably it's not parsing the code elements or there is an issue with the highlight.js which doesn't append other css classes.

.vue file
`
div class="paragraph" v-html="rendevue(k.text)"

methods: {
rendevue (a) {
// const hljs = require('highlight.js/lib/core')
const md = require('markdown-it')()
.use(require('markdown-it-highlightjs'))
return md.render(${a})
}
},`

.nuxt conifg
markdownit: { injected: true, use: [ 'markdown-it-highlightjs', ], },

output

TypeScript Types

Yes, I hate being that guy who opens this issue. Would you be willing to add some very basic types to the package, or would you accept a contribution for that?

Doesn't add `hljs` class to inline code

I see this in most themes:

code.hljs {
  padding: 3px 5px;
}

And I see similar thing for inline code on github:

.markdown-body code{
    padding: 0.2em 0.4em;
}

and on SO:

.s-prose *:not(.s-code-block)>code {
    padding: 2px 4px;

So I'm guessing that idea in highlights is that this padding is supposed to be added to inline code. But this class hljs is not being added :( Would be great to add it. Thanks!

License

Hi, nice work on this lib. I am just wondering: will you be willing to adopt an MIT or any other opensource license for this project ? It is very hard to use unlicensed software in corporate environment. I assume by releasing it as UNLICENSED you meant only good things and let people use the lib any way they like. But the result is just opposite and without the explicit license it will not be possible to use in any commercial products.

Sorry for longer description, and looking forward to your answer.

Escapes all HTML tags

Thanks for making this!

Not sure why, but this module seems to escape my HTML tags, despite having configured markdown-it with html:true.
When following the markdown-it docs, I don't have this problem

Fix made in November now absent from code

Hello,

I'm a security researcher at r2c. 👋 I am studying XSS vulnerabilities and happened across this PR addressing an XSS in your repo.

By pure luck, I noticed that the recent refactoring seems to have removed this patch. I'm not certain if this was intentional for some unknown reason; however, I wanted to bring it to your attention.

Hope this helps! Cheers.

Bump Highlightjs version and change how it's loaded

Right now it uses an outdated version and imports all languages by default.
This makes whole plugin pack a whopping 1.04 MB.

https://i.imgur.com/9AGcONT.png

Highlight.js Potential ReDOS vulnerabilities

Hi guys,

I read here, highlight.js versions prior 10.4.1 are all vulnerable to potential ReDOS attacks. markdown-it-highlightjs currently depends on version 10.2.0. Can you update it to version 10.4.1 instead? Thanks!

Should update to latest highlight.js version

See pull request: #22

It's just a simple change to package.json dependencies

An em tag nested under a span tag is parsed incorrectly or unexpectedly.

Try js codes shown below, here: https://npm.runkit.com/markdown-it-highlightjs .

const MarkdownIt = require('markdown-it')
const markdownItHighlightjs = require("markdown-it-highlightjs")

const markdownItParser = new MarkdownIt({chtml: true })
markdownItParser.use(markdownItHighlightjs)

const htmlString = markdownItParser.render('```html\n<span>A<em>B</em>C</span>\n```\n\n')
console.log('HTML string: ' + htmlString)

Expected output:

<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>A<span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>C<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>

Actual output:

<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>A<span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;<span class="hljs-name">C</span></span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</code></pre>

For a bit better human readability, I delibratedly insert some indetantions and blank lines to the actual output, then it looks like:

<pre>
    <code class="hljs language-html">

        <span class="hljs-tag">&lt;
            <span class="hljs-name">span</span>
            &gt;
        </span>
        
        A
        
        <span class="hljs-tag">
            &lt;
            <span class="hljs-name">em</span>
            &gt;
        </span>
        
        B
        
        <span class="hljs-tag">
            &lt;/
            <span class="hljs-name">em</span>
            &gt;
        
            <span class="hljs-name">C</span> <!-- ********** incorrect or unexpected ********** -->
        </span>
    
        <span class="hljs-tag">
            &lt;/<span class="hljs-name">span</span>
            &gt;
        </span>

    </code>
</pre>

Load only languages needed to support (in Browser)

I need language support for bash, which seems not to be out of the box. Other languages already get shown. Currently, I do the following for loading the markdown-it-highlightjs and bash language and potentially other languages.

async loadFurtherPlugins() {
  await Promise.all([
    import("markdown-it-highlightjs"),
    import("highlight.js/lib/languages/bash"),
  ]).then(([markdownHighlightJs, bashLanguage]) => {
    md.use(markdownHighlightJs?.default, {
      register: {
        "bash": bashLanguage?.default,
      },
    });
  });
}

Via debugging everythings seems to be okay, no errors. The markdown-it-highlightjs and the bash language object are loaded properly. However, the bash language is not shown in the web frontend. What do I do wrong?

Heads up: upcoming changes in highlight.js break markdown-it-highlightjs

I was successfully able to update highlight.js to the latest release version (11.9.0) – please see #29 – but not to the latest development build in main.

Details of the issue are in this issue on the highlight.js repository. If it’s not a regression but a breaking change in anticipation of a new major release, it might be something to plan ahead for:

highlightjs/highlight.js#4026