www.xbdev.net
xbdev - software development
Saturday June 12, 2021
home | about | contact | Donations

     
 

HTML5 and Javascript

Example based approach ....

 

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;

* shadows (prism.css - pre[class*="language-"]):
text-shadow: 0 1px grey;

* width to be a fixed size, put inside a 'div' with it'll resize to fit

* border (prism.css - pre):
border: 1pt solid red;

* 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);



References

* Download Source Code [18kb]
* Homepage: https://prismjs.com/
* PrismJS-Live: https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
* Online Editor [Link]



 

 
 Visitor: 9534626
{ 229.27.38.75 }
Copyright (c) 2002-2020 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.