Load only languages needed support

[Dawntraoz]

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!

[valeriangalliat]

That's a great idea! I think that would solve #12 as well.

To keep the API minimal, I was thinking about just letting the user pass an instance of highlight.js in the options object, which we'd default to require('highlight.js) if it's not defined.

That way you could do something like this:

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 })

That said I'm not sure what's your exact use case to load just parts of highlight.js, while the above would work as far as RAM is concerned I would assume that this is more about bundling for browser usage? Then depending on the bundler, the above solution might not work, as it could still package the whole require('highlight.js') in case we hit that code path.

But again that could be mitigated with having something like markdown-it-highlightjs/core which requires the hljs option to be passed, and then markdiwn-it-highlightjs would just require('./core') and default thehljs option to require('highlight.js') to keep the current behavior. Then you could import markdown-it-highlightjs/core so to not confuse any bundler.

If that makes sense and you feel comfortable writing a PR for that, that'd be awesome! Otherwise I can take a look at implementing it if you confirm that would solve your use case, the changes seem pretty straightforward. :)

[Dawntraoz]

Sounds great!! I will take a look then, but maybe I will need your help to test it properly, let's see what can I do and I will come to you with something hahahaha :)

Merciii!! 🥰

[valeriangalliat]

Niice, thanks a lot! Feel free to reach out to me if you have questions or need a hand =)

[marcusrbrown]

👋🏽 Hi! This is a feature I'd like to use. The VS Code Markdown language extension uses Highlight.js to highlight fenced code blocks, but does not expose the hljs instance. It does provide a means for other extensions to extend the markdown-it instance, so some third-party Markdown extensions will replace .options.highlight, similar to this library. In my specific use case I'd like to highlight a language isn't directly supported in Highlight.js, to support fenced code block handling in the Markdown preview editor. Having the ability to bundle just the core of Highlight.js and use this plugin would allow for the smallest bundle size in my extension.

I've started to work on this, but @Dawntraoz if you've already made progress I would prefer to collaborate.

[Dawntraoz]

@igetgames feel free to start I had a lot of work and different projects, so It was quite a difficult time for me 💜
But if you need to test it with another hands or something, I will be here 👏

[valeriangalliat]

Fixed with #15 and 3.4.0, cheers! 🎉

[marcusrbrown]

Here's an example of the feature for the use case I described above.