Join our Telegram group to get instant answers to all your questions, stay updated with the latest posts, and receive regular updates: Join Now!.

How To Implement Syntax Highlighter In Blogger Articles

Syntax Highlighter is a colorful alternative to blockquote, adding visual appeal and making code or text displays more attractive.

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.

How to implement syntax highlighter in Blogger articles

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!

Versatile Professional | Blogger, Web Developer, & Trader | Bridging Content Creation, Tech Innovation, & Financial Markets

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post