Aeolun / react-diff-viewer-continued

A simple and beautiful text diff viewer component made with Diff and React.
https://aeolun.github.io/react-diff-viewer-continued/
MIT License
113 stars 34 forks source link

Syntax highlighting not working #12

Closed jakeleventhal closed 1 year ago

jakeleventhal commented 1 year ago

I tried to use the syntax highlighting exactly like the documentation suggests and when i do so (using the same sample code), the lines are getting the right CSS styles applied to each element in the html. however, the styles must be getting overridden somewhere because i see no actual syntax highlighting applied to the rendered content.

Aeolun commented 1 year ago

The example page has a set of CSS classes for the styling embedded in the main stylesheet (right at the top). If you you want to use one of the pre-existing Prism themes (assuming you have prism already included in your page), you may need to import/add the tag for the stylesheet for the respective theme.

There is one mention of this in the docs, but there may be more information on where to find them in the prism documentation:

<link
  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
/>
jakeleventhal commented 1 year ago

the link referenced here doesn't work. it gives a 404 if you try to visit it.

if you modify to https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css then it directs me to an actual css file when visiting the link; however, the link tag in my html file doesnt actually apply the styles.

i got it to work properly by just downloading the file linked and importing it into my react file directly

Aeolun commented 1 year ago

I can't imagine what the difference is between having it directly in your HTML and imported in your React file, but I'm happy it works :)