enhance(frontend): コードブロックのハイライト機能を利用するには言語を明示的に指定させるように (#12681)

* (enhance) コードブロックのハイライトを使用するには言語指定を求める

* Update changelog

* fix

* typo

3 files changed, 25 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee8cbb69bc..14acf9c58e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,8 @@
 - Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
 - Feat: データセーバーでコードハイライトの読み込みを削減できるように
 - Feat: MFMのアニメーション要素（`tada`, `jelly`, `twitch`, `shake`, `spin`, `jump`, `bounce`, `rainbow`）に `delay` オプションを追加
+- Feat: センシティブと判断されたウェブサイトのサムネイルをぼかすように
+  - ウェブサイトをセンシティブと判断する仕組みが動いていないため、summalyProxyを使用しないと機能しません。
 - Enhance: 投稿フォームの絵文字ピッカーをリアクション時に使用するものと同じのを使用するように #12336 #12560
 - Enhance: リアクション用ピン留め絵文字と投稿時の絵文字入力用ピン留め絵文字を分けて設定できるように #12560
 - Enhance: 絵文字のオートコンプリート機能強化 #12364
@@ -53,11 +55,13 @@
 - Enhance: タイムライン上のタブからリスト、アンテナ、チャンネルの管理ページにジャンプできるように
 - Enhance: ユーザー名、プロフィール、お知らせ、ページの編集画面でMFMや絵文字のオートコンプリートが使用できるように
 - Enhance: プロフィール、お知らせの編集画面でMFMのプレビューを表示できるように
-- Feat: センシティブと判断されたウェブサイトのサムネイルをぼかすように
-  - ウェブサイトをセンシティブと判断する仕組みが動いていないため、summalyProxyを使用しないと機能しません。
+- Enhance: 絵文字の詳細ページに記載される情報を追加
+- Enhance: コードブロックのハイライト機能を利用するには言語を明示的に指定させるように
+	- MFMでコードブロックを利用する際に意図しないハイライトが起こらないようになりました
+	- 逆に、MFMでコードハイライトを利用したい際は言語を明示的に指定する必要があります  
+	（例: ` ```js ` → Javascript, ` ```ais ` → AiScript）
 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
-- Enhance: 絵文字の詳細ページに記載される情報を追加
 - Fix: コードエディタが正しく表示されない問題を修正
 - Fix: プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正
 - Fix: 一度に大量の通知が入った際に通知音が音割れする問題を修正
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
index cb0eef0549..2c016e4d7c 100644
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@@ -9,7 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkLoading v-if="!inline ?? true"/>
 	</template>
 	<code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code>
-	<XCode v-else-if="show" :code="code" :lang="lang"/>
+	<XCode v-else-if="show && lang" :code="code" :lang="lang"/>
+	<pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 	<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
 		<div :class="$style.codePlaceholderContainer">
 			<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
@@ -47,6 +48,21 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'))
 	border-radius: .3em;
 }
 
+.codeBlockFallbackRoot {
+	display: block;
+	overflow-wrap: anywhere;
+	color: #D4D4D4;
+	background: #1E1E1E;
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 8px;
+}
+
+.codeBlockFallbackCode {
+	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+}
+
 .codePlaceholderRoot {
 	display: block;
 	width: 100%;
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
index 49189914a0..558856690d 100644
--- a/packages/frontend/src/index.html
+++ b/packages/frontend/src/index.html
@@ -18,7 +18,7 @@
 		http-equiv="Content-Security-Policy"
 		content="default-src 'self';
 			worker-src 'self';
-			script-src 'self';
+			script-src 'self' 'unsafe-eval';
 			style-src 'self' 'unsafe-inline';
 			img-src 'self' data: www.google.com xn--931a.moe localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;
 			media-src 'self' localhost:3000 localhost:5173 127.0.0.1:5173 127.0.0.1:3000;"