canxin のブログ - markdown
canxin のブログ。
Zola
2026-02-13T00:00:00+00:00
https://blog.cxits.cn/ja/tags/markdown/atom.xml
機能デモブログ: リッチテキスト、Mermaid、数式、ショートコード
2026-02-13T00:00:00+00:00
2026-02-13T00:00:00+00:00
canxin
https://blog.cxits.cn/ja/blog/feature-demo-blog/
<p>この記事は、このサイトの<strong>デモ用ブログページ</strong>です。リッチテキストと拡張フォーマット機能を一か所に集約して検証する目的で作成しています。</p>
<h2 id="ji-ben-de-na-markdown-ji-neng"><a class="zola-anchor" href="#ji-ben-de-na-markdown-ji-neng" aria-label="Anchor link for: ji-ben-de-na-markdown-ji-neng"><i class="icon"></i></a>
基本的な Markdown 機能</h2>
<p>テキストスタイル: <strong>太字</strong>、<em>斜体</em>、<del>取り消し</del>、<code>インラインコード</code>、さらに組み合わせた <em><strong><del>全部入り</del></strong></em> も可能です。</p>
<ul>
<li>内部リンク: <a href="https://blog.cxits.cn/">ホーム</a></li>
<li>外部リンク: <a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.getzola.org/documentation/">Zola Documentation</a></li>
<li>絵文字: 😭😂🥺🤣❤️✨🙏😍🥰😊</li>
</ul>
<blockquote>
<p>これは引用ブロックです。</p>
<p>ネストした引用の例:</p>
<blockquote>
<p>Duckquill は、明確で構造化された技術文書にとても向いています。</p>
</blockquote>
</blockquote>
<h2 id="risuto-tasuku-jiao-zhu"><a class="zola-anchor" href="#risuto-tasuku-jiao-zhu" aria-label="Anchor link for: risuto-tasuku-jiao-zhu"><i class="icon"></i></a>
リスト、タスク、脚注</h2>
<ul>
<li>通常リスト項目 A</li>
<li>通常リスト項目 B
<ul>
<li>ネスト項目 B.1</li>
<li>ネスト項目 B.2</li>
</ul>
</li>
<li>通常リスト項目 C</li>
</ul>
<ol>
<li>コンテンツを書く</li>
<li>ローカルでプレビューする</li>
<li>公開する</li>
</ol>
<ul>
<li><input disabled="" type="checkbox" checked=""/>
タスク 1: 一般的な Markdown 拡張を有効化</li>
<li><input disabled="" type="checkbox" checked=""/>
タスク 2: Mermaid サポートを追加</li>
<li><input disabled="" type="checkbox" checked=""/>
タスク 3: ショーケース記事として再構成</li>
<li><input disabled="" type="checkbox"/>
タスク 4: 実運用に近い例を継続的に追加</li>
</ul>
<p>脚注の例<sup class="footnote-reference" id="fr-note1-1"><a href="#fn-note1">1</a></sup> とリンク付き脚注<sup class="footnote-reference" id="fr-note2-1"><a href="#fn-note2">2</a></sup>。</p>
<p>Definition List の例:</p>
<dl>
<dt>Mermaid</dt>
<dd>テキストでグラフ構造を記述し、自動的に SVG として描画します。</dd>
<dt>KaTeX</dt>
<dd>LaTeX 数式を高速にレンダリングします。</dd>
<dt>Duckquill Shortcodes</dt>
<dd><code>alert</code>、<code>image</code>、<code>video</code>、<code>youtube</code> などのテーマレベル機能拡張です。</dd>
</dl>
<h2 id="biao-tokodohairaito"><a class="zola-anchor" href="#biao-tokodohairaito" aria-label="Anchor link for: biao-tokodohairaito"><i class="icon"></i></a>
表とコードハイライト</h2>
<table><thead><tr><th style="text-align: left">機能</th><th style="text-align: center">状態</th><th style="text-align: left">メモ</th></tr></thead><tbody>
<tr><td style="text-align: left">GitHub Alerts</td><td style="text-align: center">有効</td><td style="text-align: left"><code>[!NOTE]</code> などの構文に対応</td></tr>
<tr><td style="text-align: left">Syntax Highlighting</td><td style="text-align: center">有効</td><td style="text-align: left">行番号と強調行に対応</td></tr>
<tr><td style="text-align: left">Mermaid</td><td style="text-align: center">有効</td><td style="text-align: left"><code>mermaid</code> コードブロックの描画に対応</td></tr>
<tr><td style="text-align: left">KaTeX</td><td style="text-align: center">このページで有効</td><td style="text-align: left"><code>extra.katex = true</code> で有効化</td></tr>
</tbody></table>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="rust"><span class="giallo-l"><span style="color: #859900;">fn</span><span style="color: #268BD2;"> main</span><span>() {</span></span>
<span class="giallo-l"><span style="color: #268BD2;"> println!</span><span>(</span><span style="color: #2AA198;">"Duckquill demo blog"</span><span>);</span></span>
<span class="giallo-l"><span>}</span></span></code></pre><pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="toml"><span class="giallo-l"><span aria-hidden="true" class="giallo-ln">1</span><span>[extra]</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">2</span><span style="color: #268BD2;">show_copy_button</span><span> =</span><span style="color: #B58900;"> true</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">3</span><span style="color: #268BD2;">show_reading_time</span><span> =</span><span style="color: #B58900;"> true</span></span>
<span class="giallo-l" style="background-color: #073642;"><span aria-hidden="true" class="giallo-ln">4</span><span style="color: #268BD2;">show_share_button</span><span> =</span><span style="color: #B58900;"> true</span></span></code></pre><h2 id="github-sutairunoarato"><a class="zola-anchor" href="#github-sutairunoarato" aria-label="Anchor link for: github-sutairunoarato"><i class="icon"></i></a>
GitHub スタイルのアラート</h2>
<blockquote class="markdown-alert-note">
<p>背景情報を補足するための NOTE アラートです。</p>
</blockquote>
<blockquote class="markdown-alert-tip">
<p>実用的な提案を示すための TIP アラートです。</p>
</blockquote>
<blockquote class="markdown-alert-important">
<p>重要な手順を強調するための IMPORTANT アラートです。</p>
</blockquote>
<blockquote class="markdown-alert-warning">
<p>想定される問題を注意喚起するための WARNING アラートです。</p>
</blockquote>
<blockquote class="markdown-alert-caution">
<p>リスクのある操作を説明するための CAUTION アラートです。</p>
</blockquote>
<h2 id="katex-shu-shi"><a class="zola-anchor" href="#katex-shu-shi" aria-label="Anchor link for: katex-shu-shi"><i class="icon"></i></a>
KaTeX 数式</h2>
<p>インライン数式: $E = mc^2$。</p>
<p>ブロック数式:</p>
<p>$$
f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi
$$</p>
<h2 id="mermaid-tu"><a class="zola-anchor" href="#mermaid-tu" aria-label="Anchor link for: mermaid-tu"><i class="icon"></i></a>
Mermaid 図</h2>
<p>次の <code>mermaid</code> ブロックはフローチャートとして描画されます:</p>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="mermaid"><span class="giallo-l"><span>flowchart LR</span></span>
<span class="giallo-l"><span> A[Writing] --> B[Git Commit]</span></span>
<span class="giallo-l"><span> B --> C[Zola Build]</span></span>
<span class="giallo-l"><span> C --> D[Static Deploy]</span></span>
<span class="giallo-l"><span> D --> E[Visit Site]</span></span></code></pre>
<p>シーケンス図の例:</p>
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="mermaid"><span class="giallo-l"><span>sequenceDiagram</span></span>
<span class="giallo-l"><span> participant U as User</span></span>
<span class="giallo-l"><span> participant G as Git Repo</span></span>
<span class="giallo-l"><span> participant Z as Zola</span></span>
<span class="giallo-l"><span> U->>G: push content</span></span>
<span class="giallo-l"><span> G-->>Z: trigger build</span></span>
<span class="giallo-l"><span> Z-->>U: generated public site</span></span></code></pre><h2 id="duckquill-siyotokodo"><a class="zola-anchor" href="#duckquill-siyotokodo" aria-label="Anchor link for: duckquill-siyotokodo"><i class="icon"></i></a>
Duckquill ショートコード</h2>
<p><code>alert</code> ショートコード（GitHub Alerts とは別の、テーマ側ショートコードです）:</p>
<blockquote class="markdown-alert-note">
<p>これは <code>note</code> ショートコードのアラートです。</p>
</blockquote>
<blockquote class="markdown-alert-tip">
<p>これは <code>tip</code> ショートコードのアラートです。</p>
</blockquote>
<blockquote class="markdown-alert-important">
<p>これは <code>important</code> ショートコードのアラートです。</p>
</blockquote>
<blockquote class="markdown-alert-warning">
<p>これは <code>warning</code> ショートコードのアラートです。</p>
</blockquote>
<blockquote class="markdown-alert-caution">
<p>これは <code>caution</code> ショートコードのアラートです。</p>
</blockquote>
<p>画像ショートコード（基本例）:</p>
<img class="full transparent no-hover"alt="Local feature demo figure"src="figure-demo.svg"decoding="async" loading="lazy"/>
<p>画像ショートコード（オプション多めの例）:</p>
<a href="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg" data-lightbox="true">
<img class="no-hover"alt="Compressed preview demo"src="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg"decoding="async" loading="lazy"/>
</a><img class="full transparent no-hover"alt="Feature local figure"src="figure-demo.svg"decoding="async" loading="lazy"/>
<p><img class="start transparent no-hover"alt="Float start demo"src="figure-demo.svg"decoding="async" loading="lazy"/>
このテキストは <code>start</code> 浮動画像の挙動を示します。画像が段落の先頭側に寄り添って配置されます。</p>
<p><br />
<img class="end transparent no-hover"alt="Float end demo"src="figure-demo.svg"decoding="async" loading="lazy"/>
このテキストは <code>end</code> 浮動画像の挙動を示します。画像が段落の末尾側に寄り添って配置されます。</p>
<img class="spoiler"alt="Spoiler image demo"src="https://files.catbox.moe/lk7nee.jpg"decoding="async" loading="lazy"/><img class="spoiler solid"alt="Solid spoiler image demo"src="https://files.catbox.moe/lk7nee.jpg"decoding="async" loading="lazy"/>
<p>動画ショートコード（基本例と autoplay 例）:</p>
<video
class=""
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"aria-label="Flower wake up"preload="metadata"
controls loop muted
></video>
<video
class=""
src="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm"aria-label="Duckling preening"preload="metadata"
autoplay controls muted playsinline
></video>
<p>YouTube / Vimeo / Mastodon ショートコード向けリンク:</p>
<ul>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.youtube.com/watch?v=0Da8ZhKcNKQ">YouTube の例リンク</a></li>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://vimeo.com/">Vimeo の例リンク</a></li>
<li><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://toot.community/@sungsphinx/111789185826519979">Mastodon の例リンク</a></li>
</ul>
<p>（注: このショーケースではサードパーティ埋め込みのコンソール出力を抑えるため、ここではリンク表示にしています。）</p>
<p>CRT ショートコード:</p>
<div class="crt scanlines" aria-hidden="true">
<pre class="giallo" style="color: #839496; background-color: #002B36;"><code data-lang="plain"><span class="giallo-l"><span>user@duckquill-demo:~$ zola check</span></span>
<span class="giallo-l"><span>Checking site...</span></span>
<span class="giallo-l"><span>-> Site content: OK</span></span></code></pre>
</div>
<h2 id="html-kuo-zhang-ji-neng"><a class="zola-anchor" href="#html-kuo-zhang-ji-neng" aria-label="Anchor link for: html-kuo-zhang-ji-neng"><i class="icon"></i></a>
HTML 拡張機能</h2>
<details>
<summary>クリックして折りたたみパネルを展開</summary>
<p>ここには、リスト・画像・コードスニペットなど任意の内容を配置できます。</p>
<ul>
<li>折りたたみ内容 A</li>
<li>折りたたみ内容 B</li>
</ul>
</details>
<aside>
これは `aside` ブロックです。補足メモに便利です。
</aside>
<p>一般的なインライン HTML タグもそのまま使えます:</p>
<ul>
<li><abbr title="American Standard Code for Information Interchange">ASCII</abbr></li>
<li><kbd>Ctrl</kbd> + <kbd>K</kbd></li>
<li><mark>強調したいキーテキスト</mark></li>
<li><span class="spoiler">これはスポイラーテキストです</span></li>
<li><span class="spoiler solid">これはソリッドスポイラーテキストです</span></li>
<li><del>旧プラン</del> <ins>新プラン</ins></li>
<li><q>これはインライン引用です</q></li>
<li><samp>demo-output.log: all checks passed</samp></li>
<li><u>この文には下線があります</u></li>
</ul>
<p><small>これは <code><small></code> を使った補足テキスト例です。</small></p>
<p>フォームと操作ウィジェットの例:</p>
<ul>
<li><input class="switch" type="checkbox" checked /><label> Mermaid を有効化</label></li>
<li><input class="switch" type="checkbox" /><label> KaTeX を有効化</label></li>
<li><input class="switch big" type="checkbox" checked /><label> Backlinks を有効化</label></li>
<li><input type="radio" name="theme-demo" checked /><label> Dark</label></li>
<li><input type="radio" name="theme-demo" /><label> Light</label></li>
</ul>
<p><label for="accent-color">アクセントカラー:</label>
<input id="accent-color" type="color" value="#14897b" /></p>
<p><label for="demo-range">コンテンツ密度:</label>
<input id="demo-range" type="range" max="100" value="72" /></p>
<div id="demo-live-panel">
<small id="accent-preview">現在のアクセントカラー: #14897b</small>
<small id="density-preview">コンテンツ密度: 72%</small>
</div>
<p>画像 + キャプション構成（<code>figure</code> + <code>figcaption</code>）:</p>
<figure>
<img alt="Local figure demo" src="figure-demo.svg" />
<figcaption>ローカル画像 + figcaption（外部依存がなく、安定して描画できます）。</figcaption>
</figure>
<p>進捗バーの例（ページスクリプトで range 入力と連動）:</p>
<p><progress id="density-progress" value="72" max="100"></progress></p>
<h2 id="botantokuitukunabigesiyon"><a class="zola-anchor" href="#botantokuitukunabigesiyon" aria-label="Anchor link for: botantokuitukunabigesiyon"><i class="icon"></i></a>
ボタンとクイックナビゲーション</h2>
<div class="buttons">
<a href="#top">ページ先頭へ戻る</a>
<a class="colored external" href="https://www.getzola.org/documentation/content/overview/">Zola のコンテンツドキュメントを読む</a>
</div>
<div class="buttons centered">
<button class="big colored" type="button" disabled>大型ボタンスタイルのデモ</button>
</div>
<h2 id="pezidan-wei-no-front-matter-ji-neng"><a class="zola-anchor" href="#pezidan-wei-no-front-matter-ji-neng" aria-label="Anchor link for: pezidan-wei-no-front-matter-ji-neng"><i class="icon"></i></a>
ページ単位の Front Matter 機能</h2>
<p><code>featured = true</code> に加えて、このページでは次もデモしています:</p>
<ul>
<li><code>banner = "banner-feature-en.png"</code>: 記事バナーと一覧サムネイル。</li>
<li><code>accent_color</code> / <code>accent_color_dark</code>: ページ単位のアクセント色上書き。</li>
<li><code>styles = ["css/feature-demo-blog.css"]</code> と <code>scripts = ["js/feature-demo-blog.js"]</code>: ページ専用スタイルとスクリプト。</li>
<li><code>emoji_favicon = "🧪"</code>: ブラウザタブ用の絵文字ファビコン。</li>
</ul>
<p>このセクションは、ページ単位設定の描画を確認するための簡易チェックリストです。</p>
<h2 id="backlinks-demo"><a class="zola-anchor" href="#backlinks-demo" aria-label="Anchor link for: backlinks-demo"><i class="icon"></i></a>
Backlinks デモ</h2>
<p>この投稿へのリンクを <a href="https://blog.cxits.cn/">自己紹介</a> ページから追加しています。</p>
<p>クイックアクションボタンに <code>Backlinks</code> が表示されれば、内部バックリンク索引は正常に動作しています。</p>
<hr />
<p>上記の各モジュールが正しく描画されれば、このブログのリッチテキスト機能は一般的な執筆シナリオの大半をカバーできています。</p>
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn-note1">
<p>脚注は、本文の流れを止めずに補足説明を加えるのに便利です。 <a href="#fr-note1-1">↩</a></p>
</li>
<li id="fn-note2">
<p><a class="external" rel="noopener nofollow noreferrer external" target="_blank" href="https://www.getzola.org/documentation/content/overview/">脚注にはリンクも含められます</a> <a href="#fr-note2-1">↩</a></p>
</li>
</ol>
</section>