How to install Syntax Highlighter in a Blog post, Theboegis style

In addition to beautifying the view of the line of code in a blog post, the use of Syntax Highlighter is also intended for readers to easily identify the type of code provided by the author. The effect of using other Syntax Highlighter is that visitors will feel more comfortable reading the content of the blog, and for authors or admins of the blog will make it more professional in presenting articles on their blog tutorials.

Syntax Highlighter is a special feature of the process of moving a specific programming language code by writing, text color, the exact position of a programming language code to be moved or copied into other forms to make it easier to read or learn.

Syntax Highlighter works almost the same as blockquote but the difference to the blockquote feature of the text is usually only one color, to change the color according to the original code must be done manually. So the core Syntax highlighter will be effective in the manufacturing process or moving when compared to the blockquote feature.
 First, log into Blogger > Select Blog > Click the Theme menu and click the Edit HTML button > Add the CSS code below before </head> or &lt;/head &gt; &lt;!--<head/>--&gt;

<b:if cond='data:view.isSingleItem'>
<style type='text/css'>
// Highlighter
.rtl{direction:rtl}.no-items.section{display:none}
h1,h2,h3,h4,h5,h6{font-family:var(--title-font);font-weight:700;line-height:normal}
pre{max-height:500px;white-space: pre-wrap;overflow:auto;margin:1.5em 0;font-size:0.9rem;line-height: 1.5;background:linear-gradient(to right,#000B18,#00264D);color: var(--white);padding:10px;border-radius:5px;display:block;overflow-x:auto}pre{counter-reset:line-numbers}code::before{counter-increment:line-numbers;content:counter(line-numbers);display:block;position:absolute;left:-4.5em;top:0;width:4em;text-align:right;color:#60686f;white-space:pre}code{display:block;position:relative;margin-left:2em;padding-left:.5em;min-height:1em;border-left:1px solid #32363b}code::after{content:&quot;.&quot;;visibility:hidden}
.hljs-name,.hljs-strong,.hljs-built_in{color:#ffd8a8}.hljs-strong{font-weight:bold}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-tag{color:#868e96}.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#fbcffc}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b5bd68}.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-builtin-name{color:#ffa}.hljs-attr{color:#ffa94d}.hljs-number,.hljs-symbol,.hljs-bullet{color:#4cd3c2}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}.hljs-comment{color:#868e96}.hljs-deletion,.hljs-code{color:#888}.hljs-regexp,.hljs-link{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background-color:#fc9b9b;color:#333}.hljs-addition{background-color:#a2fca2;color:#333}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs .javascript .hljs-keyword{color:#efb1ff}.hljs-function .hljs-params{color:#00bcd4}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
input:not([type=&quot;radio&quot;]):not([type=&quot;checkbox&quot;]):not([type=&quot;submit&quot;]):not([type=&quot;button&quot;]):not([type=&quot;range&quot;]):not([type=&quot;reset&quot;]),textarea,select{outline-offset: -2px;padding:16px;background:#f1f3f5;color:#656565;width:100%;display:block;line-height:normal;font-size:inherit;transition:all .1s ease-in-out;border:2px solid #f1f3f5;margin:5px auto}
input:not([type=&quot;radio&quot;]):not([type=&quot;checkbox&quot;]):not([type=&quot;submit&quot;]):not([type=&quot;button&quot;]):not([type=&quot;range&quot;]):not([type=&quot;reset&quot;]):focus,textarea:focus,select:focus{border-color:#4dabf7;outline:none;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.0125),0 0 8px rgba(34,139,230,0.5);box-shadow:inset 0 1px 1px rgba(0,0,0,0.0125),0 0 8px rgba(34,139,230,0.5)}
input[type=checkbox]{-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);transform: scaleX(-1);-ms-filter: fliph;filter: fliph}.transition, input[type=radio]:after, input[type=checkbox][type=radio]:after, input[type=checkbox]:after{-moz-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);-o-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);-webkit-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2)}.bgTransition, input[type=radio]:before, input[type=checkbox][type=radio]:before, input[type=checkbox]:before{-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}input[type=radio], input[type=checkbox]{position:relative}input[type=radio]:before, input[type=radio]:after, input[type=checkbox]:before, input[type=checkbox]:after{content:&quot;&quot;;position:absolute}input[type=radio]:before, input[type=checkbox]:before{height:100%}input[type=radio][type=radio], input[type=checkbox][type=radio]{border-radius:30px}input[type=radio][type=radio]:before, input[type=checkbox][type=radio]:before{width:100%;border-radius:30px;background-color:#2c3f52;box-shadow:0 0 0 1px #2c3f52}input[type=radio][type=radio]:after, input[type=checkbox][type=radio]:after{width:100%;height:100%;border-radius:30px;background-color:#15202a;-moz-transform:scale(0, 0);-ms-transform:scale(0, 0);-webkit-transform:scale(0, 0);transform:scale(0, 0)}input[type=radio][type=radio]:checked:after, input[type=checkbox][type=radio]:checked:after{-moz-transform:scale(0.75, 0.75);-ms-transform:scale(0.75, 0.75);-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75)}input[type=radio][type=radio]:checked:before, input[type=checkbox][type=radio]:checked:before{background-color:var(--background);box-shadow:0 0 0 1px var(--background)}input[type=radio][type=checkbox]:before, input[type=checkbox][type=checkbox]:before{width:200%;background-color:#2c3f52;box-shadow:0 0 0 1px #2c3f52;-moz-transform:translate(-25%, 0);-ms-transform:translate(-25%, 0);-webkit-transform:translate(-25%, 0);transform:translate(-25%, 0);border-radius:30px}input[type=radio][type=checkbox]:after, input[type=checkbox][type=checkbox]:after{width:80%;height:80%;margin-top:10%;margin-left:10%;background-color:#15202a;border-radius:30px;-moz-transform:translate(60%, 0);-ms-transform:translate(60%, 0);-webkit-transform:translate(60%, 0);transform:translate(60%, 0)}input[type=radio][type=checkbox]:checked:after, input[type=checkbox][type=checkbox]:checked:after{-moz-transform:translate(-60%, 0);-ms-transform:translate(-60%, 0);-webkit-transform:translate(-60%, 0);transform:translate(-60%, 0)}input[type=radio][type=checkbox]:checked:before, input[type=checkbox][type=checkbox]:checked:before{background-color:var(--background);box-shadow:0 0 0 1px var(--background)}input[type=radio], input[type=checkbox]{cursor:pointer;width:15px;height:15px;margin-left:20px;margin-right:20px;margin-top:10px;display:inline-block}
.btn a,a.btn{color:#fff!important}.btn a:hover,a.btn:hover{color:#ff5722!important}
textarea{min-height:250px;resize:vertical}input[type=button],button{display:inline-block;margin:5px}
abbr{position:relative;border:2px dashed var(--background);padding:0.5px 8px;border-radius:6px;cursor:help}abbr:hover::after{background:var(--background);color:var(--color);border-radius:6px;bottom:100%;content:attr(title);display:block;left:100%;padding:2px 8px;position:absolute;white-space:pre}
</style>
</b:if>

Then add the following code before </body> or &lt;!--</body>--&gt; &lt;/body &gt;

<b:if cond='data:view.isSingleItem'>
<script type='text/javascript'>
//<![CDATA[
jQuery.cachedScript=function(e,c){return c=$.extend(c||{},{dataType:"script",cache:!0,url:e}),jQuery.ajax(c)};
function main(){
$('input[type="range"]').each(function(){$(this).after('<span class="range-value">'+$(this).val()+"</span>"),$(this).on("mouseup input",function(){$(this).next(".range-value").html($(this).val())})});
$('a.this').each(function(){$(this).attr('href');$(this).attr('href',window.location.href)});
$.when($.cachedScript("https://cdn.statically.io/gh/wiendhy/file/6565307c/main2.js")

,$.cachedScript("https://timeago.yarp.com/jquery.timeago.js"), $.Deferred(function (e) {
    $(e.resolve)
})).done(function () {
    loadCSS("https://cdn.statically.io/gh/wiendhy/file/42439961/style.css");
    $("time.published").timeago();
$('pre > code').each(function(){
$(this).prepend('<div class="copy-code-wrap" ><div class="copy-code"></div></div>');
$(this).on('click', function(e) {
        var selector = $(this).closest('code');
        $(selector).selectText();
        e.preventDefault();
        alert("Successfully copied to clipboard")
    });
});
}).fail(function (e, o, c) {
    alert("Error Occured Whils loading Files")
})
function generate(a,b,c,d){window.open(c)}
}
window.addEventListener('scroll', function(e) {
var selector = $('img');
$.each(selector, function () {
if($(this).isInViewport()){
var attr = $(this).attr("original");
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr("src", $(this).attr("original").replace(/\/s[0-9]+(\-c)?\//g, "/s1600/"));
$(this).removeAttr("original");$(this).addClass("animateImage");
}else{
$(this).attr("src", $(this).attr("src").replace(/\/s[0-9]+(\-c)?\//g, "/s1600/"));
$(this).addClass("animateImage");
}
}
})
});
$("p.comment-content").each(function(){
fix = $(this).html().replace(/(mark|strong|b|i|u|li|strike|code|pre)\{(.*?)\}/gm, "<$1>$2</$1>");
$(this).html(fix);
});

$(document).ready(function(){
  $('.comments-content a').each(function(){
    var $this = $(this);
    if($this.html().match(/Delete/g)){
    $this.html('<i class="fas fa-trash-alt"></i>');
$this.attr('title', 'Delete Comment')
    }else if($this.html().match(/Reply/g)){
      $this.html('<i class="fas fa-reply"></i>');
$this.attr('title', 'Reply to this Comment')
    }
  });
});

$(document).one('scroll', function(){
   main();
});
//]]>
    </script>
</b:if>

After that click the Save Theme button.

How to write Syntax Highlighter in Blog posts

After installing the required code, next to how it is writing in the post. Create a new post in your buddy blog, then to write it down add this code in the HTML tab (not compose)

<pre><code>--PASTE THE CODE HERE--</code></pre>