MDX(Markdown + JSX)記法一覧
Date :
Categories : Tech
簡易的な MDX(.mdx)の記法一覧です。Markdown(.md)とほぼ同じ構文が使えます。
見出し
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6Heading 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
-
これは脚注の内容です。 ↩