Skip to main content

Display Codes on website or Blogger with Copy Option ft. Prismjs.com





 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">
HTML

     (ii) Add Javascript CDN

<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
HTML

    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>
HTML

Sample Code... 

<pre>
    <code class="language-html">
    <!--//Your Code Goes Here-->

    </code>
</pre>
HTML
Here is Code Will Excuted as mentioned UP 

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







Labels

Labels:

Comments

  1. UnknownAugust 28, 2021 at 11:03 PM

    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.

    ReplyDelete
  2. Online MarketingSeptember 25, 2021 at 4:18 AM

    Nice, finding this code... 2 days...

    ReplyDelete

Post a Comment

Random Posts