From aaee0a788da35dddb5012d150c815e34210ba1ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 22 May 2025 22:57:04 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=B7=E3=83=B3?=
 =?UTF-8?q?=E3=82=BF=E3=83=83=E3=82=AF=E3=82=B9=E3=83=8F=E3=82=A4=E3=83=A9?=
 =?UTF-8?q?=E3=82=A4=E3=83=88=E3=81=AE=E3=82=A8=E3=83=B3=E3=82=B8=E3=83=B3?=
 =?UTF-8?q?=E3=82=92JavaScript=E3=83=99=E3=83=BC=E3=82=B9=E3=81=AE?=
 =?UTF-8?q?=E3=82=82=E3=81=AE=E3=81=AB=E5=A4=89=E6=9B=B4=20(#16084)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): シンタックスハイライトのエンジンをJavaScriptベースのものに変更

* Update Changelog
---
 CHANGELOG.md                                      | 3 +++
 packages/frontend/src/utility/code-highlighter.ts | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3b6b894ca..193bc8ee76 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,9 @@
   (Based on https://github.com/taiyme/misskey/pull/198, https://github.com/taiyme/misskey/pull/211, https://github.com/taiyme/misskey/pull/283)
 - Enhance: ユーザー設定でURLプレビューを無効化できるように
 - Enhance: AiScriptからtoastを表示する関数 `Mk:toast` を追加
+- Enhance: シンタックスハイライトのエンジンをJavaScriptベースのものに変更
+  - フロントエンドの読み込みサイズを軽量化しました
+	- ほとんどの言語のハイライトは問題なく行えますが、互換性の問題により一部の言語が正常にハイライトできなくなる可能性があります。詳しくは https://shiki.style/references/engine-js-compat をご覧ください。
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
 
 ### Server
diff --git a/packages/frontend/src/utility/code-highlighter.ts b/packages/frontend/src/utility/code-highlighter.ts
index 4f2aff9d4c..7dca18d58f 100644
--- a/packages/frontend/src/utility/code-highlighter.ts
+++ b/packages/frontend/src/utility/code-highlighter.ts
@@ -4,7 +4,7 @@
  */
 
 import { createHighlighterCore } from 'shiki/core';
-import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 import darkPlus from 'shiki/themes/dark-plus.mjs';
 import { bundledThemesInfo } from 'shiki/themes';
 import { bundledLanguagesInfo } from 'shiki/langs';
@@ -71,7 +71,7 @@ async function initHighlighter() {
 
 	const jsLangInfo = bundledLanguagesInfo.find(t => t.id === 'javascript');
 	const highlighter = await createHighlighterCore({
-		engine: createOnigurumaEngine(() => import('shiki/onig.wasm?init')),
+		engine: createJavaScriptRegexEngine({ forgiving: true }),
 		themes,
 		langs: [
 			...(jsLangInfo ? [async () => await jsLangInfo.import()] : []),