HoshiumiHoshiumi wordmark with a thick wave underline. Hoshiumi
ホームHadoop デプロイメント友達ブログについて音楽オタ活の記録

Markdownの強化構文

公開日: 2026-07-31 11:15 更新日: 2026-07-31 11:15 4135文字 21 min read ... ページビュー

跨越星轨的客 avatar

跨越星轨的客

一个记录技术、游戏与生活的星海主题个人博客

62 記事

12 カテゴリー

29 タグ
ホーム Hadoop デプロイメント
カテゴリー タグ アーカイブ
友達 ブログについて 音楽 オタ活の記録
Markdownの強化構文よく使うコマンドを素早く調べるJavaバックエンドフレームワークと共通の依存関係
この記事では、GitHub Flavored Markdownの基本構文、Mermaidチャート、インフォグラフィック、コードハイライト、テキストエフェクト、リマインダーと折りたたみブロック、タグカード、フレンドチェーンとメディアプレーヤー、エクササイズシステム、数式レンダリング、コンテンツ暗号化など、ShokaテーマのMarkdown構文の豊富な拡張機能を紹介します。すべての機能はプロファイルを介して独立して切り替えられ、ダーク/ライトテーマの適応とレスポンシブレンダリングをサポートしており、Markdownコンテンツの表現力とインタラクティブ性が大幅に向上します。

Markdownの

文法サポート

  • GGitHub Flavored Markdown GFM
    • テーブル形式
    • タスク·リスト
    • 削除線
    • 自動リンク

Mermaidグラフ

MarkdownでMermaid 構文を使用したフローチャート、タイミング図、アーキテクチャ図などの描画をサポートします。

```mermaid
flowchart LR
    A[构建时脚本] --> B[JSON 数据文件] --> C[运行时工具函数]
```
flowchart LR
    A[构建时脚本] --> B[JSON 数据文件] --> C[运行时工具函数]

サポートされているグラフのタイプ

  • flowchart / graph -フローチャート
  • sequenceDiagram -タイミングチャート
  • classDiagram-クラス図
  • stateDiagram -状態図
  • erDiagram-ERチャート
  • gantt-ガントチャート
  • pie -円グラフ
  • mindmap-マインドマップ

グラフは自動的にダーク/ライトテーマの切り替えに従います。詳細はMermaid 官方文档を参照。

インフォグラフィック情報グラフ

@antv/infographicを使用してMarkdownで美しいインフォグラフィックを描画することをサポートし、プロセス、比較、階層、統計などのデータを表示できます。

使用方法コードブロック内でinfographicタグを使用し、最初の行でテンプレート名を指定し、YAMLに似た構文でデータを定義します。

```infographic
infographic list-grid-badge-card
data
  title 技术栈
  desc 我的常用技术栈
  items
    - label TypeScript
      desc 类型安全的 JavaScript
      icon mdi/language-typescript
    - label React
      desc 用户界面库
      icon mdi/react
    - label Astro
      desc 现代化静态站点生成器
      icon mdi/rocket-launch
```
infographic list-grid-badge-card
data
  title 技术栈
  desc 我的常用技术栈
  items
    - label TypeScript
      desc 类型安全的 JavaScript
      icon mdi/language-typescript
    - label React
      desc 用户界面库
      icon mdi/react
    - label Astro
      desc 现代化静态站点生成器
      icon mdi/rocket-launch

使用可能なテンプレートのタイプ

  • リストクラス T0 表示リスト

    • list-grid-badge-card-カードグリッドレイアウト
    • list-grid-candy-card-lite-キャンディスタイルカード
    • list-row-horizontal-icon-arrow- 水平アイコンの矢印リスト

  • プロセス/シーケンスクラス T0ステップ、プロセス、またはフェーズを示す

    • sequence-zigzag-steps-underline-text-ジグザグステップ
    • sequence-circular-simple -円形プロセス
    • sequence-roadmap-vertical-simple - 垂直ロードマップ
    • sequence-pyramid-simple-ピラミッド構造

  • クラス

    • compare-binary-horizontal-simple-fold-水平二重コントラスト
    • compare-swot-SWOT 分析
    • compare-hierarchy-left-right-circle-node-pill-badge-レベルの左右比較

  • 階層クラス（hierarchy-*）：ツリー構造を示す

    • hierarchy-tree-tech-style-capsule-item -科学技術スタイルのツリー
    • hierarchy-tree-curved-line-rounded-rect-node-曲線接続ツリー

  • チャートクラスchart-*データの視覚化

    • chart-column-simple-棒グラフ
    • chart-bar-plain-text -棒グラフ
    • chart-pie-plain-text -円グラフ
    • chart-line-plain-text -折れ線グラフ

  • その他

    • quadrant-* - 象限解析図
    • relation-*-関係図

データ·フィールドの説明

  • title-タイトルオプション
  • desc -説明テキストオプション
  • items -エントリの配列で、各エントリは以下を含むことができます。
    • label -メインラベルテキスト
    • value -ファクトチャート·クラス·テンプレート用
    • desc説明テキスト
    • icon-アイコン名フォーマットmdi/icon-name
    • children -サブエントリ階層用

テーマカスタマイズ：

データの後にthemeブロックのカスタムカラーを追加できます。

```infographic
infographic sequence-pyramid-simple
data
  items
    - label 基础层
    - label 中间层
    - label 顶层
theme
  palette
    - #3b82f6
    - #8b5cf6
    - #f97316
```

インフォグラフィックは自動的にダーク/ライトテーマの切り替えに従い、プロジェクトのフルラウンドボディフォントでレンダリングされます。テンプレートと構文はInfographic 官方文档を参照。

Code High lightシングル

  • Shikiによると
  • デュアルテーマ（ダーク/ライト）のサポート
  • 言語マークアップのサポート
  • 行番号表示

例として：

```javascript
function hello() {
  console.log("Hello, world!");
}
```
function hello() {
  console.log("Hello, world!");
}

タイトル自動リンク

すべてのタイトルはクリック可能なアンカーリンクを自動的に生成します。

リンク自動埋め込み

単一行の特別なリンクは自動的に埋め込みコンポーネントに変換されます。

  • Twitter/Xリンク：ツイートコンポーネントの自動埋め込み
  • Code Penリンク：インタラクティブなCode Penデモの自動埋め込み
  • その他のリンク：OGプレビューカードを表示（タイトル、説明、画像など）

例として：

<!-- 独行链接会被嵌入 -->

https://x.com/vercel_dev/status/1997059920936775706

https://codepen.io/botteu/pen/YPKBrJX/

https://github.com/vercel/react-tweet

反爬严格，获取不到元信息的链接

https://zhuanlan.zhihu.com/p/1900483903984243480

<!-- 段落中的链接保持不变 -->

这是一个 [普通链接](https://example.com)，不会被嵌入。

See the Pen YPKBrJX by botteu (@botteu) on CodePen.

github.com

GitHub - vercel/react-tweet: Embed tweets in your React application.

Embed tweets in your React application. Contribute to vercel/react-tweet development by creating an account on GitHub.

https://github.com/vercel/react-tweet
GitHub - vercel/react-tweet: Embed tweets in your React application.

逆クロールが厳しく、メタ情報へのリンクを取得できない

https://zhuanlan.zhihu.com/p/1900483903984243480
zhuanlan.zhihu.com

これは普通链接で埋め込みません。

Shoka 互換のMarkdown 構文

astro-koharuは、Hexo ShokaトピックからMarkdown 拡張構文の豊富なセットを移行し、すべての機能をconfig/site.yamlのcontentプロファイルで独立してオン/オフできます。

テキスト効果（enableShokaEffects）

複数のインラインテキスト装飾効果をサポートします。

|の構文 |の効果 |の説明 |より | ----------------------- | ---------- | ---------------------------------- | | ++文字++ |下線 | <ins>タグ |より | ++文字++{.wavy} |波形下線|は.wavy修飾子をサポート |より | ++文字++{.dot} |フォーカス |は.dot修飾子をサポート |より | ++文字++{.primary} |カラー下線|サポート.primary .success .warning .danger .info | | ==文字== |ハイ | <mark>タグ |より | ~文字~ |下付き文字 | <sub>ラベル、例えばH2O |より | ^文字^ |上付き文字 | <sup>ラベルE= mc 2など |より

効果の例：

これは下線文字 波浪下線 {.wavy} 点マーク {.dot}です

マスタートーン 成功 警告 危険 情報

これはハイライトテキストです。

H2Oは水の化学式であり、E = mc2は質量エネルギーの方程式である。

色文字と特殊スタイルenableShokaAttrs

文字構文を使用して、文字に色とスタイルを追加するには、次の手順に従います。

[红色]{.red} [粉色]{.pink} [橙色]{.orange} [黄色]{.yellow}
[绿色]{.green} [水色]{.aqua} [蓝色]{.blue} [紫色]{.purple} [灰色]{.grey}

[这段文字会有彩虹渐变效果]{.rainbow}

[Ctrl]{.kbd} + [C]{.kbd} 复制，[Ctrl]{.kbd} + [V]{.kbd} 粘贴

[默认]{.label .default} [主要]{.label .primary} [信息]{.label .info}
[成功]{.label .success} [警告]{.label .warning} [危险]{.label .danger}

効果の例：

[赤] {.red} [ピンク] {.pink} [オレンジ] {.orange} [黄色] {.yellow} [緑] {.green} [水色] {.aqua} [青] {.blue} [紫] {.purple} [灰色] {.grey}

このテキストは虹のグラデーション効果があります

[Ctrl] {.kbd} + [C] {.kbd}コピー、[Ctrl] {.kbd} + [V] {.kbd}ペースト

[デフォルト] {.label .default} [メイン] {.label .primary} [] {.label .info} [成功] {.label .success} [警告] {.label .warning} [危険] {.label .danger}

非表示文字 / Spoiler enableShokaSpoiler

这里有一段!!隐藏文字，点击显示!!

这里有一段!!模糊文字，鼠标悬停显示!!{.blur}

効果の例：

ここに隠しテキストがありますをクリックして表示します

の曖昧なテキストが表示されます。マウスオーバーすると {.blur}が表示されます。

  • 既定のモードクリック後にパーティクルが消滅するアニメーションによってテキストが表示されるspoilerjs Web Componentベース
  • .blurモードマウスオーバー時にぼかしが消える

注注釈/ Ruby enableShokaRuby

CJK 文字にを付け、日本语仮名、中国语などに适しています。

{漢字^かんじ}的注音示例

{取り返す^とりかえす}是日语中"取回"的意思

効果の例：

{漢字かんじ}の注音例。{取り返すとりかえす}は日本語で“取り戻す”という意味です。

HTML <ruby>タグとしてレンダリングされ、ブラウザネイティブサポート。

メモブロック/ Note Blocks（enableShokaContainers）

:::構文を使用して、異なるスタイルのリマインダーブロックを作成するには、次の手順に従います。

:::default
这是默认提醒块
:::

:::primary
这是主要提醒块，用于重要提示
:::

:::info
这是信息提醒块
:::

:::success
这是成功提醒块
:::

:::warning
这是警告提醒块
:::

:::danger
这是危险提醒块
:::

:::info no-icon
这是没有图标的信息块
:::

効果の例：

これは、追加情報を提供する情報リマインダブロックです。

これは警告ブロックです。

これは危険警告ブロックです注意してください

サポートされるスタイルdefault、primary、info、success、warning、danger。アイコンを非表示にするには、no-iconを追加します。リマインダーブロック内部では、ネストされたMarkdown 構文をサポートします。

ブロックを/CollT0

+++構文を使用して、折りたたみ可能なコンテンツを作成する<details> + <summary>としてレンダリング。

+++primary 点击展开详细内容
折叠的内容，支持 **Markdown** 格式化。

- 列表项 1
- 列表项 2
+++

+++warning 注意事项
需要注意的内容
+++

+++danger 危险操作
请确保你知道自己在做什么！
+++

効果の例：

点击展开详细内容

Markdownフォーマットをサポートする折りたたまれたコンテンツ。

  • リスト項目 1
  • リスト項目 2
注意事项

注意が必要な内容

サポートされるスタイルprimary、info、success、warning、danger。

タグ/タブ（enableShokaContainers）

;;;構文を使用してタブ切り替えを作成すると、同じIDセットのタグカードが自動的に結合されます。

;;;mygroup JavaScript
```js
console.log('Hello, World!');
```
;;;

;;;mygroup Python
```python
print('Hello, World!')
```
;;;

;;;mygroup Rust
```rust
fn main() {
    println!("Hello, World!");
}
```
;;;

効果の例：

console.log('Hello, World!');
print('Hello, World!')
fn main() {
    println!("Hello, World!");
}
  • ;;;groupId 标签名はタブ·ページを定義し、同じgroupIdのタブは自動的に結合される
  • 最初のラベルデフォルトアクティブ化
  • 任意のMarkdownコンテンツのサポート

フレンドチェーンカード（enableShokaHexoTags）

{% links %}タグを使用して、記事にフレンドチェーンカードグリッドを挿入します。

{% links %}
- site: 博客名称
  url: https://example.com
  owner: 站长昵称
  desc: 站点描述
  image: https://example.com/avatar.png
  color: '#ed788b'
- site: 另一个博客
  url: https://example2.com
  owner: Alice
  desc: 一个热爱技术的博客
  image: https://api.dicebear.com/7.x/avataaars/svg?seed=Alice
  color: '#BEDCFF'
{% endlinks %}

効果の例：

余弦の博客
余弦の博客
FE / ACG / 手工
 示例博客
示例博客
一个热爱技术的博客

カードデータはYAML 形式を使用し、site、url、owner、desc、image、colorフィールドをサポートします。

オーディオプレーヤー（enableShokaHexoTags）

{% media audio %}タグ埋め込みオーディオプレーヤーを使用し、NetEase Cloud Music、QQ Musicなどのプラットフォームをサポートしています（Meting API 解析を介して）。

デフォルトでは、Meting APIとしてhttps://163.hyc.moe/を使用します。config/site.yamlのbgm.metingApiでカスタマイズでき、より安定したサービスのためにセルフデプロイメントを推奨します。

{% media audio %}
- name: 歌曲名称
  url: https://music.163.com/#/song?id=3339210292
{% endmedia %}

効果の例：

プレイリストモードをサポートし、複数のグループを設定できます。

{% media audio %}
- title: 歌单名称 1
  list:
    - https://music.163.com/#/playlist?id=8676645748
- title: 歌单名称 2
  list:
    - https://music.163.com/#/playlist?id=17606384886
{% endmedia %}

ビデオプレーヤー（enableShokaHexoTags）

{% media video %}タグを使用してビデオプレーヤーを埋め込むには：

{% media video %}
- name: 视频 1
  url: https://example.com/video1.mp4
- name: 视频 2
  url: https://example.com/video2.mp4
{% endmedia %}

複数のビデオがある場合に自動的にプレイリストが表示されます。

演習問題システム（enableQuiz）

チュートリアルや学習ノートに適した4 種類のインタラクティブな質問タイプをサポートします。記事 frontmatterでquiz: trueを設定します。

タグ：

- 下列哪个是 JavaScript 的基本数据类型？{.quiz}
  - Object{.options}
  - Array{.options}
  - Symbol{.correct}
  - Function{.options}

> 解析：Symbol 是 ES6 引入的基本数据类型。

効果の例：

  • Java Scriptの基本データ型はどれですか？【QUIZ】
    • Object
    • Array
    • Symbol
    • Function

構文解析：SymbolはES 6で導入されたプリミティブデータ型で、Object、Array、Functionはすべて参照型です。

  • 選択肢フラグが正解、{.options}が干渉項

複数選択：

- 以下哪些是 CSS 布局方式？{.quiz .multi}
  - Flexbox{.correct}
  - jQuery{.options}
  - Grid{.correct}
  - Float{.correct}

> 解析：Flexbox、Grid 和 Float 都是 CSS 布局方式。

効果の例：

  • CSSレイアウトとは何ですか？
    • Flexbox
    • jQuery
    • Grid
    • Float

Flexbox、Grid、FloatはすべてCSSレイアウトです。jQueryはJava Scriptライブラリです。

  • .multiタグの追加複数選択モードの有効化

カテゴリー：

- `const` 声明的变量不能重新赋值，但可以修改其属性。{.quiz .true}

> 解析：`const` 只保证变量绑定不可变。

- HTML 是一种编程语言。{.quiz}

> 解析：HTML 是标记语言，不是编程语言。

効果の例：

  • constで宣言された変数は再割り当てできませんが、そのプロパティは変更できます。

解決：constは変数バインディングが不変であることを保証するだけで、変数がオブジェクトを指している場合、そのプロパティは変更可能です。

  • HTMLはプログラミング言語である。【QUIZ】

構文解析：HTML（Hypertext Markup Language）はマークアップ言語であり、プログラミング言語ではない。

  • .trueを追加するとステートメントが正しく、.trueを追加しないとエラーを意味します。

タグ：

- CSS 中，[Flexbox]{.gap} 适合一维布局，[Grid]{.gap} 适合二维布局。{.quiz .fill}

> 常见错误：[Float]{.mistake}

効果の例：

  • CSSでは、Flexboxは1 次元レイアウトに適しており、Gridは2 次元レイアウトに適している。

よくあるエラー：Float

  • [答案]は正解をマークする複数の空をサポート
  • [错误答案]タグよくあるエラー（初回エラー時に表示）
  • >参照ブロック内容は構文解析説明

数式enableMath

KaTeXに基づいた数式レンダリング。記事 frontmatterでmath: trueを設定する必要があります。

行内公式：$E = mc^2$

块级公式：

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

効果の例：

明細内計算式E=mc2E = mc^2

ブロックレベルの公式

∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}

コードブロックのT0

コードブロックは、追加のメタデータ注釈をサポートします。

```js title="hello.js" url="https://example.com" linkText="查看源码" mark:1,3
const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);
```

```bash command:("$":1-3)
npm install astro
npm run dev
npm run build
```
メタデータ説明
title="文件名"コードブロックタイトルの表示
url="链接"外部ソースリンクの追加
linkText="文字"カスタムリンクテキスト既定はURL
mark:1,3指定した行のハイライト
command:("$":1-3)タグ付きシェルコマンド行`

効果の例：

const greeting = 'Hello';
const name = 'World';
console.log(`${greeting}, ${name}!`);
npm install astro
npm run dev
npm run build

Shoka 機能構成の概要

すべてのShoka 互換機能は、config/site.yamlのcontentセクションで独立してスイッチできます。

content:
  # Shoka 兼容功能（默认全部启用，设为 false 可关闭）
  enableShokaContainers: true   # :::提醒块 ;;;标签卡 +++折叠块
  enableShokaAttrs: true        # text 属性语法
  enableShokaEffects: true      # ++下划线++ ==高亮== ~下标~ ^上标^
  enableShokaSpoiler: true      # !!隐藏文字!!
  enableShokaRuby: true         # {文字^注音} 注音标注
  enableShokaHexoTags: true     # {% links %} {% media %} Hexo 标签
  enableMath: true              # $数学公式$ KaTeX 渲染
  enableCodeMeta: true          # 代码块增强 (title, mark, command)
  enableQuiz: true              # 练习题交互功能
  enableEncryptedBlock: true    # :::encrypted{password="..."} 加密内容块

コンテンツ暗号化enableEncryptedBlock

ブログは、さまざまなコンテンツ保護ニーズを満たす2つの暗号化方法をサポートします。

1. 暗号ブロック--記事部分暗号化

暗号化が必要なコンテンツを:::encrypted{password="..."}構文でラップするには：

这部分内容公开可见。

:::encrypted{password="demo"}
这段内容需要输入密码 "demo" 才能查看。

支持完整的 Markdown 语法，包括代码块、列表、图片等。
:::

这部分也是公开的。

暗号ブロックは、記事の部分での機密コンテンツ（回答、ネタバレ、プライベートメモなど）を隠し、残りのコンテンツを表示するのに適しています。config/site.yamlでenableEncryptedBlock: trueを有効にする必要があります。

2. 暗号化された記事--記事全体暗号化

記事のfrontmatterにpasswordフィールドを追加すると、記事全体が暗号化されます。

---
title: 我的私密文章
date: 2026-01-01
password: mySecretPassword
categories:
  - 笔记
---

这里的所有内容都会被加密...

暗号化された記事には、フルスクリーンのロック解除インターフェイスが表示され、正しいパスワードを入力するとコンテンツが表示されます。コードハイライト、ディレクトリナビゲーション、Mermaidチャートなどの拡張機能は、ロック解除後に自動的に再初期化されます。

セキュリティモデルの説明

暗号化には AES-256-GCM アルゴリズムが使用され、セキュリティモデルは以下の通りです。

  • 構築時暗号化：暗号はpnpm buildの場合のみ暗号化に使用され，生成されたHTMLにはに暗号平文は含まれない.
  • クライアント側での復号化：読者がブラウザにパスワードを入力した後、Web Crypto APIを介してローカルで復号化され、パスワードはどのサーバーにも送信されません。
  • 鍵派生：PBKDF2（100，000 反復）を使用してパスワードから暗号鍵を派生し、ブルートフォースコストを改善
  • 検索除外：暗号化されたコンテンツは自動的にdata-pagefind-ignoreに追加され、Pagefind 検索でインデックス化されません。

️注意：この暗号化設計の主な目的は、標的型攻撃を防ぐことではなく、検索エンジンやクローラーが暗号化コンテンツをインデックス化するのを防ぐことです。暗号文とソルト値は公開 HTMLに埋め込まれており、理論的にはオフラインのブルートフォースで解読できる。機密性の高い情報を保護するためには使用しないでください。

暗号化された記事の特殊な動作

方面行
RSS 購読タイトルの前に接頭辞を付け、“この記事は暗号化されています”ヒント
SEO / metadescription frontmatterのdescriptionを使用（設定されていない場合は共通暗号化プロンプトを表示）
検索インデックス暗号化されたコンテンツはPagefindインデックス化されません
カタログ·ナビゲーションロック解除前は表示されず、ロック解除後は自動再構築
AIダイジェスト暗号化前の原文に基づいて生成（構築時にアクセス可能な平文）

その他の拡張

  • カタログの自動生成
  • 読書時間の計算
  • 外部リンクtarget="_blank"の自動追加{{がいぶりんくtarget="_blank"のじどうついか}}

気に入ったならばコメントを残してくださいね～

... ページビュー
© 2026 跨越星轨的客 @Hoshiumi
Powered by theme astro-koharu · Inspired by Shoka