Gatebyサイトで使っているMDのデザインをまとめた
このサイトの基本的なデザインをまとめておく。
なお、MDXのショートコードを使うものや、コードの応用的な書き方については別記事なので、合わせてみて欲しい。
見出し
基本的にH2/H3/H4があれば事足りるようにするべし。
なお、目次はH5に対しては段落がつかないようになっている。
## H2見出し
### H3見出し
#### H4見出し
##### H5見出しH2見出し
H3見出し
H4見出し
H5見出し
リスト
ul
- 1
- 2
- 2-1
- 2-2
- 2-2-1
- 2-2-2- 1
- 2
- 2-1
- 2-2
- 2-2-1
- 2-2-2
ol
1. one
1. two
1. three- one
- two
- three
インライン要素
*イタリック*
**太文字**
~~打ち消し線~~
インライン`console.log("code")`です
これは[リンク](https:/sukiburo.jp)です
これは<samp>プログラムの出力</samp>です。イタリック
太文字
打ち消し線
インラインconsole.log("code")です
これはリンクです
これはプログラムの出力です。
なお、記事中のaタグにはtarget='_blank' rel='nofollow noopener noreferrer'が自動で付与される。
解除するのであれば、gatsby-remark-external-linksを消せば良い。
テーブル
シンプルなデザインにした。画面サイズを飛び出したらスクロールさせたり、タイトルをつけるのは以下のページの方法を使う。
| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text || Head | Head | Head |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
ボックス
ボックスにはgatsby-remark-custom-blocksを用いた。若干癖があるが、使い勝手は悪くない。
デザインは基本的にsukiburoで使っているデザインをほとんを真似した。
ダークモードでも見やすいようにデザインするのは、material-uiを参考にしたものの、想像以上に難しかった。
[[emphasis]]
| 強調ブロック
[[danger | 注意]]
| 注意内容
[[info | 情報]]
| 情報内容
[[matome | まとめ]]
| - リストで記述
| - するべし
[[merit | メリット]]
| - リストで記述
| - するべし
[[demerit | デメリット]]
| - リストで記述
| - するべし
[[quote | [sukiburo](https://sukiburo.jp)]]
| 引用内容を記述
[[recommend | この記事をおすすめする人]]
| - リストで記述
| - するべし強調ブロック
注意内容
情報内容
- リストで記述
- するべし
- リストで記述
- するべし
- リストで記述
- するべし
引用内容を記述
- リストで記述
- するべし
なお、引用についてはblockquoteで囲っているわけではないので、推奨はしない。
MDXで簡単に導入できるようにした。詳しくはこの記事をみて欲しい。
コード
コピーボタン・タイトル・コードの編集などはMDXで対応した。
markdownではprismjsでのハイライトのみできる。
詳しくは別記事にした。参考にして欲しい。
なお、コードのハイライトは個人的に色を変えている。嫌であれば変更して欲しい。
static/prism.min.cssを使っている。
基本的な使い方。
```css
p {
margin: 30px;
}
```p {
margin: 30px;
}コードの行数をつける場合。
numberLines: true: 行数をつける
```css{numberLines: true}
p {
margin: 30px;
}
```p {
margin: 30px;
}※コードはsukiburoから適当に取ってきました。内容に合っていません。
outputLines: line num: 出力の行数
promptUser: 'userName': ユーザー名
promptHost: 'hostName': ホスト名
```bash{outputLines: 1, 3-4}{promptUser: "root"}{promptHost: "192.0.2.0"}
PING raspberrypi.local (👉192.168.0.5👈): 56 data bytes
64 bytes from 192.168.0.5: icmp_seq=0 ttl=64 time=104.856 ms
~
~
```PING raspberrypi.local (👉192.168.0.5👈): 56 data bytes
64 bytes from 192.168.0.5: icmp_seq=0 ttl=64 time=104.856 ms
~
~$, #, %の記号を{promptUser: “}に入れることができるようにした。個人的にかなり多用するので。
data-promptオプションが使えれば便利なのになぁ。。。と思って仮の設定でつけた。
```bash{promptUser: "%"}
brew install python
```brew install python
