Dynamically import each highlight language in markdown #2

New issue

Open

opened 2024-02-03 11:07:30 +01:00 by yoboujon · 0 comments

yoboujon commented

2024-02-03 11:07:30 +01:00

(Migrated from github.com)

Context

Because importing each language is such a pain, I wanted to dynamically import the language depending on whereas it is supported or not. This way I don't have to create a huge file containing each language. But i'm too dumb to figure out a better way.

Issue

I tried to dynamically import each component but i still get the error "ReferenceError: module is not defined". I don't understand why and where this error comes from because i'm not a javascript developper, so I let this to the experts of the subject.

Code I tried :

<script>
  import { onMount } from "svelte";
  import "$lib/css/markdown.css";
  import "highlight.js/styles/base16/atelier-estuary-light.min.css";

  import hljs from "highlight.js/lib/core";

  // Exporting values
  export let lang;
  export let text;
  let littleLanguage;
  let html = text;

  function showLang(visible) {
    if (visible) littleLanguage.style.visibility = "visible";
    else littleLanguage.style.visibility = "hidden";
  }

  onMount(async () => {
    try {
      const langPath = `/node_modules/highlight.js/lib/languages/${lang}`;
      const importedLanguage = (await import(langPath)).default;
      console.log(importedLanguage);
      if (hljs.getLanguage(lang) != undefined) {
        hljs.registerLanguage(lang, importedLanguage);
        html = hljs.highlight(text, { language: lang }).value;
      }
    } catch (error) {
      console.log(error, `Could not import language: ${lang}`);
    }
  });
</script>

<div
  class="markdown-codeblock"
  on:mouseover={() => showLang(true)}
  on:mouseleave={() => showLang(false)}
  on:focus={() => true}
  role="link"
  tabindex="0"
>
  <div class="little-language" bind:this={littleLanguage}>{lang}</div>
  <pre>{@html html}</pre>
</div>

## Context Because importing each language is such a pain, I wanted to dynamically import the language depending on whereas it is supported or not. This way I don't have to create a huge file containing each language. But i'm too dumb to figure out a better way. ## Issue I tried to dynamically import each component but i still get the error "ReferenceError: module is not defined". I don't understand why and where this error comes from because i'm not a javascript developper, so I let this to the experts of the subject. ## Code I tried : ```svelte <script> import { onMount } from "svelte"; import "$lib/css/markdown.css"; import "highlight.js/styles/base16/atelier-estuary-light.min.css"; import hljs from "highlight.js/lib/core"; // Exporting values export let lang; export let text; let littleLanguage; let html = text; function showLang(visible) { if (visible) littleLanguage.style.visibility = "visible"; else littleLanguage.style.visibility = "hidden"; } onMount(async () => { try { const langPath = `/node_modules/highlight.js/lib/languages/${lang}`; const importedLanguage = (await import(langPath)).default; console.log(importedLanguage); if (hljs.getLanguage(lang) != undefined) { hljs.registerLanguage(lang, importedLanguage); html = hljs.highlight(text, { language: lang }).value; } } catch (error) { console.log(error, `Could not import language: ${lang}`); } }); </script> <div class="markdown-codeblock" on:mouseover={() => showLang(true)} on:mouseleave={() => showLang(false)} on:focus={() => true} role="link" tabindex="0" > <div class="little-language" bind:this={littleLanguage}>{lang}</div> <pre>{@html html}</pre> </div> ```