If you enjoy our website, feel free to connect with us on Google News or become a part of our Telegram Group for more updates and engaging discussions.

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!

Success isn't an endpoint, nor is failure a definitive outcome. It's the bravery to persist that truly matters in the journey of life.

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