Hugo：コードブロックに SMILES を指定するだけで化学構造を表示する

Hugo の Markdown Render Hooks の機能を利用して、コードブロックに分子の SMILES を指定すると、 rdkit.js の機能を使って化学構造を表示できるようにします。

方法

`render-codeblock.html`を作成

layouts/_default/_markupにrender-codeblock.htmlというファイルを作り、次のように記述します。

render-codeblock.html
{{ if .Type | eq "smiles" }}
  {{ $rand := delimit (seq 9 | shuffle) "" }}
  <div class="chemviewer" id="id-{{ $rand }}"></div>
  <script>
    var data = "{{ .Inner }}";
    initRDKitModule().then(function (RDKit) {
      var mol = RDKit.get_mol(data);
      var svg = mol.get_svg();
      document.getElementById('id-{{ $rand }}').innerHTML = svg;
    });
  </script>
{{ else }}
  <section class="codeblock">
    {{ highlight (.Inner | safeHTML) .Type .Options }}
  </section>
{{ end }}

`<head>`に追記

ヘッダーの部分に、次のように追記します。

head.html
<script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>

`style.css`に追記

スタイルシートにも、次のように追記します。

style.css
.chemviewer {
  text-align: center;
}
.chemviewer svg {
  padding: 0.5rem;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  border-radius: 5px;
}

結果

input: Markdown

Markdown のコードブロック記法の中に、SMILES 形式で分子を指定します。

```smiles
CN1C=NC2=C1C(=O)N(C(=O)N2C)C
```

output: 化学構造

rdkit.js の機能で、次のように、分子の化学構造が表示されます。

output: HTML

このとき、HTML としては、次のようなコードが出力されます。

<div class="chemviewer" id='id-837956142'></div>
<script>
  var data = "CN1C=NC2=C1C(=O)N(C(=O)N2C)C";
  initRDKitModule().then(function (RDKit) {
    var mol = RDKit.get_mol(data);
    var svg = mol.get_svg();
    document.getElementById('id-837956142').innerHTML = svg;
  });
</script>

注意

化学構造の描画に用いている rdkit.js は、ロード時に 5 MB 程度のファイル（WebAssembly 形式の実行ファイル）をダウンロードします。
一度キャッシュされてしまえばロード時間は気になりませんが、思っていたよりもサイズが大きかったので、もしかすると、使いどころには注意が必要かも。

hugo

Posted : 24.05.06