Use prism.js instead of highlight.js to render code samples

[muuvmuuv]

This will give us the ability to add plugins like:

• https://prismjs.com/plugins/copy-to-clipboard/ (Fast way to copy a config sample)
• https://prismjs.com/plugins/line-numbers/ (Just nice to have)
• https://prismjs.com/plugins/line-highlight/ (To highlight something important)
• https://prismjs.com/plugins/show-invisibles/ (important for https://unibeautify.com/docs/option-remove-trailing-whitespace)
• https://prismjs.com/plugins/jsonp-highlight/ (Nice to link to a file in a repo)
• https://prismjs.com/plugins/remove-initial-line-feed/ (If accidentally added)
• https://prismjs.com/plugins/command-line/ (useful for the CLI later)
• https://prismjs.com/plugins/unescaped-markup/ (Nice for HTML)

[Glavin001]

Awesome idea! Pull Requests very welcome!

[Glavin001]

See https://docusaurus.io/docs/en/doc-markdown#using-prism-as-additional-syntax-highlighter for Docusaurus documentation on using Prism. 🎉

[muuvmuuv]

Issue: facebook/docusaurus#972

Docusaurus needs more options to allow modification of Remarkable pre/code tags to add Prism.js plugin relevant classes like line-numbers.
It also needs the ability to choose one highlighter instead of usePrism for a specific language.

[Glavin001]

It also needs the ability to choose one highlighter instead of usePrism for a specific language.

I think you can use usePrism: true to set for all languages.

[muuvmuuv]

@Glavin001 Yes, I tried this, but this will fail due to javascript must be included with component and this seems to not work correctly. I hope to get this fixed with the Docusaurus team and hope to get more options here.

[muuvmuuv]

@Glavin001 They have merged my request 🎉 I can now take a better look on extending the config

[Glavin001]

@muuvmuuv Awesome! Let me know if you need a hand with anything. I look forward to a PR, this is exciting 🎉.

[trusktr]

Basically, Prism has more features (plugins) that Highlight doesn't have?

[garretwilson]

Hi, what's the status on this? I'm curious what you decided to go with. I've been using Prism.js for years on many sites, and in general I love it. There's one huge problem for me, though: Prism.js "hijacks" certain common classes such as important and title, so that if the CSS framework you're using happens to use these classes, too, it screws up the syntax highlighting.

I hope I can stay with Prism.js, but this is really biting me. I'm starting to wonder what my options are, which is why I'm curious to know your experience with other syntax highlighters for the web.