目次

1. 基本的な Markdown 機能
2. リスト、タスク、脚注
3. 表とコードハイライト
4. GitHub スタイルのアラート
5. KaTeX 数式
6. Mermaid 図
7. Duckquill ショートコード
8. HTML 拡張機能
9. ボタンとクイックナビゲーション
10. ページ単位の Front Matter 機能
11. Backlinks デモ

この記事は、このサイトのデモ用ブログページです。リッチテキストと拡張フォーマット機能を一か所に集約して検証する目的で作成しています。

基本的な Markdown 機能

テキストスタイル: 太字、斜体、取り消し、インラインコード、さらに組み合わせた 全部入り も可能です。

• 内部リンク: ホーム
• 外部リンク: Zola Documentation
• 絵文字: 😭😂🥺🤣❤️✨🙏😍🥰😊

これは引用ブロックです。

ネストした引用の例:

Duckquill は、明確で構造化された技術文書にとても向いています。

リスト、タスク、脚注

• 通常リスト項目 A
• 通常リスト項目 B
  • ネスト項目 B.1
  • ネスト項目 B.2
• 通常リスト項目 C

1. コンテンツを書く
2. ローカルでプレビューする
3. 公開する

• タスク 1: 一般的な Markdown 拡張を有効化
• タスク 2: Mermaid サポートを追加
• タスク 3: ショーケース記事として再構成
• タスク 4: 実運用に近い例を継続的に追加

脚注の例¹ とリンク付き脚注²。

Definition List の例:

Mermaid

テキストでグラフ構造を記述し、自動的に SVG として描画します。

KaTeX

LaTeX 数式を高速にレンダリングします。

Duckquill Shortcodes

alert、image、video、youtube などのテーマレベル機能拡張です。

表とコードハイライト

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

GitHub スタイルのアラート

背景情報を補足するための NOTE アラートです。

実用的な提案を示すための TIP アラートです。

重要な手順を強調するための IMPORTANT アラートです。

想定される問題を注意喚起するための WARNING アラートです。

リスクのある操作を説明するための CAUTION アラートです。

KaTeX 数式

インライン数式: $E = mc^2$。

ブロック数式:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Mermaid 図

次の mermaid ブロックはフローチャートとして描画されます:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

シーケンス図の例:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Duckquill ショートコード

alert ショートコード（GitHub Alerts とは別の、テーマ側ショートコードです）:

これは note ショートコードのアラートです。

これは tip ショートコードのアラートです。

これは important ショートコードのアラートです。

これは warning ショートコードのアラートです。

これは caution ショートコードのアラートです。

画像ショートコード（基本例）:

画像ショートコード（オプション多めの例）:

このテキストは start 浮動画像の挙動を示します。画像が段落の先頭側に寄り添って配置されます。

このテキストは end 浮動画像の挙動を示します。画像が段落の末尾側に寄り添って配置されます。

動画ショートコード（基本例と autoplay 例）:

YouTube / Vimeo / Mastodon ショートコード向けリンク:

• YouTube の例リンク
• Vimeo の例リンク
• Mastodon の例リンク

（注: このショーケースではサードパーティ埋め込みのコンソール出力を抑えるため、ここではリンク表示にしています。）

CRT ショートコード:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

HTML 拡張機能

一般的なインライン HTML タグもそのまま使えます:

• ASCII
• Ctrl + K
• 強調したいキーテキスト
• これはスポイラーテキストです
• これはソリッドスポイラーテキストです
• 旧プラン 新プラン
• これはインライン引用です
• demo-output.log: all checks passed
• この文には下線があります

これは <small> を使った補足テキスト例です。

フォームと操作ウィジェットの例:

•  Mermaid を有効化
•  KaTeX を有効化
•  Backlinks を有効化
•  Dark
•  Light

アクセントカラー:

コンテンツ密度:

画像 + キャプション構成（figure + figcaption）:

進捗バーの例（ページスクリプトで range 入力と連動）:

ボタンとクイックナビゲーション

ページ単位の Front Matter 機能

featured = true に加えて、このページでは次もデモしています:

• banner = "banner-feature-en.png": 記事バナーと一覧サムネイル。
• accent_color / accent_color_dark: ページ単位のアクセント色上書き。
• styles = ["css/feature-demo-blog.css"] と scripts = ["js/feature-demo-blog.js"]: ページ専用スタイルとスクリプト。
• emoji_favicon = "🧪": ブラウザタブ用の絵文字ファビコン。

このセクションは、ページ単位設定の描画を確認するための簡易チェックリストです。

Backlinks デモ

この投稿へのリンクを 自己紹介 ページから追加しています。

クイックアクションボタンに Backlinks が表示されれば、内部バックリンク索引は正常に動作しています。

上記の各モジュールが正しく描画されれば、このブログのリッチテキスト機能は一般的な執筆シナリオの大半をカバーできています。