Koki's personal blog

Koki's personal blog

Another fine, responsive site template by HTML5 UP.

Hugoブログのコードブロックにタイトルを追加する方法

Hugoで作成したブログのコードブロックにタイトルを追加する方法を説明します。

Koki

1 分で読めます

この記事では、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!!!");
```

以上の設定で、コードブロックへタイトルを表示することができます。 簡単ですね!上記のコードを考えた方に感謝です。

参考にさせていただいたページ

最近の投稿

続きを見る

カテゴリー

本サイトについて