@ampless/plugin-mermaid 0.1.0-beta.1 → 0.1.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.ja.md +2 -0
- package/README.md +2 -0
- package/package.json +1 -1
package/README.ja.md
CHANGED
|
@@ -64,6 +64,8 @@ mermaidPlugin({
|
|
|
64
64
|
|
|
65
65
|
**固定。** 明示テーマ（例: `theme: 'dark'`）を渡すと、サイトのスキームに関わらずそのテーマに固定され、ライブ再描画も無効になります。従来の既定 `'default'` でのライトページ出力は不変です。
|
|
66
66
|
|
|
67
|
+
> **カスタムダークテーマの注意。** `'auto'` は `data-color-scheme` / `prefers-color-scheme` のシグナルで判定し、テーマの見た目の暗さは見ません。テーマがダークなデザインでも `<html>` に `data-color-scheme="dark"` を設定していない場合、`'auto'` は light と判定して mermaid が明テーマ（暗い文字）になり、ダーク背景と衝突します。その場合は `theme: 'dark'` を固定してください（またはテーマ側で `data-color-scheme="dark"` を設定）。
|
|
68
|
+
|
|
67
69
|
## コードブロックの検出方法
|
|
68
70
|
|
|
69
71
|
描画後の投稿 HTML から `<pre><code class="language-mermaid">` を探します。ampless のツールバーにあるコードブロック単位の **言語エディタ**が `language-*` クラスを付与し、どの本文フォーマットでも同じ形に着地します:
|
package/README.md
CHANGED
|
@@ -64,6 +64,8 @@ The scheme is detected at runtime, in this order:
|
|
|
64
64
|
|
|
65
65
|
**Pinning.** Pass an explicit theme (e.g. `theme: 'dark'`) to pin that theme regardless of the site scheme and disable the live re-render. Light-page output with the previous `'default'` default is unchanged.
|
|
66
66
|
|
|
67
|
+
> **Custom dark themes:** `'auto'` keys off the `data-color-scheme` / `prefers-color-scheme` signal, **not** the theme's visual darkness. If your theme renders a dark design but doesn't set `data-color-scheme="dark"` on `<html>`, `'auto'` resolves to light and mermaid uses its dark-text light theme, which clashes with the dark background. Pin `theme: 'dark'` in that case (or have the theme set `data-color-scheme="dark"`).
|
|
68
|
+
|
|
67
69
|
## How code blocks are detected
|
|
68
70
|
|
|
69
71
|
The plugin looks for `<pre><code class="language-mermaid">` in the rendered post HTML. The ampless toolbar's per-code-block **language editor** writes the `language-*` class, and all body formats land on the same shape:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ampless/plugin-mermaid",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.2",
|
|
4
4
|
"description": "Mermaid diagram plugin for ampless — renders `code.language-mermaid` blocks on the public site as diagrams via a lazily CDN-loaded mermaid.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|