Show Codes on website or Blogger with Copy Option ft. Prismjs.com
Steps :-
1. Add PrismJS Library To Your Website .
(i) Add CSS CDN .
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.css">
(ii) Add Javascript CDN
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
2. Now, Use The Combo of <pre> and <code> Tag To Show Your Code .
<pre>
<code class="language-javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</code>
</pre>
Sample Code...
<pre>
<code class="language-html">
<!--//Your Code Goes Here-->
</code>
</pre>
Plugins :-
1. Show line Numbers :-
For Showing Line numbers add <body class="line-numbers"> <!-- enabled for the whole page --> . See More Details ->
Note :- You must have to use HTML Entity Encoder To Show HML in Code Tag Otherwise the will run in the page .
Example :- https://mothereff.in/html-entities
sir how can I change dark theme to light theme please give me solutions because I want to light theme and there are I don't see anywhere.
ReplyDeleteNice, finding this code... 2 days...
ReplyDelete