本サイトの使用しているサービスとその記法

長らく放置していたのですが，2022年2月にサイトのレイアウトをリニューアルしました．勉強しているうちに少しサイトに関する知見も増えたので踏み切りました．

そのときに何を使ったのかなども残しておこうかと考えています．

メモがてら自分用みたいなところもありますが，参考になりますと幸いです．

ちなみに，これを機に，stackeditでmarkdownを変換して書くようにしました．

現時点では，markdownで書くにははてなブログかZenn, Qiitaくらいしかないよみたいな感じですが，stackeditを使えばある程度できます．できないのは画像をblogger管理にすることです．

文章を書くのはとても快適です．

使用したテーマ

blogger日本語テンプレート「QooQ」ダウンロードページ: https://qooq.dododori.com/blogger/qooq-download/

変更点

• Font Awesome導入
• MathJax v3導入
• highlight.js導入
• 軽微なcss変更（色etc.）

日本語フォントも綺麗なフォントで素晴らしい…最初からここまで整えるのは難しかった気がするけど，少し知識がついた今これらを活用するとめちゃくちゃテンプレートが素晴らしいことに気づけました．

Font Awesomeの導入

公式サイト

<link href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' rel='stylesheet'/>

highlight.jsの導入

公式サイト

<!-- highlight.js -->
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/github-dark-dimmed.min.css' integrity='sha512-zcatBMvxa7rT7dDklfjauWsfiSFParF+hRfCdf4Zr40/MmA1gkFcBRbop0zMpvYF3FmznYFgcL8wlcuO/GwHoA==' referrerpolicy='no-referrer' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha512-IaaKO80nPNs5j+VLxd42eK/7sYuXQmr+fyywCNA0e+C6gtQnuCXNtORe9xR4LqGPz5U9VpH+ff41wKs/ZmC3iA==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js'/>
<script crossorigin='anonymous' integrity='sha512-9cbJXQZEFDeJ6bnp8pAjk509daVdIpM4rGlOBnt2pljIpr3raGdKtXdpbzs5MjH55RY2wom5HHnHnNNppNKw9w==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/languages/dockerfile.min.js'/>
<script>hljs.highlightAll();</script>
<!-- /highlight.js -->

MathJaxの導入

	<script>
    window.MathJax = {
        chtml: {
        scale: 1
        },
        tex: {
        inlineMath: [
            [&quot;$&quot;,&quot;$&quot;],
            [&quot;\\(&quot;,&quot;\\)&quot;]
        ],
        displayMath: [
            [&quot;$$&quot;,&quot;$$&quot;],
            [&quot;\\[&quot;,&quot;\\]&quot;]
        ],
        autoload: {
            color: [],
            colorv2: [&#39;color&#39;]
        },
        packages: {&#39;[+]&#39;: [&#39;noerrors&#39;]}
        },
        options: {
        ignoreHtmlClass: &#39;tex2jax_ignore&#39;,
        processHtmlClass: &#39;tex2jax_process&#39;,
        // 参考: https://qiita.com/memakura/items/e4d2de379f98ad7be498#%E8%A3%9C%E8%B6%B3-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B33%E3%81%A7%E3%81%AE-renderactions-%E3%81%AE%E6%8C%87%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
        renderActions: {
            /* add a new named action to render %3Cscript type=&quot;math/tex&quot;%3E */
            find_script_mathtex: [10, function (doc) {
            for (const node of document.querySelectorAll(&#39;script[type^=&quot;math/tex&quot;]&#39;)) {
                const display = !!node.type.match(/; *mode=display/);
                const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
                const text = document.createTextNode(&#39;&#39;);
                node.parentNode.replaceChild(text, node);
                math.start = {node: text, delim: &#39;&#39;, n: 0};
                math.end = {node: text, delim: &#39;&#39;, n: 0};
                doc.math.push(math);
            }
            }, &#39;&#39;]
        }
        },
        loader: {
        load: [&#39;[tex]/noerrors&#39;]
        }
    };
    </script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script> -->
    <script id='MathJax-script' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-chtml.min.js'/>

軽微なcssの変更

色の変数を変更して，シェアボタンのアイコンをFont AwesomeのSNSアイコンに設定した．

記法・スタイル

見出し

以下見出しです．h2~h4を使えるようにしています．

以下markdownの記法と併記します．

h2

## h2

h3

### h3

h4

#### h4

h4のスタイルにmarginがないのでcss変えた方がいいのはわかっていますが，上に<br />タグを置くことでその場凌ぎをしています．

本文

markdownでのテスト投稿です．

こんな感じで見分けはつきやすい気がします．

引用

私は、その男の写真を三葉、見たことがある。
人間失格 - 太宰治

> 私は、その男の写真を三葉、見たことがある。
> <cite>[人間失格 - 太宰治](https://www.aozora.gr.jp/cards/000035/files/301_14912.html)</cite>

箇条書き

• 箇条書き1
• 箇条書き2

- 箇条書き1
- 箇条書き2

コードブロック

print('Hello world!')

```python
print('Hello world!')
```

highlight.jsをcdnで使っています．テーマはGithub Dark Dimmedってやつです．Githubのやさしめダークモード色です．
公式のデモページからいろいろ探してみるといいと思います．

というか何もしてないけどコードの横スクロールが設定されてた．素晴らしい．

数式

ディスプレイスタイル

独立した数式で書くとき．$$で囲みます．

$$
\int_0^1 f(x) \mathrm{d}x = \lim_{n \to \infty} \frac{1}{n} \sum_{k=0}^{n-1} f\left(\frac{k}{n}\right)
$$

$$
\int_0^1 f(x) \mathrm{d}x = \lim_{n \to \infty} \frac{1}{n} \sum_{k=0}^{n-1} f\left(\frac{k}{n}\right)
$$

区分求積を$\LaTeX$スタイルで書くときが勢揃い感あってめっちゃ好きなんですよね．（誰かわかる人いません？？）

インラインスタイル

本文中で入れたいとき．$で囲みます．

ここで$n$は自然数とする ($n \in \mathbb{N}$)

ここで$n$は自然数とする ($n \in \mathbb{N}$)

stackeditで書くとき

注意点

VSCodeは選択した後に括弧を入力すると，自動でそれを括弧で囲ってくれるけど，stackeditは普通のテキストエディターと同じようにただただ文字の置き換えが起きてしまうので注意が必要でした．

設定変更点

Publish > Publish to Blogger > file properties

status: draft  
extensions:  
  katex:  
    enabled:  false

自分は上記の設定にしています．

status: draftは，「下書き」bloggerに反映させるためです．（これをしないとすぐ投稿されちゃう）

どうせパーマリンクの設定や画像の埋め込みやプレビューの確認をするのでこの設定にしています．（画像の埋め込みも本当はやりきりたいけどできるのかなぁ）

katexは，デフォルトではstackeditからplainhtmlを出力するときにKaTeX形式にされてしまって，本サイトで導入しているMathJaxと競合し，うまく数式が表示されなくなってしまうので，それを防ぐためです．

これの欠点はstackedit上でのプレビュー表示もできなくなります（笑）

バグでしょうか？（2022年2月10日時点ではその設定を加えてpublishした途端に数式のプレビューができなくなりました．）

改善されると嬉しいですが．期待はしないでTeXclipとかでプレビューしようと思います．