MDX(Markdown + JSX)記法一覧
Date :
Categories : Tech
簡易的な MDX(.mdx)の記法一覧です。Markdown(.md)とほぼ同じ構文が使えます。
見出し
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
段落と改行
これは一つ目の段落です。
これは二つ目の段落です。
これは一つ目の段落です。
これは二つ目の段落です。
改行には二つの方法があります:
- 行末に半角スペースを二つ以上入れる
- 行末に
<br />
タグを入れる
ここの文の後に改行が入ります。ここは次の行です。
この分の後にも改行が入ります。<br />ここも次の文です。
ここの文の後に改行が入ります。
ここは次の行です。
この分の後にも改行が入ります。
ここも次の文です。
注意:半角スペースによる改行は目視できないため、トラブルの原因になる可能性があります。
強調(太字・斜体)
_斜体_
**太字**
**_太字かつ斜体_**
斜体
太字
太字かつ斜体
リスト
順序なしリスト(箇条書き)
- 親項目 1- 親項目 2 - 子項目1 - 子項目2 - 孫項目1- 親項目 3
- 親項目 1
- 親項目 2
- 子項目1
- 子項目2
- 孫項目1
- 親項目 3
順序付きリスト(番号付き)
1. 親項目 11. 親項目 2 1. 子項目1 1. 子項目2 1. 孫項目11. 親項目 3
- 親項目 1
- 親項目 2
- 子項目1
- 子項目2
- 孫項目1
- 親項目 3
リンク
基本的なリンク
[リンクテキスト](https://www.example.com)
ツールチップ付きリンク
[リンクテキスト](https://www.example.com "リンクのツールチップ")
参照リンク
[リンクテキスト][参照ID]
[参照ID]: https://www.example.com "リンクのツールチップ"
相対リンク
[同じリポジトリの別ファイル](../path/to/file.md)
メールリンク
email@example.com
画像
基本的な画像挿入

ツールチップ 付き画像

参照形式の画像
![代替テキスト][画像ID]
[画像ID]: https://x.gd/qwby0 "画像のツールチップ"
リンク付き画像
[](https://www.example.com)
引用
> これは引用です。> 複数行に渡ることもあります。>> > ネストされた引用も可能です。
これは引用です。 複数行に渡ることもあります。
ネストされた引用も可能です。
コード
インラインコード
`インラインコード` を使用できます。
インラインコード
を使用できます。
コードブロック
フェンスコードブロック
```// 言語指定なしのコードブロックfunction example() {return true;}```
```javascript// 言語指定によるシンタックスハイライトfunction example() { return true;}```
表示例:
// 言語指定によるシンタックスハイライトfunction example() { return true;}
水平線
---
表
| 見出し 1 | 見出し 2 | 見出し 3 || -------- | -------- | -------- || セル 1 | セル 2 | セル 3 || セル 4 | セル 5 | セル 6 |
見出し 1 | 見出し 2 | 見出し 3 |
---|---|---|
セル 1 | セル 2 | セル 3 |
セル 4 | セル 5 | セル 6 |
表の整列
| 左揃え | 中央揃え | 右揃え || :----- | :------: | -----: || 左 | 中央 | 右 || 左揃え | 中央揃え | 右揃え |
左揃え | 中央揃え | 右揃え |
---|---|---|
左 | 中央 | 右 |
左揃え | 中央揃え | 右揃え |
タスクリスト
- [x] 完了したタスク- [ ] 未完了のタスク- [ ] ~~取り消されたタスク~~
- 完了したタスク
- 未完了のタスク
-
取り消されたタスク
脚注
これは脚注付きのテキストです1。
取り消し線
~~取り消し線~~
取り消し線
上付き・下付き文字
H<sub>2</sub>O(水)
E=mc<sup>2</sup>(アインシュタイン方程式)
H2O(水)
E=mc2(アインシュタイン方程式)
自動リンク
https://www.example.com
注意:Markdown では <>
で囲むと自動リンクになりますが、MDX では <>
で囲んだ中に /
が含まれていると、タグとして解釈されてエラーになる可能性があります。
HTML の埋め込み
<div style="color: red;"> これは<em>HTML</em>で書かれた<strong>赤文字</strong>です。</div>
これはHTMLで書かれた赤文字です。
エスケープ文字
\*これはイタリック体ではなく、アスタリスクで囲まれたテキストです\*
*これはイタリック体ではなく、アスタリスクで囲まれたテキストです*
エスケープできる文字:
\ バックスラッシュ` バッククォート* アスタリスク_ アンダースコア{} 中括弧[] 角括弧() 丸括弧# ハッシュ記号+ プラス記号- マイナス記号(ハイフン). ピリオド! 感嘆符
数式(LaTeX)
インライン数式:$E=mc^2$
ブロック数式:
$$\frac{d}{dx}e^x = e^x$$
インライン数式:
ブロック数式:
Footnotes
-
これは脚注の内容です。 ↩