Hugoブログのコードブロックにタイトルを追加する方法
Hugoで作成したブログのコードブロックにタイトルを追加する方法を説明します。
この記事では、Hugoで作成したブログのコードブロックにタイトルを追加する方法を説明します。
この記事の内容です。
対象読者
- Hugoで作成したブログのコードブロックにタイトルを追加したい方
環境
- Hugo 0.57.2
- Hugo-extended 0.58.2
前提条件
- HugoおよびHugo-entendedインストール済み
コードブロックへタイトルを追加
JavaScriptのコードを追加
下記のコードをstatic/js/add-on.jsへ追加します。
今回、即時関数を使用しているのは、今後機能を追加することを考えると変数のスコープ範囲を広げたくなかったからです。
(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);
}
}
}());
CSSのコードを追加
下記のコードを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;
}
タイトルの設定方法
コードブロックを使用する時、言語名の後ろに”:[title]“を追加します。
下記はサンプルです。
```javascript:test.js
console.log("Have a nice blog life!!!");
```
以上の設定で、コードブロックへタイトルを表示することができます。 簡単ですね!上記のコードを考えた方に感謝です。