Hugo：コードブロックに xyz 座標を指定するだけで分子を立体表示する

Hugo の Markdown Render Hooks の機能を利用して、コードブロックに分子の xyz 座標を指定すると、 3Dmol で立体表示できるようにします。

方法

`render-codeblock.html`を作成

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

render-codeblock.html
{{ if .Type | eq "3dmol" }}
  {{ $size := .Attributes.size }}
  {{ $rand := delimit (seq 9 | shuffle) "" }}
  <div class="molviewer" id="id-{{ $rand }}"></div>
  <script>
    var element = document.querySelector('#id-{{ $rand }}');
    var config = { backgroundColor: '#fff' };
    var viewer = $3Dmol.createViewer( element, config );
    var xyzData = "{{ .Inner }}";
    viewer.addModel(xyzData, 'xyz')
    viewer.setStyle({'stick':{}})
    viewer.zoomTo()
    viewer.spin('y', 1)
    viewer.render()
  </script>
{{ else }}
  <section class="codeblock">
    {{ highlight (.Inner | safeHTML) .Type .Options }}
  </section>
{{ end }}

`<head>`に追記

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

head.html
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>

`style.css`に追記

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

style.css
.molviewer {
  width: 350px;
  height: 350px;
  position: relative;
  margin: 1rem auto;
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  border-radius: 5px;
}

結果

input: Markdown

Markdown のコードブロック記法の中に、XMol 形式で分子の xyz 座標を書きます。

```3dmol
6

C     0.6586599    0.0000000    0.0000000
C    -0.6586599    0.0000000    0.0000000
H    -1.2255934   -0.9144085    0.0000000
H    -1.2255934    0.9144085    0.0000000
H     1.2255934    0.9144085    0.0000000
H     1.2255934   -0.9144085    0.0000000
```

output: 3Dmol

3DMol の機能で、次のように、分子の立体構造が表示されます。

output: HTML

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

<div class="molviewer" id="id-254837691"></div>
<script>
    var element = document.querySelector('#id-173654892');
    var config = { backgroundColor: '#fff' };
    var viewer = $3Dmol.createViewer( element, config );
    var xyzData = "6\n\nC     0.6586599    0.0000000    0.0000000\nC    -0.6586599    0.0000000    0.0000000\nH    -1.2255934   -0.9144085    0.0000000\nH    -1.2255934    0.9144085    0.0000000\nH     1.2255934    0.9144085    0.0000000\nH     1.2255934   -0.9144085    0.0000000";
    viewer.addModel(xyzData, 'xyz')
    viewer.setStyle({'stick':{}})
    viewer.zoomTo()
    viewer.spin('y', 1)
    viewer.render()
  </script>

Posted : 24.05.05