Today we’ll be looking at a great tool that some of you may have heard of: PrismJS. Prism is a simple, lightweight, and easy to use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.
Prism Demo - Default Theme (html)
Prism Demo - Okaidia Theme (html)
Customized Download System
After selecting the theme and languages you want, download your JS and CSS files at the bottom of the download page.
If you decide you want to use a different theme, just make a new theme selection from the top of the page and download the regenerated stylesheet.
That’s it. Now we are ready to use Prism.
- Wrap each code block in a
preelement, and then in a
codeelement inside it, using the class of the
codeelement to specify language:
Just like that you have beautiful syntax highlighting. Notice how we use language-markup to highlight HTML files. Here are the different classes to use for the different languages.
- How to use Syntax Highlighter
- jQuery scroll to element