How to add Syntax Highlighting on any Webpage including Blogger.com

January 29, 2023 | No comments

Syntax Highlighting on Webpage including Blogger.com

Syntax Highlighting on Webpage including Blogger.com
Prism is a lightweight syntax highlighter, very easy to use and works very well.

Prism Source

Like most Java scripts prism can be downloaded and used in any web application or it can also be served from CDN Networks. Some of the CDN Networks are as follows as of writing. https://www.jsdelivr.com/package/npm/prismjs https://cdnjs.com/libraries/prism https://unpkg.com/browse/prismjs@1.29.0/

Adding Prism JS

Include JS and CSS for Prism in the Head section of page
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" integrity="sha256-ko4j5rn874LF8dHwW29/xabhh8YBleWfvxb8nQce4Fc=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
</head>

Use respective language css class in page

Example for language java.
<pre>
<code class="language-java">
   Java Code here
</code>
</pre>

Example with Java Script

Example for language javascript.
<pre>
<code class="language-javascript">
   Javascript Code here
</code>
</pre>
Basically for the supported language we need to use respective css class (language-LANGUAGE}, for instance in above case we used language-java and language-javascript as css class. Prism support a lot of different languages, the full list can be found in the official prism site.

No comments :

Post a Comment

Please leave your message queries or suggetions.