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.
Note: Only a member of this blog may post a comment.