[ PrismJS ] Syntax Highlighter Code Box For Blogger With Copy To Clipboard

In this article, we are going to How To add Double Click to Copy Pre Content to any Blogger / blogspot Website. This will help your visitors to copy <pre> tag contents. They can simply double click on the PrismJS Syntax Highlighter Code Box For Blogger to copy <pre> code contents to clipboard, they no longer need to select the all codes and copy.

(toc) #title=(Table of Content) 

What is <pre> Code?

The <pre> HTML element specifies preformatted code / text that should appear exactly as typed in an HTML document. Code or Text is displayed in a non-proportional font or single-spaced or highlight in a code box.  The white space in this element represents the code / text.

You can easily show Javascript code, HTML Code and CSS code in highlighted form in a box. Which all visitors of your website can easily copy using Double Click Copy To Clipboard Button. It has many benefits.  Because if you want to copy your codes, you have to select and copy all the texts. But if you follow today's tutorial and apply, then Just one click your visitors can copy code from the syntax highlighter code box.

Syntax Highlighter code not only makes your <pre> code clean and beautiful, but also improves its readability for your website visitors.  Blogger has no default option or plugin like wordpress to add syntax highlighting to code. So, when you publish any pre content on the your website. Your visitors can easily read and copy the code box pre contents.

All Bloggers usually share different types of code on their blog posts.  To share your HTML, CSS, Javascript code, use the prismjs syntax highlighter code box with Copy To Clipboard. Code can usually be represented very well with a code box. sometimes, we use separate clear code boxes on our blogger website, but often the user has to select the entire codes from top to bottom to copy all code.

If the code is large again it may cause some problems for the user.  Because using pointers sometimes the mouse pointer becomes unstable.  So the solution is to copy all code box codes in one click.  Later we need to use copy option to further use the code.

The code highlighter supports almost all popular languages like HTML, CSS, JavaScript, PHP, Python, C++, JAVA, PERL, XML, XHTML, and much more codes with color codes. Many Plugins are added this Prism Syntax Highlighter Code Box For Blogger website. 

Features Of Prismjs Syntax Highlighter Code Box

• Copy to Clipboard Button
• Inline color
• Show Language
• Line Highlight
• Dark Mode
• Copy Icon
• Auto Code Minified 

If you want to add stylish pre code for your blogger website then today's post is for you, follow below steps. You can very easily  Prismjs Syntax Highlighter Code Box With Double Click Copy To Clipboard. 

How To Add Syntax Highlighter Code Box With Copy To Clipboard 

If you follow the blew steps you can add PrismJS Syntax Highlighter Code Box For Blogger With Copy To Clipboard Button on your website.So, Lets Start the topic --

First of all, You need to backup your orginal Blogger Templates XML Code. Then, follow the blew all steps.

• Step 1 : Go To Blogger Dashboard > Theme > Now Search Presing CNTR+F on your keyboard, and search  ]]></b:skin> tag. Then, you need to paste before ]]></b:skin> tag, blew CSS code. 

CSS Code : 

        
css
        

            
        
     
/* PrismJS By https://ggtemplates.blogspot.com */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,.2)}
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
span.inline-color-wrapper{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);background-position:center;background-size:110%;display:inline-block;height:1.333ch;width:1.333ch;margin:0 .333ch;box-sizing:border-box;border:1px solid #fff;outline:1px solid rgba(0,0,0,.5);overflow:hidden}span.inline-color{display:block;height:120%;width:120%}

• Step 2 : Now Search </body> tag on your Blogger template. Then paste before </body> tag, blew Javascript Code. 

Javascript Code : 

        
javascript
        

            
        
     

<script src='https://cdn.jsdelivr.net/gh/google-fonts/code-box.js@main/script.js'/>

• Step 3 : Now Save Theme. 

How To Post Syntax Highlighter <pre> Code Box With Copy Button? 

When your post is ready for publish, before you need to add blew  HTML Code for syntax code box. 

• Step 1 : Go To Your Post > Edite> Switch HTML View
• Step 2 : Paste Blew Code Where you add pre code.

</pre> Content For HTML

        
html
        

            
        
     
<pre><code class="language-html">
<!-- Code Here -->
</code></pre>

</pre> Content For CSS

        
html
        

            
        
     
<pre><code class="language-css">
<!-- Code Here -->
</code></pre>

</pre> Content For Javascript

        
html
        

            
        
     
<pre><code class="language-js">
<!-- Code Here -->
</code></pre>

Replace Your HTML, CSS, Javascript Code With <!-- code Here -->(alert-warning)

Your Pre Content Show Look like : 

Tags : 

# Syntax Highlighter Code Box For Blogger 

# PrismJS For Blogger 

# Add Code Box In Blog Post

# Code Box With One Click Copy 

# Pre Code Copy With Double Click To Clipboard