This article explains how to add a title to code block on Hugo blog.

The following lists are the table of contents about this article.

• Target audience
• Environment
• Preconditions
• Add a title to code block
  • Add JavaScript code
  • Add CSS code
  • How to set a title
• Reference articles

Target audience

• Those who want to add a title to code block on Hugo blog.

Environment

• Hugo 0.57.2
• Hugo-extended 0.58.2

Preconditions

• Installed Hugo and Hugo-extended

Add a title to code block

Add JavaScript code

Add the following code to static/js/add-on.js.
I use IIFE (Immediately Invoked Function Expression) because I want to narrow the scope of a variable.

(function addTitleToCodeBlock() {
  let list = document.body.getElementsByClassName("highlight");

  for (i = 0; i <= list.length - 1; i++) {
    let code = list[i].firstElementChild.firstElementChild;
    let codeName = code ? code.className.split(":")[1] : null;

    if (codeName) {
      let div = document.createElement("div");
      div.textContent = codeName;
      div.classList.add("code-name");
      code.parentNode.insertBefore(div, code);
    }
  }
}());

Add CSS code

Add the following code to static/css/add-on.css.

pre.chroma code {  
  margin-top: -28px;
  padding-top: 40px;
  padding-bottom: 12px;
}

.code-name {
  display: inline-block;
  position: relative;
  padding: 4px 8px;
  background-color: #E7E9EB;
  color: #485A60;
  font-size: 13px;
  font-weight: 400;
}

How to set a title

When you use code block, add “:[title]” to after language name.
The following thing is example.

```javascript:test.js
console.log("Have a nice blog life!!!");
```

Reference articles

HugoのコードブロックにQiitaのようなTitleをつける | AABrain

xxxxxxxxxx