How to add Code Box to Blogspot Site's Article or Post?
If you want to add Code Box in Post / Article of Blogger Site, then this post How to Add Code Box in Blogger post.
.jpg "How to add Code Box to Blogspot Site's") |
| How to add Code Box to Blogspot Site's |
Hello blogger! Welcome all of you to GeeksCodes. If you also want to add Code Box to the Post (Article) of your blog, then read this post carefully and understand without skipping.
How do I add Code Box to Blogspot Site's Article or Post in this post?
Friends, if you have installed any Free Blogger Template Install or Premium Blogger Template installed in your site, then you can easily add Code Box to your Blogspot Site's Article or Post by following the steps mentioned in this post.
Why is it necessary to add Code Box to Blogger Post?
Friends, sometimes what happens is that we have to write a post on some Keyword which is related to Coding like I have written this post, why is it necessary to add Code Box to Blogger Post? (Why is it necessary to add Code Box to Blogger Post?) In this we have to share Html Code, Java Code, JavaScript, etc code in our post, whereas all these codes can be very big. If we put this code directly in our post, then our article will look very bad and our visitor will not even understand. That's why we have kept adding Post Code Box in the post of our blog, you can see below.
So let's know how to add Code Box to Blogspot Site's Article or Post?
How to add Code Box to Blogspot Site's Article or Post? Go step by step.
Step1 :- Copy this code and paste it between <head> and </head> by going to Edit Html from your Blogger Dashboard.
<!--[www.geekscodes.com ]-->
<link href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/atelier-heath-dark.css" rel="stylesheet"></link>
Step.2 :- Now copy this code and paste it between <body> and </body>
<!--[www.geekscodes.com ]-->
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'/><script>hljs.highlightAll();</script>
Step.3 :- Now copy this code and search for any style code between your <head> and </head> and paste it before </head>
&lt;style&gt; &lt;!--[www.geekscodes.com ]--&gt;
/* Highlighter */
.post-body code{padding:1.2em}.hljs{display:block;overflow-y:hidden;overflow-x:hidden;font-size:14px;padding:1.2em;background:#262a2d;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:8px;max-height:350px}.hljs:hover,.hljs:focus{overflow-y:auto;overflow-x:auto}.hljs-name,.hljs-strong{font-weight:500}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-tag{color:#55c8f9}.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#a2e4ff}.hljs-string,.hljs-bullet{color:#b3ffb3}.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#fdfd8e}.hljs-number,.hljs-symbol,.hljs-bullet{color:#fd4f4f}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}.hljs-comment,.hljs-deletion,.hljs-code{color:rgba(255,255,255,.6)}.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}mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#f24a4a;color:#fff}.hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.hljs mark span.hljs-number,.hljs mark span.hljs-comment,.hljs mark span.hljs-symbol,.hljs mark span.hljs-string,.hljs mark span.hljs-attr,.hljs mark span.hljs-keyword,.hljs mark span.hljs-name,.hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}.Night mark .hljs-attr,.Night mark .hljs-string,.Night mark .hljs-bullet{background-color:#2e86de;color:#fff}.hljs mark .hljs-selector-class{color:#fff}&lt;/style&gt;.jpg "How to add Code Box to Blogspot Site's Article or Post") |
| Blog Post |
Note: If you paste the code before </div> or <br /> then no error will be shown.
Note: If there is HTML code then follow the steps shown in the image.
