Zennのマークダウン記法を使ってみる
Zenn のマークダウン記法を使ってみる
メモ兼ブログとしてZennを使ってみようと思い当たり、GitHub連携、CLIの設定まで終わった後の話。
最初の投稿記事として、マークダウン記法についていろいろ試していこうと思う。
Zenn公式さんがこちらの記事で丁寧に解説してくださっている。
実際に使ってみる
なにはともあれ、使ってみた方が分かりやすいということで、さっそくお試し。
以降は、個人的に使用頻度が高いだろうと思ったものから順に書いていこうと思う。
見出し1,2,3,…6
#の後に記述する。見出しは6まで記述できるみたい。
目次に反映されるのは見出し2まで。
アクセシビリティの観点から、見出し2から始めるのが良いらしい。
# 見出し1
## 見出し 2
### 見出し 3
#### 見出し4
##### 見出し5
###### 見出し6
見出し1
見出し 2
見出し 3
見出し4
見出し5
見出し6
空行
適宜空行を挿入すると可読性が上がると思う。
テキスト
テキスト
テキスト
テキスト
テキストリンク
文の途中のリンクや、引用など、これは多用しそうな気がします。
[ZennのMarkdown記法](https://zenn.dev/zenn/articles/markdown-guide)
コードブロック
(```)で囲んだ中に記述。
```
console.log("Hello world!")
```
console.log("Hello world!")
コードブロック（シンタックスハイライト：装飾あり）
(```)の後に言語を指定することでコードを装飾できる。
視覚的にわかりやすいので、こちらを使用していきたい。
ちなみに、対応している言語や記述法はhttps://prismjs.com/#supported-languagesで確認できるみたい。
javascript
```js
console.log("Hello world!")
```
console.log("Hello world!")
htmlだと↓のような感じ。jsの記法はシンタックスハイライトされない。
```html
console.log("Hello world!")
<p>Hello world!<p>
```
console.log("Hello world!")
<p>Hello world!<p>
jsxだときちんと反映されます。
```jsx
console.log("Hello world!")
<p>Hello world!<p>
```
console.log("Hello world!")
<p>Hello world!<p>
コードブロック（ファイル名を表示する）
上記から更に（:）で繋いでテキストを入力するとコードのファイル名や見出しのようなものを設定できる。
```jsx:index.jsx
console.log("Hello world!")
<p>Hello world!<p>
```
console.log("Hello world!")
<p>Hello world!<p>
リンクカード
URLを指定するだけで、その部分がカードとして表示される。
webページや、youtube、GitHub、Twitterなどに対応。
分かりやすいし、記述も簡単。
https://www.youtube.com/
https://github.com/zenn-dev/zenn-docs/blob/main/README.md
https://x.com/zenn_dev/status/1938039355647660489
文字の装飾
(*)で囲む：イタリック
(**)で囲む：太字
(~~)で囲む：打消し線
(`)で囲む：インライン
特に、インラインは多用しそうなイメージ。
*イタリック*
**太字**
~~打消し線~~
インラインで`強調`する
イタリック
太字
打消し線
インラインで強調する
文字の装飾（メッセージ）
視覚的にわかりやすいZenn独自の記法。
(:::)message メッセージ
(:::)message alert 警告
:::message
メッセージ
:::
:::message alert
警告メッセージ
:::
画像
画像はURLやパスで指定できる。
../images…のような相対パス指定はダメみたい。
画像（横幅指定）
画像にリンクを張る
テキストリンクとくっつけたみたいな感じ。
(https://pixabay.com/ja/)
トグル
使えそうな場面は多くあると思う。
記述法は、メッセージと似ている。
:::details タイトル
表示したい内容
:::
タイトル
表示したい内容
リスト
-の後にテキストを記述。インデントで管理するみたい。
- Hello!
- world
- Hello!
- world
番号付きリスト
1. First
2. Second
- First
- Second
コメント
メモ用に。
HTML形式で記述できる。表示はされない。
<!-- コメント -->
区切り線
-----
テーブル
使い方によってはという感じ。
記述が結構手間なので、使用頻度は少ないかなというイメージ。
| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text |
| Head | Head | Head |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
引用
(>)の後に記述する。
>引用1
>引用2
引用1
引用2
脚注
脚注はページの最下部に設定される。
脚注の例[^1]
脚注の例[^2]
[^1]:脚注の例1です。
[^2]:脚注の例2です。
数式
使う機会はほぼないだろうけど、こんなこともできるということで。
($$)で囲むと数式のブロックを挿入できる。
$$
e^{i\theta} = \cos\theta + i\sin\theta
$$
最後に
今回はZennを使ってみる一番最初の記事ということで公式さんが投稿している記事を参考にメモ感覚でマークダウン記法について記述しました。
まだまだ、できることは多そうです。
これから、学習の過程を少しずつ蓄積していきたいと思います。
ここまで読んでくださり、ありがとうございました。
Discussion