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

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







Comments

  1. 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

Post a Comment

Random Posts