Djot 構文サンプル集

このドキュメントは Djot の構文をなるべく網羅したサンプルです。 Djot は CommonMark をベースに、よりシンプルで拡張性の高い軽量マークアップ言語として設計されています。

1. 見出し (Headings)

レベル1見出し

レベル2見出し

レベル3見出し

レベル4見出し

レベル5見出し
レベル6見出し

見出しは複数行にまたがることができます。

この見出しは 複数行に またがっています

見出しに # を省略して続けることもできます。

この見出しも 複数行ですが

記号を省略できます

2. 段落とソフト/ハード改行 (Paragraphs & Line Breaks)

これは最初の段落です。 段落内の改行はソフトブレークとして扱われ、スペースと同様に解釈されます。

これは二番目の段落です。段落同士は空行で区切ります。

ハードブレーク(<br>相当)はバックスラッシュ+改行で表現します。
この行はハードブレークの後に始まります。

3. インライン書式 (Inline Formatting)

イタリック(斜体) または これも斜体

ボールド(太字) または これも太字

インラインコード(バーベイタム)

H2O(下付き文字・サブスクリプト)

20th 記念日(上付き文字・スーパースクリプト)

ハイライトされたテキスト

挿入されたテキスト

削除されたテキスト

ネストの例: これは 太字を含む 斜体テキストです

明示的なオープナー・クローザーによる強調: スペースがあっても強調されます!

4. バーベイタム(逐語的)テキスト (Verbatim)

バックティックを含む `verbatim` テキスト

バックティック3つ ``` を含むテキスト

5. コードブロック (Code Blocks)

シンタックスハイライトなしのフェンスドコードブロック:

$ tree
.
├── src/
│   └── main.rs
├── tests/
│   └── integration.rs
└── Cargo.toml

言語指定あり(Python):

def fibonacci(n):
    """フィボナッチ数列を返す"""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

for i in range(10):
    print(f"fib({i}) = {fibonacci(i)}")

言語指定あり(Rust):

fn main() {
    let message = "Hello, Djot!";
    println!("{}", message);
}

チルダを使ったフェンスドブロック(バックティックの代わり):

const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));

6. 数式 (Math)

インライン数式: \(p = mv\)

インライン数式(別の例): Einstein の式は \(E = mc^2\) です。

ディスプレイ数式(独立行):

\[\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}\]

ピタゴラスの定理:

\[x^n + y^n = z^n\]

8. 画像 (Images)

インライン画像:

ロゴ

参照画像:

サンプル画像

参照(テキスト=ラベル):

placeholder

属性付き画像:

幅指定の画像

9. 箇条書きリスト (Bullet Lists)

- マーカー:

  • ライオン
  • トラ
  • クマ

* マーカー:

  • リンゴ
  • バナナ
  • オレンジ

+ マーカー:

ネストしたリスト(空行が必要):

  • 哺乳類
    • クジラ
  • 爬虫類
    • ヘビ
    • トカゲ

複数段落を持つリスト項目:

  • 最初の項目。 この項目は複数行にわたります。

    これは同じリスト項目の二番目の段落です。

  • 二番目の項目。

10. 番号付きリスト (Ordered Lists)

ピリオドで終わる番号:

  1. 一番目
  2. 二番目
  3. 三番目

括弧で終わる番号:

  1. 最初のステップ
  2. 次のステップ
  3. 最後のステップ

括弧で囲まれた番号:

  1. Alpha
  2. Beta
  3. Gamma

英小文字:

  1. 項目 A
  2. 項目 B
  3. 項目 C

英大文字(括弧付き):

  1. 第一章
  2. 第二章
  3. 第三章

ローマ数字(小文字):

  1. カエサル
  2. アウグストゥス
  3. ティベリウス

11. タスクリスト (Task Lists)

  • 未完了のタスク
  • 完了したタスク
  • これも完了(大文字X)
  • もう一つの未完了タスク

12. 定義リスト (Definition Lists)

ライオン

大型のネコ科動物。アフリカのサバンナに生息する。 「百獣の王」とも呼ばれる。

トラ

縞模様を持つ大型ネコ科動物。 シベリア、ベンガルなど複数の亜種がある。

クマ

雑食性の大型哺乳類。 テディベアのモデルにもなっている。

13. 引用ブロック (Block Quotes)

これはブロック引用です。 複数行にわたることができます。

引用ブロック内にも段落を作れます。

入れ子の引用:

外側の引用です。

内側の引用(入れ子)です。

また外側に戻ります。

属性付き引用:

始めよければすべてよし。

引用ブロック内にリスト:

リストも含められます。

  1. 第一条
  2. 第二条
  3. 第三条

14. テーブル (Tables)

基本的なテーブル:
名前サイズ
ライム
オレンジオレンジ
グレープフルーツ黄または赤

列の揃え方を指定したテーブル(左・右・中央揃え):
素材数量キャッチフレーズ
コットン42実用的!
ウール17暖かい!
シルク4なめらか!

15. 脚注 (Footnotes)

これは重要な主張です。1

複数の脚注を使うこともできます。2

脚注の内容は長い説明を含めることができます。3

16. セクション区切り(テーマティックブレーク)(Thematic Breaks)

三つのアスタリスクで水平線:


三つのハイフンで水平線:

より長い形式も有効:


17. スマート句読点 (Smart Punctuation)

ダブルクォート: “Hello,” said the spider.

シングルクォート: ‘Shelob’ is my name.

ネストしたクォート: “She said ‘hello’ to me.”

エムダッシュ(—): 彼は来た—そして去った。

エンダッシュ(–): ページ 57–83 を参照。

省略記号(…): そして…物語は終わった。

バックスラッシュでストレートクォートを強制: 5'11"

明示的なクォート方向指定: ’Tis the season to be jolly!

18. 属性 (Attributes)

インライン要素への属性

IDとクラスを持つスパン:

重要なテキスト

キーバリュー属性:

翻訳テキスト

スタックした属性(結合される):

avant

強調テキストへの属性:

強調テキスト

ブロック要素への属性

これはwarningクラスを持つ段落です。

print("属性付きコードブロック")

引用ブロックへの属性:

人生は短い。芸術は長い。

19. スパンとDiv (Spans & Divs)

インラインスパン:

スパンテキスト

Divブロック(属性付き):

このテキストはdivコンテナの中にあります。

複数の段落を含むことができます。

ショートハンド記法(クラス名を直接指定):

このdivはwarningクラスを持ちます。 ショートハンド記法で書いています。

ネストしたDiv:

外側のDiv

内側のDiv :::

20. コメント (Comments)

コメントは複数行にまたがることもできます:

インライン中のコメント: Foo bar baz.

属性内のコメント:

テキスト

21. シンボル (Symbols)

シンボルはフィルタで処理できます(デフォルトはそのまま出力):

私の反応は :+1: :smiley: です。

:warning: 注意が必要です。

22. 生のインラインコンテンツ (Raw Inline)

HTMLとして埋め込むraw inline:

ディナーには スパゲッティ を食べました。

LaTeX形式のraw inline:

数式は で表します。

23. 生のブロックコンテンツ (Raw Blocks)

HTML形式のrawブロック:

<details>
  <summary>クリックして展開</summary>
  <p>これは生のHTMLブロックです。Djotのパーサーには解釈されません。</p>
</details>

LaTeX形式のrawブロック:

\begin{equation}
  E = mc^2
\end{equation}

24. バックスラッシュエスケープ (Backslash Escapes)

すべての ASCII 句読点はバックスラッシュでエスケープできます:

* アスタリスク _ アンダースコア ` バックティック # ハッシュ [ 角括弧 ] 角括弧(閉じ) { 波括弧 } 波括弧(閉じ) \ バックスラッシュ自体

本文中で使った参照ラベルはドキュメントのどこでも定義できます。

インライン参照の例: MDN Web Docs

タイトル付き参照: W3C

26. 見出しへの属性と複合例 (Advanced Heading with Attributes)

属性付きの見出し

この見出しにはIDとクラスが付いています。

27. 複合的な例 (Composite Examples)

インラインの組み合わせ

斜体の中に コード を含む テキスト。

太字に ハイライト を含む テキスト。

リンクテキストに 太字 を含む

H2O は水の化学式、E=mc2 はアインシュタインの式。

削除された追加されたテキストで変更を示す。

ネストしたブロック構造

ブロック引用の中に

  • リスト項目1
  • リスト項目2 - ネストした項目

と段落が共存しています。

リスト内の複合コンテンツ:

  1. 最初のステップ

    このステップには引用が含まれます。

    コードも含められます:

    echo "Step 1 complete"
    
  2. 二番目のステップ

    数式: \(f(x) = ax^2 + bx + c\)

  3. 三番目のステップ(完了)4

このドキュメントは Djot 構文の学習目的で作成されたサンプルです。

作成日: 2026-06-01 — Djot 構文リファレンスより :::


  1. これが脚注の内容です。↩︎

  2. 二つ目の脚注。インライン書式も使えます: 太字コード↩︎

  3. 長い脚注の例。

    複数の段落を含むことができます。

    # コードブロックも含められます
    print("脚注内のコード")
    

    ↩︎

  4. ステップ3は前提条件が必要です。詳細は付録を参照。↩︎