As a self-taught programming enthusiast, I've come across the challenge of sharing code snippets on Blogger. While the default "Format as code" feature in the text editor helps maintain code structure, it lacks a syntax highlighter.
Code articles without syntax highlighting can be confusing for readers. A syntax highlighter not only separates code from the rest of the content but also enhances comprehension. Advanced highlighters go a step further by using multiple colors and different fonts, making it easier for visitors to read and understand the code seamlessly.
Steps for Adding syntax highlighter
Step 1: Go and login to your Blogger Dashboard
Step 2: In Blogger Dashboard, Go to Themes section
Step 3: Now click on the drop down icon just beside the 'Customize' button.
Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page.
Step 5: Search for ]]></b:skin> and paste the following CSS Just above it.
/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}Step 6: Search for </head> and paste the following JavaScript Just above it.
<b:comment><!-- Syntax Highlighter --></b:comment> <link href='//cdn.rawgit.com/isagalaev/highlight.js/cf4b46e5/src/styles/googlecode.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> <b:comment><!-- End Syntax Highlighter --></b:comment>
Step 7: Save the changes by clicking on this icon .
Display
To present a code container with an elegant Syntax Highlighter, simply use the following syntax:
<pre><code>your_code_content_here.</code></pre>
Before inserting code into the editor, employ the Code Encoding tool available at HTML Encoder to encode the code securely.
Conclusion
By following these straightforward steps, you can craft a visually appealing code container for your article, complete with the Syntax Highlighter function. Feel free to drop any questions in the comments section below. Best of luck!