[Client] Improve syntax highlighting

Resolve #3926
Resolve #3390

CHANGELOG.md

@@ -7,6 +7,7 @@ unreleased
 * 外部サービス認証情報の配信
 * 管理画面のモデレーションのUIを強化
 * 管理画面からリモートユーザーの情報を更新できるように
+* シンタックスハイライトの強化
 * 引用投稿を削除したとき単なるRenoteとしてタイムラインに残る問題を修正
 * イタリック構文の判定の改善
 * タイトル構文の判定の改善

package.json

@@ -97,8 +97,8 @@
 		"bootstrap-vue": "2.0.0-rc.11",
 		"cafy": "12.0.0",
 		"chai": "4.2.0",
-		"chalk": "2.4.2",
 		"chai-http": "4.2.1",
+		"chalk": "2.4.2",
 		"commander": "2.19.0",
 		"crc-32": "1.2.0",
 		"css-loader": "1.0.1",
@@ -178,6 +178,7 @@
 		"parsimmon": "1.12.0",
 		"portscanner": "2.2.0",
 		"postcss-loader": "3.0.0",
+		"prismjs": "1.15.0",
 		"progress-bar-webpack-plugin": "1.12.0",
 		"promise-any": "0.2.0",
 		"promise-limit": "2.7.0",
@@ -230,6 +231,7 @@
 		"vue-js-modal": "1.3.28",
 		"vue-loader": "15.5.1",
 		"vue-marquee-text-component": "1.1.1",
+		"vue-prism-component": "1.1.1",
 		"vue-router": "3.0.2",
 		"vue-sequential-entrance": "1.1.3",
 		"vue-style-loader": "4.1.2",

src/client/app/common/views/components/code-core.vue

@@ -0,0 +1,30 @@
+<template>
+<prism :inline="inline" :language="lang">{{ code }}</prism>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import 'prismjs';
+import 'prismjs/themes/prism.css';
+import Prism from 'vue-prism-component';
+
+export default Vue.extend({
+	components: {
+		Prism
+	},
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		lang: {
+			type: String,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		}
+	}
+});
+</script>

src/client/app/common/views/components/code.vue

@@ -0,0 +1,28 @@
+<template>
+<x-code :code="code" :lang="lang" :inline="inline"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	components: {
+		XCode: () => import('./code-core.vue').then(m => m.default)
+	},
+
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		lang: {
+			type: String,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false
+		}
+	}
+});
+</script>

src/client/app/common/views/components/mfm.ts

@@ -6,8 +6,8 @@ import MkUrl from './url.vue';
 import MkMention from './mention.vue';
 import { concat, sum } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
+import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import syntaxHighlight from '../../../../../mfm/syntax-highlight';
 import { host } from '../../../config';
 import { preorderF, countNodesF } from '../../../../../prelude/tree';
 
@@ -170,21 +170,22 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'blockCode': {
-					return [createElement('pre', {
-						class: 'code'
-					}, [
-						createElement('code', {
-							domProps: {
-								innerHTML: syntaxHighlight(token.node.props.code)
-							}
-						})
-					])];
+					return [createElement(MkCode, {
+						key: Math.random(),
+						props: {
+							code: token.node.props.code,
+							lang: token.node.props.lang,
+						}
+					})];
 				}
 
 				case 'inlineCode': {
-					return [createElement('code', {
-						domProps: {
-							innerHTML: syntaxHighlight(token.node.props.code)
+					return [createElement(MkCode, {
+						key: Math.random(),
+						props: {
+							code: token.node.props.code,
+							lang: token.node.props.lang,
+							inline: true
 						}
 					})];
 				}

src/client/app/common/views/components/misskey-flavored-markdown.vue

@@ -24,25 +24,10 @@ export default Vue.extend({
 		background var(--mfmTitleBg)
 		border-radius 4px
 
-	>>> .code
-		margin 8px 0
-
 	>>> .quote
 		margin 8px
 		padding 6px 0 6px 12px
 		color var(--mfmQuote)
 		border-left solid 3px var(--mfmQuoteLine)
 
-	>>> code
-		padding 4px 8px
-		margin 0 0.5em
-		font-size 90%
-		color #525252
-		background var(--bg)
-		border-radius 2px
-
-	>>> pre > code
-		padding 16px
-		margin 0
-
 </style>