-->
Home
blogger

How To Use Syntax Highlighter in Blogger in 2021?

Hi guys! Welcome to Antarnomi Creations. Therefore, in creating these Antarnomi, we created a whole new class called a widget. Yes, it really is. This weblog is used to purchase articles that contain updates and notifications, in addition to articles related to the weblog. Therefore, widgets of this class describe blogger-related widgets. I'll talk about syntax highlighting in the latest blog post. What is the highlighting of this syntax? And what are its benefits? Therefore, all of this is explained in the following elements: That's why I voted live to find out more about this article.

How To Use Syntax Highlighter in Blogger in 2021?




What is Syntax Highlighter?

If you are an internet developer or programmer, you need to understand this syntax highlighting. If you're not sure, use to let you know that your code is highlighted with a specific setting called syntax highlighting. Especially used for blogging. If you run a weblog or website that provides coding, be sure to use it. In case it's difficult to use HTML, CSS, Javascript, etc. code in your blog post. However, if you use this syntax highlighting for your Blogger weblog, you can easily upload these HTML, CSS, and Javascript code to your posts.


Syntax Highlighter In Blogger

So do you already know what syntax highlighting is? Now you know how to add this syntax highlighting to your blogger's post. Therefore, if you want to blog on Blogger, read this article to the end. I've shown you how to perform this syntax highlighting on Blogger in just a few steps. So I told you to step by step.


Syntax highlighting has the following steps:

  • First, you need to log in to the Blogger dashboard.
  • Then click on the theme selection.
  • Now click Edit HTML.
  • Now you can get the following CSS code. Duplicate it and paste it into your tag blogger theme.
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

  • Here's another code below. If you want to copy this too, you need to put it in & </body> Blogger topic day.
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});.document=presvar(forquerySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>


Write Syntax Highlighter

After completing the above steps, you should now find a way to download it for your post. So to include the syntax highlighter in it, you need to click on the HTML by clicking New Post. Remember that you may no longer have this option in Compose. Now you can get any other code below. Copy this code and paste it for your HTML.


<pre><code>Enter Your CSS/HTML/Javascript Code</code></pre>


Your CSS/HTML/Javascript code can be identified in the above code. You can make your code available by removing this sentence.


I hope you understand what in this article I
want to teach you.




Post a Comment