Add code style and copy code block to Hugo

#hugo

Title: Add code style and copy code block to Hugo

Created: 17 Mar 2023 Modified: 17 Mar 2023

Description: Elevate your IT technical blog with code rendering styles and copy functions in Hugo. Our step-by-step guide shows you how to enhance your website's user experience by allowing readers to easily view and copy code snippets. Learn how to implement this useful feature with our expert tips and examples.

Below includes how to add code style and copy code block to clipboard. [Ref. Link]

Add code style

[Catalog]

Configure the config.toml

[markup]
[markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = false
    noHl = false
    style = 'monokailight'
    tabWidth = 4

find suitable code style and place it under the static or assets folder.

hugo gen chromastyles --style monokailight > static/css/code-style.css

add the css to main page.

<html>
    <head>
        .
        <link href="/css/code-style.css" rel="stylesheet">
        .
    </head>
    <body>
        .
        .
        .
    </body>
</html>

Add copy code block button

create a javascript file under static/js/button.js

function createCopyButton(highlightDiv) {
const button = document.createElement("button");
button.className = "copy-code-button";
button.type = "button";
button.innerText = "Copy";
button.addEventListener("click", () => copyCodeToClipboard(button, highlightDiv));
highlightDiv.insertBefore(button, highlightDiv.firstChild);

const wrapper = document.createElement("div");
wrapper.className = "highlight-wrapper";
highlightDiv.parentNode.insertBefore(wrapper, highlightDiv);
wrapper.appendChild(highlightDiv);
}

document.querySelectorAll(".highlight").forEach((highlightDiv) => createCopyButton(highlightDiv));

Add style sheet to static/css/copy-button.css

.highlight-wrapper {
display: block;
}

/* Start: Turn off individual column border, margin, and padding when line numbers are showing */
.highlight-wrapper .lntd pre {
    padding: 0;
}

.chroma .lntd pre {
    border: 0px solid #ccc;
}

.chroma .lntd:first-child {
padding: 7px 7px 7px 10px;
margin: 0;
}

.chroma .lntd:last-child {
padding: 7px 10px 7px 7px;
margin: 0;
}
/* End: Turn off individual column border, margin, and padding when line numbers are showing */

.highlight {
position: relative;
z-index: 0;
padding: 0;
margin:40px 0 10px 0;
border-radius: 4px;
}

.highlight > .chroma {
position: static;
z-index: 1;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 10px;
}

.copy-code-button {
position: absolute;
z-index: 2;
right: 0;
top: -29px;
font-size: 13px;
font-weight: 700;
line-height: 14px;
letter-spacing: 0.5px;
width: 65px;
color: #ffffff;
background-color: #000000;
border: 1.25px solid #232326;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
white-space: nowrap;
padding: 6px 6px 7px 6px;
margin: 0 0 0 1px;
cursor: pointer;
opacity: 0.6;
}

.copy-code-button:hover,
.copy-code-button:focus,
.copy-code-button:active,
.copy-code-button:active:hover {
color: #222225;
background-color: #b3b3b3;
opacity: 0.8;
}

.copyable-text-area {
position: absolute;
height: 0;
z-index: -1;
opacity: .01;
}
.chroma [data-lang]:before {
position: absolute;
z-index: 0;
top: -29px;
left: 0;
content: attr(data-lang);
font-size: 13px;
font-weight: 700;
color: white;
background-color: black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 6px 7px 6px;
line-height: 14px;
opacity: 0.6;
position: absolute;
letter-spacing: 0.5px;
border: 1.25px solid #232326;
margin: 0 0 0 1px;
}

add the js and css to main page.

<html>
    <head>
        .
        <link href="/css/copy-button.css" rel="stylesheet">
        .
    </head>
    <body>
        .
        .
        <script src="/js/button.js"></script>
    </body>
</html>