Join our telegram channel to keep up to date with all that is new. joining

Table of Content

How to make responsive script box in blog post

 How to make responsive script container in weblog publish Often we discover an editorial that stocks a script or code that does not appearance neat and messy which makes the advent of the publish or weblog itself pleasant.

How to make responsive script box in blog post


Actually, it is very smooth in case you use Syntax Highlighting at the template, Syntax Highlighting will wrap the codes in a container a good way to make it appearance neat and pleasant on our weblog.


Just facts approximately Syntax Highlighting is a textual content editor function this is used for programming languages, scripts, or markup along with HTML. This function presentations textual content withinside the supply code in diverse shades and fonts consistent with classes and terms (supply: wikipedia)


Then a way to follow Syntax Highlighting on our weblog template, here is how:


   


How to Make Script Box in Blogger

Step One



Login to your Blog then go to Theme > Edit HTML > Find this Code </head> or </head><!--<head/>--> with the help of Quik Edit app and paste the following code above the code :



<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>
 
Click save and don't exit first on the HTML edit view


   

Step Two


Then look for the following code in your template </body> or <!--</body>--></body> and copy the code below and paste it above the code:


<script type='text/javascript'> //<![CDATA[ // Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("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>
 
Then save your theme.


Step Three


How to use Syntax Highlighting is by copying the following code below when making a post using HTML Mode



 <pre><code> YOUR CODE HERE </code></pre>  
  
But before that the code that you will display must be parsed first before it will be read by or appear in your post, code that is not parsed first will not appear.

 

       
To parse CSS, Javascript, HTML and other code, you can use the following link:  

     


It's quite easy isn't it, thus the article about how to make script wrapping box in blog post. Please share it on social media if you like this article and thank you for visiting.
 

Rate Article:

Post a Comment