Prismjs plugins/line highlighting

[benwiley4000]

Because react-live relies on the Node version of prismjs, it's unable to use many prism plugins which rely on the DOM. As discussed over on their repo, there aren't definite plans to fix this: https://github.com/PrismJS/prism/issues/1171

It makes definite sense to use the node package, especially for server rendering.

At the same time I feel react-live is sorely missing some features, particularly line highlighting - being able to highlight lines can really helpful when presenting an evolving piece of code.

Wondering if any thought has gone into remedying this.

[benwiley4000]

Hm well for what it's worth I became obsessed enough that I reverse-engineered the line highlighting feature of prismjs and I've got it working with React, in case anyone's interested in a PR...

[aprather51]

I'd very much like to know your reversed-engineered method.

[benwiley4000]

You can see this file: https://github.com/benwiley4000/why-bind-cache/blob/master/presentation/slides/CodePlaygroundSlide.js

One of the downsides here is that it only works correctly until one of your lines wraps.. then it starts highlighting the wrong lines.

[kitten]

A couple of changes are probably going to be made to react-live, if all goes well.

One of them might be to switch to @satya164’s react-simple-code-editor for the Editor component. One of its goals was to make this exact integration on react-live with prism simpler, but as you can see in that project, it’s quite agnostic to the highlighter itself. https://github.com/satya164/react-simple-code-editor

Another step that might become possible with said code editor is to use prism’s core and highlighting code to actually render the highlighted code out in React, which would make it a lot easier to add stuff like line numbering.

[ryan-roemer]

@kitten -- Not strictly related to this issue, but are we going to be able to come up with a solution that gets around the "you can only have exactly one prismjs package in node_modules or else the world blows up" problem?

@boygirl -- For context here, any time you have 2+ prismjs libs require'ed in the same webpack / app bundle the second one blows up because of internal singleton state. We've patched our projects to all use prismjs-1.6.0 as a bandaid, but places we've seen this bug so far:

• spectacle vs. react-live
• radium-docs vs. react-live
• spectacle-docs vs. react-live

[aprather51]

react-syntax-highlighter could be a lot simpler and probably would work. Wrapping SyntaxHighlighter....

import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { atomDark } from 'react-syntax-highlighter/styles/prism';
...
<SyntaxHighlighter style={atomDark}>
  <LiveEditor />
<SyntaxHighlighter style={atomDark}>

made a little changes in font size, padding and border-radius except for background and font color. It seem like nothing can override .token.xxx in stylesheet.

[benwiley4000]

I also ran into the issue @ryan-roemer mentioned while I was trying to extract the highlighting code from the newer Prism version to use with my project. That's why I decided to rewrite the functionality from scratch.

[kitten]

@ryan-roemer I think we should just use the complete prismjs bundle and prevent the separate imports to avoid issues in the future.

I've got some demo code here for what a prism-renderer would look like which would increase the amount of customisation a user could do around the rendered code as well https://codesandbox.io/s/v6p4j23yn3

@aprather51 I don't think we'd want to switch to a different syntax highlighter, but that being said, if it'll always be possible to swap out the Editor, which in combination with react-simple-code-editor would mean that it'll become very easy to drop in new highlighters.

[benwiley4000]

Speaking on considering different editors, might be good to have a way to set a min/max text size on the editor. The way it scales based on the window size doesn't work the best with small or very large screens. I've mostly begun thinking about this because I'm tired of my text wrapping with my not-totally-great line highlighting implementation, but it looks kind of funny regardless when the lines are so short (or when the text becomes microscopic).