[Client] Improve syntax highlighting

Resolve #3926
Resolve #3390

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>