Dynamic import with pipe and hightlight.js

highlight-js-dynamic-selective-import.ts

// hightlight-language.ts
import hljs from 'highlight.js/lib/core';
import bash from 'highlight.js/lib/languages/bash';
import markdown from 'highlight.js/lib/languages/markdown';
import scss from 'highlight.js/lib/languages/scss';
import typescript from 'highlight.js/lib/languages/typscript';
import yaml from 'highlight.js/lib/languages/yaml';

const langHightlighters = {
    bash,
    css: scss,
    markdown,
    typescript,
    yaml,
    javascript: typescript,
};

const registerLanguageHighlighters = () => {
    Object.entries(langHightlighters).forEach(([langName, highlighter]) => {
        hljs.registerLanguage(langName, highlighter);
    });

    return hljs;
};

export const hightlightJS = registerLanguageHighlighters();

// ----------------------------

// Pipe
import { Pipe, PipeTransform } from '@angular/core';
import { Observable, from, of, map } from 'rxjs';

@Pipe({ name: 'hightlight' })
export class HightlightPipe implements PipeTransform {
    transform(value: string, lang?: string): Observable<string> {
        return value
          ? from(import('./hightlight-language')).pipe(map(({ hightlightJS }) => {
            return lang ? hightlightJS.highlight(lang, value) : hightlightJS.highlight(value);
          }))
          : of('');
    }
}