www.xbdev.net
xbdev - software development
Wednesday September 22, 2021
home | about | contact | Donations

     
 

HTML5 and Javascript

Example based approach ....

 

Add Syntax Highlighting to your Code

Have you ever wondered how to make your code examples look nicer? To create beautify, sexy code highlighting! (As Color Does Make a Difference)

It can't be easier!

In this tutorial example:
1. You'll use Prismjs (free, simple, open source and flexible)
2. Extend the library with prism-live to support textarea highlighting


Below shows an example of with and without highlighting added two a textarea:


vs




Here are the three steps to adding code highlighting to your web page:
1. The steps are really easy, add the .css script to the top of your file (before your highlighted code).
2. Put your code in a 'textarea' tag, ensure you add the class="prism-live language-markup"
3. At the bottom of your file, add the .js script
4. Ta-da! It should just work!

Here is the Complete Code




References

* Download Source Code
* 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.