T2-Lab

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

段落と改行

これは一つ目の段落です。
これは二つ目の段落です。

これは一つ目の段落です。

これは二つ目の段落です。

改行には二つの方法があります:

  1. 行末に半角スペースを二つ以上入れる
  2. 行末に <br /> タグを入れる
ここの文の後に改行が入ります。
ここは次の行です。
この分の後にも改行が入ります。<br />
ここも次の文です。

ここの文の後に改行が入ります。
ここは次の行です。

この分の後にも改行が入ります。
ここも次の文です。

注意:半角スペースによる改行は目視できないため、トラブルの原因になる可能性があります。

強調(太字・斜体)

_斜体_
**太字**
**_太字かつ斜体_**

斜体

太字

太字かつ斜体

リスト

順序なしリスト(箇条書き)

- 親項目 1
- 親項目 2
- 子項目1
- 子項目2
- 孫項目1
- 親項目 3
  • 親項目 1
  • 親項目 2
    • 子項目1
    • 子項目2
      • 孫項目1
  • 親項目 3

順序付きリスト(番号付き)

1. 親項目 1
1. 親項目 2
1. 子項目1
1. 子項目2
1. 孫項目1
1. 親項目 3
  1. 親項目 1
  2. 親項目 2
    1. 子項目1
    2. 子項目2
      1. 孫項目1
  3. 親項目 3

リンク

基本的なリンク

[リンクテキスト](https://www.example.com)

リンクテキスト

ツールチップ付きリンク

[リンクテキスト](https://www.example.com "リンクのツールチップ")

リンクテキスト

参照リンク

[リンクテキスト][参照ID]
[参照ID]: https://www.example.com "リンクのツールチップ"

リンクテキスト

相対リンク

[同じリポジトリの別ファイル](../path/to/file.md)

メールリンク

email@example.com

email@example.com

画像

基本的な画像挿入

![代替テキスト](https://x.gd/ZDq1j)

代替テキスト

ツールチップ 付き画像

![代替テキスト](https://x.gd/3FgJl "画像のツールチップ")

代替テキスト

参照形式の画像

![代替テキスト][画像ID]
[画像ID]: https://x.gd/qwby0 "画像のツールチップ"

代替テキスト

リンク付き画像

[![代替テキスト](https://x.gd/11Beo)](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
$$

インライン数式:E=mc2E=mc^2

ブロック数式:

ddxex=ex\frac{d}{dx}e^x = e^x

Footnotes

  1. これは脚注の内容です。