Enable code syntax highlighting in blogger site using highlightjs

  • Template -> Edit HTML
  • Insert the following inside <head> tag: 
        
    <!-- BEGIN: Syntax Highlighting with highlight.js -->
    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/agate.min.css' integrity='sha512-wI7oXtzNHj/bqfLA3P6x3XYbcwzsnIKaPLfjjX8ZAXhc65+kSI6sh8gLOOByOKImokAjHUQR0xAJQ/xZTzwuOA==' referrerpolicy='no-referrer' rel='stylesheet'/>
    <script crossorigin='anonymous' integrity='sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>
    <script>hljs.highlightAll();</script>
    <!-- END: Syntax Highlighting with highlight.js -->
    <!-- BEGIN: CSS for code in pre and code -->
    <style type='text/css'>
        pre {
            font-family: monospace;
            font-size: 1 em;
            background: #333;
            color: #33cc33;
            tab-size: 4;
            padding: 5px;
            border: 1px dotted grey;
            border-radius: 5px;
            line-height: 2.0;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        code {
            white-space: pre-wrap;
            overflow-x: scroll;    
            font-family: monospace;
            font-size: 1em;
        }
    </style>
    <!-- END: CSS for code in pre and code -->
  • Click save icon to save the template
  • Use it in your blog post: 
    <pre><code class="language-html">...</code></pre>



See also

No comments:

Post a Comment