Enable syntax highlighting (#309) #407
Conversation
| highlight: function( code ) { | ||
| return highlight.highlightAuto( code ).value; | ||
| } | ||
| } ); |
There was a problem hiding this comment.
might start out by pulling this function into the module scope instead of creating a new closure on each call. could also use fat-arrow syntax for functions.
const highlighter = code => highlight.highlightAuto( code ).value;
…
const markdownHTML = marked( content, { highlight: highlighter } );
|
Thanks for the contribution @rnewton! I'll try and take a deeper look into this in the next day or two. |
|
Good call. Thanks! |
| @@ -55,6 +55,7 @@ | |||
| "cookie": "0.2.3", | |||
| "create-hash": "1.1.2", | |||
| "draft-js": "0.9.1", | |||
| "highlight.js": "^9.7.0", | |||
There was a problem hiding this comment.
Let's pin this to its specific version. "Compatible" updates too often aren't.
|
@rnewton are there better choices of style for the dark theme vs. the light theme? I appreciate the balance you have picked, but I want to make sure we don't unnecessarily tie ourselves to one when we could switch between the two if that were better. |
|
I'm definitely open to suggestions on the theme(s) to pick. highlight.js includes a bunch. I'm basically trying to avoid picking things that are divisive. Some people like monokai and some people hate it. I'll admit that I didn't investigate light/dark as separate themes, but "atom one light/dark" might be a good fit. |
|
@rnewton I noticed an opportunity to do the rendering in a web worker. probably this isn't the greatest fit at this time, but it would be nice to have a quick assessment if that's a good path to explore |
|
I'm actually quite fond of solarized light/dark as an option instead. A little easier to read than the yellow on the light theme of hybrid.
|
|
Having never worked with web workers, I hesitate to jump on that right now... |
|
@rnewton how hard would it be to swap styles at runtime? |
|
@roundhill @drw158 and @rodrigoi this seems like a good future to put out there for |
|
@dmsnell sure, let's |
I decided to take a swing at adding syntax highlighting for the markdown preview. It uses highlight.js and the "hybrid" theme that seems to work well for both light and dark modes. Everything passes eslint and I think I followed the style guides, but let me know if you want any tweaks.