Taking Code Highlighting to the Next Level (Plugins)
The PrismJS library means you can slap on beautiful colors to your code effortlessly. It really adds an aspect of quality to your web page.
Code snippets come to life!
But wait, you can do more! More than just colors! Yeah! I know, you can't beleive it.
PrismsJS also has a variety of well supported plugins, two particularly useful ones are:
1. line-number plugin
2. highlight plugin
Integrating them into your existing setup is just a few clicks - download an updated version of your 'prism.css' and 'prism.js' files but with the added line-number and highlight pluggin added.
Then, you just add in an extra line to your code to turn them on (as shown below).
What makes PrismJS particularly nice, is you can use a 'textarea' directly in the html (vs code/pre block). Since you're using a textarea, it means you don't have to worry about tags (ignore the greater/less than triangles).
vs
If you want your line numbers to start from a particular index, you have to add the 'pre' and 'code' tags, set the 'data-start' value.
This snippet starts from 19:
alert('Hello, '+name);
Line Number Customizations
Few tweaks for modifying the visuals, just a matter of modifying the .css file.
1. prism.css - edit the 'pre' tag to adjust visual attributes, for example:
* remove background color (prism.css - pre):
background:transparent;
* force font size to be smaller (main style file):
pre, textarea, code {
font-size: 10px !important;
line-height: 1.0 !important;
overflow: hidden !important;
}
* remove small larger gap at the bottom (same at the top and bottom), in prism-live.css, comment out:
/* padding-bottom: var(--scrollbar-width); */
In prism-live.css, edit this line:
padding: .2rem .5rem;
modify to:
padding: .2rem .2rem;
2. Download the prismjs version with 'line-numbers' plugin (both the js and css)
3. Add 'line-numbers' to the class directive, i.e.:
\<'textarea id="html" class="prism-live language-markup line-numbers"\>
Highlighting
Adding highlighting so a particular line stands out, you can add the 'highlight' plugin. You set the 'data-line' value to which line number you want to be emphasised.
If you want to customize the highlight color, e.g., red or yellow, you modify the 'prism.css -> .line-highlight' (such as background-color: rgba(255,255,0,0.2); )
Highlighting Customizations
Some tweaks to enhance the highlighting (highlight color).
In the file 'prism.css' - edit the '.highlight' to change the highlight color e.g., background: rgba(200,10,10,.2);
