Update dependencies 🚀

src/client/pages/page-editor/page-editor.vue

@@ -76,7 +76,7 @@
 	<mk-container :body-togglable="true" :expanded="true">
 		<template #header><fa :icon="faCode"/> {{ $t('script') }}</template>
 		<div>
-			<prism-editor v-model="script" :line-numbers="false" language="js"/>
+			<prism-editor class="_code" v-model="script" :highlight="highlighter" :line-numbers="false"/>
 		</div>
 	</mk-container>
 </div>
@@ -85,9 +85,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as XDraggable from 'vuedraggable';
-import "prismjs";
+import 'prismjs';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
 import 'prismjs/themes/prism-okaidia.css';
-import PrismEditor from 'vue-prism-editor';
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 import { faICursor, faPlus, faMagic, faCog, faCode, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
@@ -416,7 +420,11 @@ export default Vue.extend({
 
 		removeEyeCatchingImage() {
 			this.eyeCatchingImageId = null;
-		}
+		},
+
+		highlighter(code) {
+			return highlight(code, languages.js, 'javascript');
+		},
 	}
 });
 </script>

src/client/pages/scratchpad.vue

@@ -4,7 +4,7 @@
 	<portal to="title">{{ $t('scratchpad') }}</portal>
 
 	<div class="_panel">
-		<prism-editor v-model="code" :line-numbers="false" language="js"/>
+		<prism-editor class="_code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
 		<mk-button style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><fa :icon="faPlay"/></mk-button>
 	</div>
 
@@ -24,9 +24,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faTerminal, faPlay } from '@fortawesome/free-solid-svg-icons';
-import "prismjs";
+import 'prismjs';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
 import 'prismjs/themes/prism-okaidia.css';
-import PrismEditor from 'vue-prism-editor';
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 import { AiScript, parse, utils, values } from '@syuilo/aiscript';
 import MkContainer from '../components/ui/container.vue';
 import MkButton from '../components/ui/button.vue';
@@ -119,7 +123,11 @@ export default Vue.extend({
 					text: e
 				});
 			}
-		}
+		},
+
+		highlighter(code) {
+			return highlight(code, languages.js, 'javascript');
+		},
 	}
 });
 </script>

src/client/style.scss

@@ -448,6 +448,19 @@ hr {
 	opacity: 0.7;
 }
 
+._code {
+	background: #2d2d2d;
+	color: #ccc;
+	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+	font-size: 14px;
+	line-height: 1.5;
+	padding: 5px;
+}
+
+.prism-editor__textarea:focus {
+	outline: none;
+}
+
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }