search

pngwn / MDsveX

A markdown preprocessor for Svelte.
https://mdsvex.pngwn.io
MIT License
2.36k stars 102 forks source link

Code Highlighting: You have a good example? #1

Closed raguay closed 4 years ago

raguay commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

raguay commented 5 years ago

Here it is:

try {
 var lines = NP.text.split('\n');
 NP.text = '';
 for(var i = 0; i
< lines.length ; i++) {
     var match =
lines[i].trim().match(/^\d+\. (.*)$/);
   if (match != null)
       NP.text += match[1] + '\n';
 }
} catch (e) {
  NP.text += "\n\n" + e.toString()
}

On Sat, May 18, 2019 at 6:26 PM pngwn notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR7U7LOANX6E2455CIDPV7RXBA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWM2WQ#issuecomment-493669722, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR6UZADY5L6VSE3PQ6LPV7RXBANCNFSM4HNUUVHQ .

pngwn commented 5 years ago

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

https://github.com/sveltejs/svelte/issues/2813

raguay commented 5 years ago

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 notifications@github.com 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 https://github.com/sveltejs/svelte/issues/2813

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR4DURJBXSD6LX4QC2TPWAAIXA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWOWZQ#issuecomment-493677414, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR2DQLT3RT2UWU466D3PWAAIXANCNFSM4HNUUVHQ .

pngwn commented 5 years ago

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 commented 5 years ago

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

On Sat, May 18, 2019 at 9:51 PM pngwn notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR5RTR7OVBXTO2UCVDTPWAJYBA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWQBEY#issuecomment-493682835, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR6KWRECASFXDK4ZQKLPWAJYBANCNFSM4HNUUVHQ .

pngwn commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR6NWL4ITLA6S6EEX6TPYOKIRA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXSA4Q#issuecomment-498016370, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR2H6HWSNWJY6KEX5CDPYOKIRANCNFSM4HNUUVHQ .

pngwn commented 5 years ago

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

raguay commented 5 years ago

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 notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR5YY7CCN2CIATZRWDTPYTKATA5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWYWSBA#issuecomment-498166020, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR65RLQRVSRJQS52KPDPYTKATANCNFSM4HNUUVHQ .

pngwn commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1?email_source=notifications&email_token=AAS7JR3V6YRKYJFMJCZE3SLPYYSL3A5CNFSM4HNUUVH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW325MY#issuecomment-498577075, or mute the thread https://github.com/notifications/unsubscribe-auth/AAS7JR3QQGA4QUXS6MI7Q73PYYSL3ANCNFSM4HNUUVHQ .

louwers commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Great. Thanks.

On Tue, May 26, 2020 at 5:23 AM pngwn notifications@github.com 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 https://github.com/pngwn/MDsveX/issues/1#issuecomment-633731427, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS7JR7UTS2SCYAFHVNYK3LRTLVXHANCNFSM4HNUUVHQ .