jekyllのシステムを使い，markdownで記事をかけるようにした．

全体的なMarkdownの記法（そもそもの文法）を知りたい方は以下のサイトがおすすめ．

自分は，freshman21というテーマを使用して，これをカスタマイズして使用している．

実際にどのように表示されるのかに関するテスト，および，記法のテストやどのように構築カスタマイズしたかなどについての技術的な部分などを示している．

レイアウトのテスト

タイトル

デフォルトのテーマからcssをいじってカスタマイズした．

h2

## h2

h3

### h3

h4

#### h4
h5
##### h5

普通のテキストはこんな感じで，見分けはつくかと．

ちなみに、h1はタイトル。

数式

MathJaxを使用している．

このとき、いくつかのオプションを付している。

より詳しくはこちら。

https://note.yu9824.com/error/2021/12/11/mathjax-v2-to-v3.html

インラインスタイル

例文: 「ここで，$n$は自然数とする．」

ここで，$n$は自然数とする．

$で囲った部分に$\LaTeX$の記法を記すことで数式を表すことができる．

ディスプレイスタイル

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

$$で囲った部分に$\LaTeX$の記法を記すことで数式を表すことができる．

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

コード

highlight.jsを使用している．

Google Code Prettifyの使用を検討したが，拡張のしやすさからhighlight.jsを採用した．

（2022年2月5日追記）

ずっと，うまくハイライトされないときがあり，原因が不明であったが，これはGithub Pagesがmarkdownをhtmlに変換するときにハイライトしやすいように勝手に新しい<div>などを作りながら変換してしまうせいだった．

これをやめて，かつコードを```で囲って表せるようにするために以下のように_config.ymlを設定した．

kramdown:
        input: GFM  # ```でできるようにするため
        syntax_highlighter_opts:
          disable: true # highlighterを実行させない

参考: GitHub PagesのJekyllでRougeを無効にする - Hachy

Github pagesでうまくhighlight.jsが使えないのはほとんどの場合これが原因なのではないかと思う．

ついでに馴染み深いGithubの目に優しめダークテーマにしてみた．

VSCodeのテーマがあればいいのにと思ったけど今はまだないみたい？

（2022年2月5日追記終わり）

インラインスタイル

例文: 「ここで，xは引数を表す．」

ここで，`x`は引数を表す．

「`」で囲うことでコードブロックを表すことができる．

ディスプレイスタイル

ディスプレイスタイルだと，マウスオーバーしたときにコピーボタンが出現して，コードをコピーできる．

highlight.jsにコピーボタンを追加する方法を参考に，自分用にカスタマイズして使用している（自分の環境ではうまく動作しなかったし，コードブロックに横スクロールを足したかったため）．

どのように見えるかというと，

def greet():
    print('Hello world!')

こんな感じ．

```python
def greet():
    print('Hello world!')
```

引用

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。 こころ - 夏目漱石

>を文頭につけるとhtmlでいうとblockquoteタグがつく． このタグの中で，citeタグをつけると引用元を表すことができる．

> 私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。
> <cite>[こころ - 夏目漱石](http://www.aozora.gr.jp/cards/000148/files/773_14560.html)</cite>

ブログカード

こんな感じのブログカードが表示されるようにした．

https://note.yu9824.com/

以下の通り，設定するaltをリンクのURLと同じにすると同じにすると自動でブログカードが作成されるようにした．

[https://note.yu9824.com/](https://note.yu9824.com/)

例

https://qiita.com/

https://og-image.yu9824.com/

はてなと違ってtarget='_blank'だけでなく，rel='noopener'も設定できるようにした．

内部リンクかどうかを判定して，外部リンクだった場合はそれらを設定するようにしている．