Code Highlighting: You have a good example?

[raguay]

I'm using MDsveX to create the documentation for my Svelte webapp. But, I'm running into difficulties getting the code highlighting to work. I'm using the highlight.js module and I can see everything loading into the browser, but the code isn't being highlighted. If you have a working example, I can most likely figure where I went wrong from it. Thanks.

[pngwn]

All markdown-it options can be passed in as an option, so you would do this in your rollup or webpack config via the markdownOptions. This is the markdown-it example from their documentation and seems to work from my simple test:

preprocess: mdsvex({
  markdownOptions: {
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }
      return ''; // use external default escaping
    }
  }
})

Remember, this will only generate the correct HTML for the highlighting to work, you will still need to include the correct CSS files on the page to actually see the highlighting.

If this doesn't work for you, post your bundler config and I'll take a look. I'll try to get an example or two up over the weekend as well.

[raguay]

Okay, I have it halfway working now. When I run it in npm run dev it looks great except for not line wrapping. But, when I build it has the first line to the left and all other lines way to the right. Very weird. Both ways has no line wrapping. I would like to have line wrapping on the markdown examples. Is there a config for that? I'm figuring something isn't getting loaded on the full build or the highlightjs has some funny stuff when minimized (CodeMirror is similar issues with some of it's addon).

[pngwn]

Can you show me the HTML for the code blocks after they have been parsed?

[raguay]

Here it is: <pre class="hljs"><code><span class="hljs-keyword">try</span> { <span class="hljs-keyword">var</span> lines = NP.text.split(<span class="hljs-string">'\n'</span>); NP.text = <span class="hljs-string">''</span>; <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; lines.length ; i++) { <span class="hljs-keyword">var</span> match = lines[i].trim().match(<span class="hljs-regexp">/^\d+\. (.*)$/</span>); <span class="hljs-keyword">if</span> (match != <span class="hljs-literal">null</span>) NP.text += match[<span class="hljs-number">1</span>] + <span class="hljs-string">'\n'</span>; } } <span class="hljs-keyword">catch</span> (e) { NP.text += <span class="hljs-string">"\n\n"</span> + e.toString() } </code></pre>

…

On Sat, May 18, 2019 at 6:26 PM pngwn ***@***.***> wrote: Can you show me the HTML for the code blocks after they have been parsed? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR7U7LOANX6E2455CIDPV7RXBA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWM2WQ#issuecomment-493669722>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR6UZADY5L6VSE3PQ6LPV7RXBANCNFSM4HNUUVHQ> .

[pngwn]

I just did some investigation and this looks like a Svelte bug, it is adding whitespace when it generates the code.

sveltejs/svelte#2813

[raguay]

But, it only does it for a full build. If you run a dev build that doesn’t minimize, it doesn’t add it. Also, is there a switch to have it do line wrap?

…

On Sat, May 18, 2019 at 8:30 PM pngwn ***@***.***> wrote: I just did some investigation and this looks like a Svelte bug, it is adding whitespace when it generates the code. sveltejs/svelte#2813 <sveltejs/svelte#2813> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR4DURJBXSD6LX4QC2TPWAAIXA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWOWZQ#issuecomment-493677414>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR2DQLT3RT2UWU466D3PWAAIXANCNFSM4HNUUVHQ> .

[pngwn]

This is because svelte generates slightly different code for dev: true and dev:false. Even if you remove terser (which minimises the code) this still happens.

[raguay]

Oh…got to wait on a Svelte fix. Okay thanks.

…

On Sat, May 18, 2019 at 9:51 PM pngwn ***@***.***> wrote: This is because svelte generates slightly different code for dev: true and dev:false. Even if you remove terser (which minimises the code) this still happens. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR5RTR7OVBXTO2UCVDTPWAJYBA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWQBEY#issuecomment-493682835>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR6KWRECASFXDK4ZQKLPWAJYBANCNFSM4HNUUVHQ> .

[pngwn]

Just to update on this, if you set hydratable: true in your bundler config, you won't have this problem as it generates slightly different code.

Not a solution but a workaround until this is fixed in Svelte.

[raguay]

Okay, that works great. Now, how can I get it to wrap text in example markdown scripts?

…

On Sun, Jun 2, 2019 at 4:55 PM pngwn ***@***.***> wrote: Just to update on this, if you set hydratable: true in your bundler config, you won't have this problem as it generates slightly different code. Not a solution but a workaround until this is fixed in Svelte. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR6NWL4ITLA6S6EEX6TPYOKIRA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXSA4Q#issuecomment-498016370>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR2H6HWSNWJY6KEX5CDPYOKIRANCNFSM4HNUUVHQ> .

[pngwn]

I'm not sure what you mean, sorry. Could you give an example?

[raguay]

Just create a markdown text in a paragraph in it that is about two-three lines long inside the code fence with markdown as the language. Then create the document and all of the paragraph text will be in one line. You can scroll the line, but it is hard to read. I would rather it be line-wrapped to fit inside the documents body. I was hoping for a flag to enable that.

…

On Mon, Jun 3, 2019 at 3:38 PM pngwn ***@***.***> wrote: I'm not sure what you mean, sorry. Could you give an example? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR5YY7CCN2CIATZRWDTPYTKATA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWYWSBA#issuecomment-498166020>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR65RLQRVSRJQS52KPDPYTKATANCNFSM4HNUUVHQ> .

[pngwn]

Like I said earlier, MDsveX doesn't handle the actual markdown parsing, so I don't have control over how markdown-it or your chosen syntax highlighter parse and render the HTML. This is probably something that could be done with some kind of plugin at a guess, but I'm not entirely sure.

[raguay]

Okay. So, I'll need to play around with CSS or research the code highlighter used. I'm on to it...Thanks for the help.

…

On Tue, Jun 4, 2019 at 3:35 PM pngwn ***@***.***> wrote: Like I said earlier, MDsveX doesn't handle the actual markdown parsing, so I don't have control over how markdown-it or your chosen syntax highlighter parse and render the HTML. This is probably something that could be done with some kind of plugin at a guess, but I'm not entirely sure. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1?email_source=notifications&email_token=AAS7JR3V6YRKYJFMJCZE3SLPYYSL3A5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW325MY#issuecomment-498577075>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAS7JR3QQGA4QUXS6MI7Q73PYYSL3ANCNFSM4HNUUVHQ> .

[louwers]

Can this be re-opened? I was about to open a similar issue.

This piece of documentation is not very helpful!

        markdownOptions: {
          typographer: true,
          linkify: true,
          highlight: (str, lang) => whatever(str, lang), // this should be a real function if you want to highlight
        },

[pngwn]

New documentation will be published soon (with the new version). It will include improved highlighting documentation (the new version will also support automatic highlighting for most languages).

[pngwn]

The latest mdsvex version highlights pretty much everything with no configuration and a custom highlighter can be used if you prefer.

This is documented at https://mdsvex.com

[raguay]

Great. Thanks.

…

On Tue, May 26, 2020 at 5:23 AM pngwn ***@***.***> wrote: The latest mdsvex version highlights pretty much everything with no configuration and a custom highlighter can be used if you prefer. This is documented at https://mdsvex.com — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS7JR7UTS2SCYAFHVNYK3LRTLVXHANCNFSM4HNUUVHQ> .