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

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

https://qiita.com/tbpgr/items/989c6badefff69377da7

https://qiita.com/kamorits/items/6f342da395ad57468ae3

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

実際にどのように表示されるのかに関するテスト,および,記法のテストのために投稿として残している.

レイアウトのテスト

タイトル

h2

h3

h4

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

数式

MathJaxを使用している.

https://www.mathjax.org/

インラインスタイル

例文: 「ここで,$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を使用している.

https://highlightjs.org/

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

(2022年2月5日追記)

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

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

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

参考: https://hachy.github.io/2018/11/12/disable-rouge-with-jekyll-on-github-pages.html

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/

https://www.google.com/

はてなと違ってtarget='_blank'だけでなく,rel='noopener'も設定できるようにした.きちんと自サイトとそれ以外を判定して,それらを設定するか否かを判断している.