Feature Request: HighlightJs

[jdgamble555]

This would be nice to have HighlightJS working with a copy code button!

J

[warrenshekyls]

You can just change the Code Renderer to render code blocks as you want. For example I use the CodeSnippet component from Svelte Carbon Components to do this with prismjs.

1. Create a new Svelte Component, I call it CodeRenderer.svelte

<script>
  import { CodeSnippet } from "carbon-components-svelte";
  import * as prism from "prismjs";
  import 'prismjs/components/prism-json';
  import 'prismjs/components/prism-bash';
  import 'prismjs/components/prism-css';
  import 'prismjs/components/prism-csv';
  import 'prismjs/components/prism-git';
  import 'prismjs/components/prism-javascript';
  import 'prismjs/components/prism-jsx';
  import 'prismjs/components/prism-markdown';
  import 'prismjs/components/prism-powershell';
  import 'prismjs/components/prism-scss';

  export let lang;
  export let text;
  let formatted = "";

  if (prism.languages[lang]) {
    formatted = prism.highlight(text, prism.languages[lang], lang);
  }
</script>

{#if formatted == ""}
  <CodeSnippet code={text} type="multi">{text}</CodeSnippet>
{:else}
  <CodeSnippet code={text} type="multi">{@html formatted}</CodeSnippet>
{/if}

2. Then when I use Svelte Markdown, I just override the renderer like this:

<script>
    import CodeRenderer from "$lib/components/CodeRenderer.svelte"
    import SvelteMarkdown from "svelte-markdown"
</script>

<SvelteMarkdown {source} renderers={{code: CodeRenderer}}  />

[yozawiratama]

Finally I found it

honestly we need better documentation for block level renderer: https://marked.js.org/using_pro#renderer

for example code block, in marked documentation it using code, infostring and escaped. I already spend time 2 hours only to fix it, because it cant work. And after I read you code example, I just know it if the parameters are text and lang. And after I test the code, itu run well

May be I miss it, where I can found complete documentation about it?

[jdgamble555]

Got it working with highlightjs as well:

markdown.svelte

<script lang="ts">
    import SvelteMarkdown from 'svelte-markdown';
    import CodeMarkdown from './code-markdown.svelte';

    import 'highlight.js/styles/github-dark.css';

    export let source: string;
</script>

<SvelteMarkdown renderers={{ code: CodeMarkdown }} {source} />

code-markdown.svelte

<script lang="ts">
    import hljs from 'highlight.js';

    export let text = '';
    export let lang = '';

    hljs.highlight(text, { language: lang || 'plaintext' }).value;
</script>

<pre class={`language-` + lang}>
    <code class="hljs">{@html highlightedText}</code>
</pre>

J

[n3-rd]

Got it working with highlightjs as well:

markdown.svelte

<script lang="ts">
  import SvelteMarkdown from 'svelte-markdown';
  import CodeMarkdown from './code-markdown.svelte';

  import 'highlight.js/styles/github-dark.css';

  export let source: string;
</script>

<SvelteMarkdown renderers={{ code: CodeMarkdown   }} {source} />

code-markdown.svelte

<script lang="ts">
  import hljs from 'highlight.js';

  export let text = '';
  export let lang = '';

  let highlightedText = hljs.highlight(text, { language: lang || 'plaintext' }).value;
</script>

<pre class={`language-` + lang}>
  <code class="hljs">{@html highlightedText}</code>
</pre>

J

A little correction