Subscribe Us

#

How to Make a Syntax Highlighter With the Copy Button

Study Kilat Agustus 05, 2022

 


Syntax Highlighter is a text editing feature that is able to display a source code in various colors, so that the display becomes more attractive and pleasing to the eye.

This feature is useful for distinguishing between plain text and mark up codes such as HTML, CSS or JavaScript. If you often write programs in a code editor tool, you will definitely be familiar with a view like this. 

Usually, a syntax highlighter is already available in every blog template. However, in this tutorial, I will review how to create a syntax highlighter with a copy button feature. For that, see the complete guide below


How to Make a Syntax Highlighter with the Copy Button

To make the syntax highlighter look, use highlighter.js so that the code becomes colorful and the copy button uses Clipboard.js.

If previously there was a .post-body pre CSS code, then first delete the css code, then replace it with the CSS below:

  • Login to blogger dashboard
  • Select the Theme menu -> Edit HTML
  • Add the following CSS code before or just above ]]></b:skin> or </style>
 
/* Syntax Highlighter UI Design by Rehatly.my.id */
.cBox{position:relative;background:#fff;width:100%;border-radius:9px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cBox pre::before, .cBox pre::after{content:''}

/* Toast Notification Setting */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}

/* Dark Mode Setting */
.drK .cBox{background:#2d2d30}
.drK .cBox pre{background:#252526;color:#fffdfc}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

  • Put the following code after <body> or body
<!--[ Toast Notification ]-->
<div id='toastNotif' class='tNtf'></div>
 
And the last step put the javascript below before or just above </body>

<script>
/* Copy Button Script */
function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Script  Berhasil Disalin!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)}
</script>
  •  Click Save
  • Done
 

How to Use Syntax Highlighter in Blog Posts

At this stage, the CSS and Javascript steps have been completed. Well, then to use the syntax highlighter in every blog post, use the code below.

<!--[ Script Box 1 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>HTML</span>
    <!--[ Copy Button ]-->
    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code1'>
    <pre>Taruh Kode HTML di sini...</pre>
  </div>
</div>

<!--[ Script Box 2 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>CSS</span>
    <!--[ Copy Button ]-->
    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code2'>
    <pre>Taruh Kode CSS di sini...</pre>
  </div>
</div>

<!--[ Script Box 3 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>JS</span>
    <!--[ Copy Button ]-->
    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code3'>
    <pre>Taruh Kode Javascript di sini...</pre>
  </div>
</div>
 
Tags

Posting Komentar

0 Komentar