<style>
    /* formatting for the code-badge */
</style>
<div id="CodeBadgeTemplate" style="display:none">
    <div class="code-badge">
        <div class="code-badge-language">{{language}}</div>
        <div title="Copy to clipboard">
            <i class="{{copyIconClass}} code-badge-copy-icon"></i>
        </div>
     </div>
</div>

The template includes a couple of replacable placeholders {{language}} and {{copyIconClass}} that are replaced when the template is rendered.

This template is internally provided in the code, but it can also be overridden simply by placing a #CodeBadgeTemplate element into the page - if it exists, that and existing styling will be used instead of the embedded template. This allows for any HTML/CSS customization you want to apply.

The code first checks to see if a template has been provided and if not reads the static template:

if (!document.querySelector(options.templateSelector)) {
    var node = document.createElement("div");
    node.innerHTML = getTemplate();   // internal template
    var style = node.querySelector("style");
    var template = node.querySelector(options.templateSelector);
    document.body.appendChild(style);
    document.body.appendChild(template);
}

Alternately the styling can be overridden more simply by applying style overrides:

<style>
    .code-badge {
        padding: 8px !important;
        background: #ccc !important;
        color: black !important;
    }
    .code-badge-copy-icon {
        font-size: 1.3em !important;
    }
</style>

Processing Code Blocks

The core of code runs through the same code snippets that highlightJs should process which is the pre>code.hljs selector. It then inserts the new element <div class="code-badge"> element after the <pre> tag.

The key bits are simple enough:

var $codes = document.querySelectorAll("pre>code.hljs");        
for (var index = 0; index < $codes.length; index++) {
    var el = $codes[index];
    if (el.querySelector(".code-badge"))
        continue; // already exists
               
    var lang = "";

    for (var i = 0; i < el.classList.length; i++) {
        // class="hljs language-csharp"
        if (el.classList[i].substr(0, 9) === 'language-') {
            lang = el.classList[i].replace('language-', '');
            break;
        }
        // class="kotlin hljs"   (auto detected)
        if (!lang) {
            for (var j = 0; j < el.classList.length; j++) {
                if (el.classList[j] == 'hljs')
                    continue;
                lang = el.classList[j];
                break;
            }
        }
    }

    if (lang)
        lang = lang.toLowerCase();
    else
        lang = "text";

    var html = hudText.replace("{{language}}", lang)
                      .replace("{{copyIconClass}}",options.copyIconClass)
                      .trim();

    // insert the Hud panel
    var $newHud = document.createElement("div");
    $newHud.innerHTML = html;
    $newHud = $newHud.querySelector(".code-badge");        
    
    if(options.copyIconContent)
      $newHud.querySelector(".code-badge-copy-icon").innerText = options.copyIconContent;

    // make <pre> tag position:relative so positioning keeps pinned right
    // even with scroll bar scrolled
    var pre = el.parentElement;
    pre.style.position = "relative";

    // insert into the <pre> tag as first element
    el.insertBefore($newHud, el.firstChild);
}

The code loops through all snippets, and if it needs to add a badge, reads the template, copies it, replaces the language and icon and then embeds the newly created element into the document before the main <code> element.

Here's what the HTML for a code snippet looks like after this process has completed:

<pre class="code-badge-pre">
    <div class="code-badge">
        <div class="code-badge-language">javascript</div>
        <div title="Copy to clipboard">
            <i class="code-badge-copy-icon fa-copy fa"></i>
        </div>
    </div>  
     
    <code class="hljs language-js javascript"><span class="hljs-keyword">let</span> x = <span class="hljs-number">1</span>;
    </code>
</pre>

The <div class="code-badge"> element has been injected as has the class="code-badge-pre" in the <pre> tag.

Relative Content

The <pre class="code-badge-pre"> in the snippet above is injected into the <pre> tag when the page is processed. This is unfortunately required because the <pre> tag on its own is not uniquely identifiable as a hljs code snippet - there could be other non hljs <pre> tags on the page and we need to explicitly set position: relative in order to be able to render the code badge reliable in the right corner of the code snippet.

Initially, I didn't use the <pre> container for the position: relative as I was trying to embed the code-badge into the inner <code class="hlks"> element. While this worked on the surface, it had a nasty side-effect with scrolled code blocks. For scrolled code content the badge was not sticking to the right side of the code block:

Notice how the code-badge in the middle doesn't stay pinned to the right of the code snippet 'container'.

This is a funky HTML behavior where the absolute positions are not updated based on scroll position for <pre> blocks, keeping the right: 0px location at it's original content location rather than pinning to the end of the content. Ugly. I would argue this is a browser bug, as absolute and 0px right certainly should never end up in the middle of the page regardless of scroll position. But alas, Chromium, FireFox and Edge all display the same (funky) behavior, so I guess it must follow some part of the spec that makes sense of this non-sensical behavior.

Anyway, the problem is that postion: absolute and right: 0 on scrolled content does not work if you want the content pinned to the right of the container. The solution is to move the position:relative up to the <pre> container which is a fixed and non-scrolling container into which the scrolling <code> tag is rendered.

In CSS this looks like this:

.code-badge-pre {
    position: relative; 
}
.code-badge {
    ...
    position: absolute;
    right: 0;
    top: 0;
}

That works, but there's still one more problem: How to select the <pre> tag as it doesn't have any identifiable information that identifies it as a hljs code-block. So the solution is to inject a class explicit at render time when the badge is injected as <pre class="code-badge-pre">:

var el = $codes[index];
...

// insert the Hud panel
var $newHud = document.createElement("div");
$newHud.innerHTML = html;  // assign template
$newHud = $newHud.querySelector(".code-badge"); 

// make <pre> tag position:relative so positioning keeps pinned right
// even with scroll bar scrolled
var pre = el.parentElement;            
pre.classList.add("code-badge-pre");
pre.insertBefore($newHud, el);

It's ugly, but it works.

Copying Code to the Clipboard

Once the the code badges have been created for all code blocks, we still need to handle the content click events. Since there may be quite a few code snippets on a large page, the clicks are consolidated via a single click handler on the content container (or body if not provided) which checks for specific instances of click targets against a .code-badge-copy-icon. This provides behavior similar to $el.on() 'late' event binding in jQuery:

var content = document.querySelector(options.contentSelector);

// single copy click handler
content.addEventListener("click",
   function (e) {                               
       var clicked = e.srcElement;
       if (clicked.classList.contains("code-badge-copy-icon")) {
           e.preventDefault();
           e.cancelBubble = true;
           copyCodeToClipboard(e);
       }
       return false;
   });

For the actual clipboard copying, I use a fairly generic routine. Since you can't directly copy text to the clipboard a workaround using an intermediary textarea and a text selection is required:

function copyCodeToClipboard(e) {
    // walk back up to <pre> tag
    var $origCode = e.srcElement.parentElement.parentElement.parentElement;

    // select the <code> tag and grab contained code as text
    var $code = $origCode.querySelector("pre>code");
    var text = $code.textContent || $code.innerText;
    
    // Create a textblock and assign the text and add to document
    var el = document.createElement('textarea');
    el.value = text.trim();
    document.body.appendChild(el);
    el.style.display = "block";

    // select the entire textblock
    if (window.document.documentMode)
        el.setSelectionRange(0, el.value.length);
    else
        el.select();
    
    // copy to clipboard
    document.execCommand('copy');
    
    // clean up element
    document.body.removeChild(el);
    
    // show the check icon (copied) briefly
    swapIcons($origCode);     
}

The code retrieves the content of the code block, creates a new TextArea node, copies the text into it, selects the text of the textarea and then uses the document.execCommand("copy") to copy the selected text to the clipboard. The node is then deleted. This convoluted approach makes it possible to copy aribtrary text to the clipboard as there's no explicit API to copy text directly.

innerText vs. textContent

When I originally created this component I had been using the codeElement.innerText to retrieve the text of the code block. Although that worked fine for Chromium and FireFox browsers, Internet Explorer 11 and 10 would return text with all the linebreaks and some spaces stripped.

After a bit of experimenting I realized that .innerText is probably not the right property to use, but it's much cleaner to use .textContent instead. For both IE and Chromium, .textContent returns the raw content while .innerText performs some browser depedent fix up on the string text. If you need to retrieve text that includes line breaks and significant white space make sure you use .textContent instead of .innerHtml or better yet using something like this:

// back up to the `<pre>` tag
var $origCode = e.srcElement.parentElement.parentElement.parentElement;

// Get Code Text
var $code = $origCode.querySelector("pre>code");
var text = $code.textContent || $code.innerText;

At Work: Using This Component

As mentioned I have a lot of places where I use code blocks with rendered Markdown and I use this component now in all of them. The code is portable and works with minimal additional code beyond what's already required in order for highlightJs to work. It's literally a single line (or a few more if you explicitly set options) plus the script tag to get this hooked in.

This seems like a minor feature for code snippet rendering and when a user request came in for this into Markdown Monster over a year ago I kind of dismissed as "can live without that". But when I sat down to actually add it some time ago to my blog, I all of a sudden found myself using the copy code button a lot. It's one of those features you don't know you need until you use it a few times on a largish code block - it's a lot easier to press on a single button than scroll and select two pages of code.

So yeah, it was worth the effort.

As is often the case for me, it's a very specialized type of component, but if you're using highlightJs you might find this useful as a ready-to-go addin. If you're using something else for code highlighting it probably wouldn't be hard to adjust the badge injection code to work with an alternate syntax highlighter either. Enjoy...

this post created and published with the Markdown Monster Editor

Other Posts you might also like

• Using plUpload to upload Files with ASP.NET
• Client Templating with jQuery
• Getting JavaScript Properties for Object Maps by Index or Name
• JavaScript JSON Date Parsing and real Dates