Org Modeとox-hugoでもコードブロックにファイル名を表示したい

このブログはEmacsの Org Mode で原稿を書き、 ox-hugo を用いてmarkdownに変換、 hugo で静的HTMLに変換という形で生成しています。

ところで、qiitaやzennではコードブロックを書くときに、以下のようなフォーマットで書くことでファイル名を表記することができます。

```emacs-lisp:hello.el
(defun hello-world ()
  (message "Hello, world!"))
```

参考:

これに近い形で、Hugoでも以下のようにコードブロックに指定したファイル名を表示したく、やってみました。

(defun hello-world ()
  (message "Hello, world!"))

やったこと

以下のようにコードブロックの前に、 #+attr_html: :caption キャプション を記載することで、生成されるHTMLに caption 属性を追加することができました。

#+attr_html: :caption hello.el
#+begin_src emacs-lisp
  (defun hello-world ()
    (message "Hello, world!"))
#+end_src

<div class="highlight" caption="hello.el">
  <pre tabindex="0" class="chroma">
    <code class="language-emacs-lisp" data-lang="emacs-lisp">
      (コード部分省略)
    </code>
  </pre>
</div>

あとは適当にCSSを設定してあげれば、caption属性がある場合に表示させられます。私は、以下のようなSCSSを作りました。今後、調整していこうと思います。

// コードスニペット
.highlight {
  position: relative;

  &[caption]::before {
    content: attr(caption);
    position: absolute;
    top: 0;
    left: 1rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0 0 4px 4px;
    font-size: 0.9rem;
  }

  &[caption] > pre {
    padding-top: 2rem;
  }
}

検討したこと

冒頭のコロンでファイル名を付与できると、移行性を考えると良さそうでしたが、これはマークダウンの派生記法として一般的なものではないようでした。そもそも、ファイル名をメタデータとして持たせるデファクトなマークダウンの記法が無いようで、どのようなパターンでもox-hugoでは出力できませんでした。

ox-hugoでは、以下のような内容であればコードブロックに対して追加のhtmlを出力することができます。しかし、いずれも取り回しがしずらそうなので、他のやりかたを調べてみて、冒頭の属性を追加する方法で実現できることに気付きました。

#+name: を利用するパターン

#+name: test.el
#+begin_src emacs-lisp
  (prog1
      (message "Hello, world!"))
#+end_src

<a id="code-snippet--test.el"></a>
```emacs-lisp
(prog1
    (message "Hello, world!"))
```

<p>
  <a id="code-snippet--test.el"></a>
</p>
<div class="highlight">
  <pre tabindex="0" class="chroma">
    <code class="language-emacs-lisp" data-lang="emacs-lisp">(略)</code>
  </pre>
</div>

#+caption: を利用するパターン

#+caption: test.el
#+begin_src emacs-lisp
  (prog1
      (message "Hello, world!"))
#+end_src

```emacs-lisp
(prog1
      (message "Hello, world!"))
```
<div class="src-block-caption">
  <span class="src-block-number">Code Snippet 1:</span>
  test.el
</div>

<div class="highlight">
  <pre tabindex="0" class="chroma">
    <code class="language-emacs-lisp" data-lang="emacs-lisp">(略)</code>
  </pre>
</div>
<div class="src-block-caption">
  <span class="src-block-number">Code Snippet 1:</span>
  test.el
</div>

まとめ

今回は、Org Modeでもコードブロックをわかりやすく表記する方法を検討したので、そのやり方を紹介しました。

もうちょっと、おしゃれに解決する方法もありそうなので、良いやりかたがあれば教えていただけると嬉しいです。

やったこと

検討したこと

#+name: を利用するパターン

#+caption: を利用するパターン

まとめ

Share

関連記事