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

Unibeautify / website

Webpage for Unibeautifier

https://unibeautify.com/

MIT License

10 stars 28 forks source link

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

Open muuvmuuv opened 5 years ago

muuvmuuv commented 5 years ago

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

Awesome idea! Pull Requests very welcome!

Glavin001 commented 5 years ago

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

muuvmuuv commented 5 years ago

Issue: https://github.com/facebook/Docusaurus/issues/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 commented 5 years ago

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

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

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

Glavin001 commented 5 years ago

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

trusktr commented 4 years ago

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

garretwilson commented 4 years ago

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.