How to add an stylish code box on Blogger

I am sharing a post about how to install syntax highlighter on blogger but on the post comment section someone comment on the post how can I change the code box design because the default code box design is not so good.

So in this article, I will discuss How you can add and stylish code box on the blogger. You can see the demo of this code box by click on the demo button.

DEMO

Table Of Contents

1. Feature of this code box
2. How to add the code box
3. How to add this box on the post

Feature of this code box

1. So much stylish
2. Look like macOS tab
3. Code name support
4. Own customization support

So this the main highlighted featured of this code box. You can change the color of this code box by own just need to change the HTML color code and add something new by your self.

How to add the code box

So let's talk about how to add this stylish code box on your blogger blog. Now open your blogger dashboard and go to theme edit HTML and search for </style> tag now add the below code after </style> tag.

/* Pre Code */
.post-body code.code,span.quot{background:#312b4a;box-shadow:inset 0 1px 4px #2a2542;padding:2px 5px;border-radius:3px;color:#fff;font-size:15px;white-space:normal;letter-spacing:-0.3px}.post-body code.code1,.post-body code.code2{background:#242038;border-left:4px solid #fda80c;padding:8px 10px;margin:20px auto;display:block;overflow:auto;border-radius:2px;white-space:nowrap;font-size:12px;line-height:1.5em;color:#dada8c}.post-body code.code2{border-left:0;border-radius:4px}.post-body code ul li{border:none;padding:2px 0}.post-body code ul{padding:0 20px}pre{box-shadow:0 -20px 20px -20px rgba(0,0,0,.054);margin:0 auto;position:relative;font-family:'source code pro',menlo,consolas,monaco,monospace;background:#0a3d62;color:rgba(255,255,255,.6);overflow:hidden;padding:50px 15px 15px 15px;border-radius:4px;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-ms-word-break:normal;word-break:normal;word-break:normal;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre code{font-size:12px;box-shadow:none;padding:0;background:0;white-space:pre;display:block;overflow-x:scroll;max-width:100%;min-height:60px;max-height:280px;line-height:1.5em}pre::before,pre::after,pre code::before,pre code::after{position:absolute}pre::after,pre code::before,pre code::after{content:'';width:20px;height:20px;border-radius:50%;top:10px}pre::before{content:attr(title);font-weight:500;border-radius:4px 4px 0 0;text-align:left;color:#fff;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' fill='%23fff'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:20px 20px;background-color:rgba(0,0,0,0.15);top:0;left:0;width:100%;height:40px;line-height:40px;padding:0 38px;box-sizing:border-box}pre::after{background-color:#ea756f;right:10px}code::before{background-color:#b38af5;right:35px}code::after{background-color:#81ce8e;right:60px}
[rel="code"]{white-space:pre;overflow-x:scroll;display:block;line-height:1.8;margin:10px 0;background:#1d1b2b;border-radius:4px;padding:10px}[rel="code"]::-webkit-scrollbar,[rel="code"]:hover::-webkit-scrollbar{height:0}mark{background-color:#ff4757;border-radius:2px;padding:0 4px;color:#fff}.spoiler-amp{margin:10px 0}.spoiler-amp h4.spoiler-button{color:#222;font-size:14px;font-weight:500;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}amp-accordion section{margin:10px 0}.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}

How to add this box on the post

So fast go to https://www.sayemtutorial.com/p/pars.html this link and you will see a tool you can use this tool for parse your code fast paste your code on the text box and click on parse and your code parsing is done now copy the parsing code. Now go to the post HTML view and add your parse code like this.

<pre><code>Your Code Here</code></pre>

Now add your parsing code on your code here text. You after adding your code box look like this below image.

Now how can you add your code name on the codepan icon? It's very easy to add your code name just add title="Code name here" on the pre-code look on below code you will understand

<pre title="HTML"><code>Your Code Here</code></pre>

Now change the HTML text with your code name and change the Your Code Here with your parsing code.

I hope you enjoy this post post. Thanks for reading us.