夜勤明けで死にそうなMotoShinです。 頭がくらくらするので今日は簡単に書けそうな話題でいこうと思います。

数式を出していくぅ！

数式を出す準備

昨日出てきたblogプロジェクトのtreeコマンド結果です。

.
├── archetypes
├── config.toml
├── content
│   └── posts
├── data
├── deploy.sh
├── layouts
│   ├── _default
│   │   └── baseof.html
│   └── partials
│       └── math.html
├── public
├── resources
├── static
│   └── avatar.jpg
└── themes
    └── m10c

./layouts/partials/math.htmlというファイルを作成します。 ./layouts/partials/math.htmlの中身は下記のようになります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}]
        });
    });
</script>

これはKaTeXのAuto-renderExtensionを参考にして作成しました。 ./layouts/partials/math.htmlを作成したあとは./layouts/_default/baseof.htmlのbodyタグの中のmainタグの中に以下を追記します。

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

これで準備は完了です！

いざ数式を出す！

Hugoのnewコマンドでmarkdownファイルを生成するとyamlフロントマスターというのがデフォルトで書かれているファイルが生成されます。 こんなやつ。

---
title: "数式の出力の仕方を解説していく"
date: 2020-10-08T20:16:46+09:00
draft: true
tags: ["Hugo", "Diary", "KaTeX"]
math: true
---

これにも書いてありますが、math: trueと書いておくと数式モードがオンにります。 あとは記事の中で下記のように書いておけば数式が綺麗に表示されます。

$$
f(x)= \sum_{k=0}^{\infty} \frac{ f^{(k)}(x_0)}{n!} \left( x-x_0 \right)^k
$$

文中の場合は$1つで囲みます。

文中の数式 $y = f(x)$ のテスト。

そうするとこんな感じ

$$ f(x)= \sum_{k=0}^{\infty} \frac{ f^{(k)}(x_0)}{n!} \left( x-x_0 \right)^k $$

文中の数式 $y = f(x)$ のテスト。

以上！

今日の一言

Netflixの水曜どうでしょう最新シーズン面白かった。

参考