Update: ヘルプドキュメントで Markdown の GitHub Alert 拡張表記を使えるようにする

README.md

@@ -50,7 +50,8 @@ Windows・macOS 搭載の PC に対応しています。
 > Intel CPU 搭載 Mac はすでに製造が終了しており、検証環境やビルド環境の用意自体が難しくなってきています。なるべく Apple Silicon 搭載 Mac での利用をおすすめいたします。
 
 > [!WARNING]
-> Windows 10 では、バージョン 22H2 での動作確認のみ行っています。**サポートが終了した Windows 10 の古いバージョンでは、AivisSpeech Engine がクラッシュし起動に失敗する事例が報告されています。**  
+> Windows 10 では、バージョン 22H2 での動作確認のみ行っています。  
+> **サポートが終了した Windows 10 の古いバージョンでは、AivisSpeech Engine がクラッシュし起動に失敗する事例が報告されています。**  
 > セキュリティ上の観点からも、Windows 10 環境の方は最低限バージョン 22H2 まで更新してからの利用を強くおすすめいたします。
 
 ## サポートされている音声合成モデル

package.json

@@ -57,7 +57,8 @@
     "glob": "11.0.0",
     "hotkeys-js": "3.13.6",
     "immer": "9.0.21",
-    "markdown-it": "13.0.2",
+    "markdown-it": "14.1.0",
+    "markdown-it-github-alerts": "0.3.0",
     "move-file": "3.0.0",
     "multistream": "4.1.0",
     "pixi.js": "7.4.0",
@@ -69,8 +70,8 @@
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
     "vue": "3.5.13",
-    "vuedraggable": "4.1.0",
     "vue-router": "4.4.0",
+    "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "zod": "3.22.4"
   },

public/qAndA.md

@@ -14,7 +14,8 @@ macOS: macOS 13 Ventura 以降
 > Intel CPU 搭載 Mac はすでに製造が終了しており、検証環境やビルド環境の用意自体が難しくなってきています。なるべく Apple Silicon 搭載 Mac での利用をおすすめいたします。
 
 > [!WARNING]
-> Windows 10 では、バージョン 22H2 での動作確認のみ行っています。**サポートが終了した Windows 10 の古いバージョンでは、AivisSpeech Engine がクラッシュし起動に失敗する事例が報告されています。**  
+> Windows 10 では、バージョン 22H2 での動作確認のみ行っています。  
+> **サポートが終了した Windows 10 の古いバージョンでは、AivisSpeech Engine がクラッシュし起動に失敗する事例が報告されています。**  
 > セキュリティ上の観点からも、Windows 10 環境の方は最低限バージョン 22H2 まで更新してからの利用を強くおすすめいたします。
 
 ## インストールに関する質問

src/plugins/markdownItPlugin.ts

@@ -1,6 +1,8 @@
 import { Plugin, inject, InjectionKey } from "vue";
 import MarkdownIt from "markdown-it";
+import MarkdownItGitHubAlerts from "markdown-it-github-alerts";
 import { UnreachableError } from "@/type/utility";
+import "markdown-it-github-alerts/styles/github-base.css";
 
 const markdownItKey: InjectionKey<MarkdownIt> = Symbol("_markdownIt_");
 
@@ -18,6 +20,7 @@ export const markdownItPlugin: Plugin = {
       html: true,
       linkify: true,
     });
+    md.use(MarkdownItGitHubAlerts)
 
     // 全てのリンクに_blankを付ける
     // https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer

src/styles/_index.scss

@@ -182,6 +182,14 @@ img {
   }
 }
 .markdown {
+  // アラートの色
+  // ref: https://github.com/antfu/markdown-it-github-alerts/blob/main/styles/github-colors-dark-class.css
+  --color-note: #2f81f7;
+  --color-tip: #3fb950;
+  --color-warning: #d29922;
+  --color-severe: #db6d28;
+  --color-caution: #f85149;
+  --color-important: #a371f7;
   // h1-h6のスタイルをデフォルトに戻す
   // https://www.w3schools.com/tags/tag_hn.asp
   h1,