Home
Adsense Help
Blogger

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%;
        }
  5. Now Search </body> tag via CTRL + F. Copy and Paste this JavaScript Code above the </body> tag. 
    6. <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
  6. 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