Lastly, I've you Linux-like code box it's a powerful code box. With specific support of syntax highlighter, it displays the same color as the Linux terminal.
This code box is primarily helpful for the blogger who writes content on Linux.
It comes with a very different feature as a new syntax highlighter and copies to the clipboard button.
how to add a Linux code box in blogger
Before jump into this make sure to back up your theme. Also, Read this How to Backup your Blogger Template.
1. Login into your blogger Dashboard.
2. Then on the left-hand side go to the Theme.
3. On the Customize button, click the Down arrow.
4. Then select the Edit HTML.
5. Now press "Ctrl + F " to search and find <head> tag.
<!-- code provide by wizard point start -->
<link href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' rel='stylesheet' type='text/css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/components/bootstrap@3/js/tooltip.js'></script>
<link rel="stylesheet" href=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<!-- code provide by wizard point end --> 6. After you have found it just past the code below <head> tag.
7. Type and search for "]]></b:skin>" tag.
8. Just above the "]]></b:skin>" add this CSS code.
.codeHeader{position:absolute;text-align:right;top:-5px;right:0}
.copy-text{font-size:14px;cursor:pointer;color:#fff;padding:8px 10px;background:#000;border:1px solid #666;border-radius:100%}
.copy-text:before{font-family:"font awesome 5 free";content:"\f24d";display:inline-block;font-size:13px}
.copy-text:hover{color:#fff;background:#333}
pre{padding-right:15px;position:relative}
pre code{display:block;max-height:400px;font-size:14px;color:black;text-align:left;overflow:auto;border:0;margin:auto;padding:16px;line-height:21px}
.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}
.tooltip.in{opacity:.9;filter:alpha(opacity=90)}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-left .tooltip-arrow{bottom:0;left:5px;border-top-color:#000;border-width:5px 5px 0}
.tooltip.top-right .tooltip-arrow{right:5px;bottom:0;border-top-color:#000;border-width:5px 5px 0}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-right-color:#000;border-width:5px 5px 5px 0}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-left-color:#000;border-width:5px 0 5px 5px}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-left .tooltip-arrow{top:0;left:5px;border-bottom-color:#000;border-width:0 5px 5px}
.tooltip.bottom-right .tooltip-arrow{top:0;right:5px;border-bottom-color:#000;border-width:0 5px 5px}
.hljs{display:block;overflow-x:auto;padding:.5em;background:#000}.hljs,.hljs-subst,.hljs-tag,.hljs-title{color:#aaa}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#f5f}.hljs-code .hljs-selector-class{color:#aaf}.hljs-emphasis,.hljs-stronge,.hljs-type{font-style:italic}.hljs-function,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-symbol{color:#ff5}.hljs-attribute{color:#f55}.hljs-class .hljs-title,.hljs-params,.hljs-variable{color:#88f}.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-tag,.hljs-template-variable,.hljs-type{color:#f5f}.hljs-comment,.hljs-deletion,.hljs-meta{color:#5ff}9. In the last step find the </body> tag.
10. Just above the </body> tag past the code.
<!-- script By https://wizardpoint.blogspot.com end-->
<script>$(function() {
$("pre code").before("<div class='codeHeader'><a class='copy-text' data-clipboard-target='pre code' data-clipboard-action='copy'></a></div>");
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
var clipboard = new ClipboardJS(".copy-text", {
target: function(trigger) {
return trigger.parentNode.nextElementSibling
}
});
function setTooltip(btn, message) {
$(btn).tooltip('hide').attr('data-original-title', message).tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 500);
}
clipboard.on('success', function(e) {
e.clearSelection();
var btn = $(e.trigger);
setTooltip(btn, 'Copied');
hideTooltip(btn);
});
clipboard.on('error', function(e) {
var btn = $(e.trigger);
setTooltip('Failed');
hideTooltip(btn);
});</script>
<!-- script By https://wizardpoint.blogspot.com end-->Now to Implement this code
First, you need to convert your code you want to implement.1. Go to HTML entity encoder/decoder. And convert your code.
2. Now, Go to your post where you want to add Code and just select the "Html view option" and insert the code as mention below.
<pre><code>
Your code goes here..........
</code></pre>Happy coding!
Tags:
Blogger