Home Blogger Tutorial

Create Double Click to Copy on the Pre Syntax Highlighter Tag

ANDD
ANDD
Updated: • 0 • min read
Table of Contents
Create Double Click to Copy on the Pre Syntax Highlighter Tag

For this tutorial, the JavaScript I used is from fineshopdesign.com and the CSS customization is from median UI theme.

Make Double Click to Copy Code

1. Save this CSS code, usually above ]]></b:skin>

/* Copy Code*/
.copyCode 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){.copyCode 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}}
.darkMode .copyCode span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

2. Save the code below <body>

<div class='copyCode' id='cpCode'/>

3. Save this JavaScript above </body>

<b:if cond="data:view.isPost">
  <script>/*<![CDATA[*/ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>
  </b:if>

4. Up to this point the code can be Double Clicked.

CSS Customization

If you want the text to appear on hover like this blog, add this CSS. (In order not to clash with CSS,  delete the CSS related to the code and pre on the template.

/* Font: Source code, Fira Mono(Latin) by Google */
@font-face {font-family:'Fira Mono'; font-style:normal;font-weight:400;font-display:swap; src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2';), url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  
/* Syntax */
pre{background:#f6f6f6;color:#2f3337; direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:'Fira Mono', Consolas,Monaco,Lucida Console;display:block;font-size:13px;border-radius:3px;padding:35px 20px 20px; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} 
  code{display:inline;padding:5px;font-size:13px;border-radius:3px;line-height:inherit;color:#2f3337;background:#f2f3f5;font-family:';Fira Mono', Consolas,Monaco,Lucida Console;}
  pre code{background:none;padding:0;display:block;padding:0.5em;overflow-x:auto}
  pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:#656e77;font-size:10px;padding:0 10px;z-index:2;line-height:30px}
  pre.html::before{content:'.html'}
  pre.css::before{content:'.css'}
  pre.js::before{content:'.js'}
  pre.xml::before{content:'.xml';}
  pre:hover::before{content:'Double click to copy | </>'}
  pre.html:hover::before{content:'Double click to copy | .html'}
  pre.css:hover::before{content:'Double click to copy | .css'}
  pre.js:hover::before{content:'Double click to copy | .js'}
  pre.xml:hover::before{content:'Double click to copy | .xml'}

Code Writing Format

To format to writing to match the CSS above, the format is like this.

<pre><code> ... </code></pre>

Add class, pre to match the code. Examples of <pre class="html">. Available ones are html, css, xml and js.

Manual Syntax Highlighter

If you want to add coloring to the code, add this CSS.

/* HLJS */
  .hljs-comment, .hljs-code, .hljs-meta, pre i.gray{color:#656e77}
  .hljs-name, .hljs-title, .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class, .hljs-selector-tag, .hljs-literal, pre i.red{color:#b75501} 
  .hljs-keyword, .hljs-string, .hljs-type, .hljs-section, .hljs-quote, .hljs-built_in, .hljs-builtin-name, pre i.blue{color:#015692} 
  .hljs-attribute{} .hljs-params, pre i.green{color:#54790d } 
  .hljs-number, .hljs-symbol{color:#f15a5a } 
  .hljs-regexp, .hljs-link{color:#72621d } 
  .hljs-deletion{background-color:#fef5fa;color:#e51661} 
  .hljs-addition{background-color:#e8f0fe;color:#272eb5} .hljs-strong{font-weight:bold}
  .hljs-code, .hljs-emphasis{font-style:italic}

Use parse tool to parse the code.

ANDD
ANDD Daily workers

Post a Comment