Skip to content
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.

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

Load only languages needed support #13

Closed
Dawntraoz opened this issue Oct 10, 2020 · 7 comments
Closed

Load only languages needed support #13

Dawntraoz opened this issue Oct 10, 2020 · 7 comments

Comments

@Dawntraoz
Copy link

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

valeriangalliat commented Oct 12, 2020

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

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

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

@marcusrbrown
Copy link
Contributor

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

@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
Copy link
Owner

Fixed with #15 and 3.4.0, cheers! 🎉

@marcusrbrown
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants