Highlight.js with tree shaking

component.js

// Core import
import highlightjs from 'highlight.js/lib/highlight'

// Languages import
import javascript from 'highlight.js/lib/languages/javascript'
import bash from 'highlight.js/lib/languages/bash'
import yaml from 'highlight.js/lib/languages/yaml'

// Register languages
highlightjs.registerLanguage('javascript', javascript)
highlightjs.registerLanguage('bash', bash)
highlightjs.registerLanguage('yaml', yaml)

...

Thanks for this.

This isn't working for us and we have a massive import from highlight

Not working for us.

Change this to and it will work:

import hljs from 'highlight.js/lib/core';
import typescript from 'highlight.js/lib/languages/typescript';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('typescript', typescript);

Only change is changing import highlightjs from 'highlight.js/lib/highlight' => import hljs from 'highlight.js/lib/core';

Change this to and it will work:

import hljs from 'highlight.js/lib/core';
import typescript from 'highlight.js/lib/languages/typescript';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('typescript', typescript);

Only change is changing import highlightjs from 'highlight.js/lib/highlight' => import hljs from 'highlight.js/lib/core';

Beautiful! This worked wonders!