How To Add HTML/JavaScript / CSS Highlighter in Blogger Post

So many of the bloggers want to add a box that contain code. On blogger, there are so many methods to add a Code snippet to a blogger post. Here we are using custom code for your code and also have a copy button to copy the code 

How to Add Code Snippets Box in Blogger Post?

This question is very common to all, but most of the tutorial give you big code to insert in your </head> tag. Adding external code will decrease your site loading speed. So we want to solve this issue. Code can't be paste like normal text. When we paste a code like a normal text reader can't copy it. 

How the Code Box Look Like - Demo

Best  Way To Insert Code in Blogger Post?

  1.  Login to blogger account
  2. Go to Theme Section
  3. Select Customize >> Edit HTML
  4. Search in blogger  ]]></b:skin>  tag via CTRL + F & Paste this Before The  ]]></b:skin>  tag.
  5. .hljs {
                display: block;
                overflow-x: auto;
                padding: 0.5em;
                background: #1E1E1E;
                color: #DCDCDC;
                font-weight: normal;
                font-size: 1.15em !important;
            }
    
            .hljs-keyword,
            .hljs-literal,
            .hljs-symbol,
            .hljs-name {
                color: #569CD6;
            }
    
            .hljs-link {
                color: #569CD6;
                text-decoration: underline;
            }
    
            .hljs-built_in,
            .hljs-type {
                color: #4EC9B0;
            }
    
            .hljs-number,
            .hljs-class {
                color: #B8D7A3;
            }
    
            .hljs-string,
            .hljs-meta-string {
                color: #D69D85;
            }
    
            .hljs-regexp,
            .hljs-template-tag {
                color: #9A5334;
            }
    
            .hljs-subst,
            .hljs-function,
            .hljs-title,
            .hljs-params,
            .hljs-formula {
                color: #DCDCDC;
            }
    
            .hljs-comment,
            .hljs-quote {
                color: #57A64A;
                font-style: italic;
            }
    
            .hljs-doctag {
                color: #608B4E;
            }
    
            .hljs-meta,
            .hljs-meta-keyword,
            .hljs-tag {
                color: #9B9B9B;
            }
    
            .hljs-variable,
            .hljs-template-variable {
                color: #BD63C5;
            }
    
            .hljs-attr,
            .hljs-attribute,
            .hljs-builtin-name {
                color: #9CDCFE;
            }
    
            .hljs-section {
                color: gold;
            }
    
            .hljs-emphasis {
                font-style: italic;
            }
    
            .hljs-strong {
                font-weight: bold;
            }
    
            .hljs-bullet,
            .hljs-selector-tag,
            .hljs-selector-id,
            .hljs-selector-class,
            .hljs-selector-attr,
            .hljs-selector-pseudo {
                color: #D7BA7D;
            }
    
            .hljs-addition {
                background-color: #144212;
                display: inline-block;
                width: 100%;
            }
    
            .hljs-deletion {
                background-color: #600;
                display: inline-block;
                width: 100%;
            }
  6. Now Search </body> tag via CTRL + F. Copy and Paste this JavaScript Code above the </body> tag.
  7. <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
        <script>hljs.initHighlightingOnLoad();</script>
  8. Now  create your syntax highlighter code with the Syntax Highlighter Creator For Blogger, paste HTML code in your post & show your syntax highlighter code.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.