Cleanups, enable syntax highlighting

public/javascripts/a.js

@@ -22,18 +22,10 @@ app = new Vue({
 	data: {
 		text: null,
 		enurl: null,
-		showtg: false,// is show the tugong ICON
-		tgstyle: [],
-	},
-	watch: {
-		showtg: function(status) {
-			status ? this.tgstyle = ['show'] : this.tgstyle = [];
-			if (status) {
-				setTimeout(function() {
-					app.showtg = false;// 显示2秒自动关闭
-				}, 2700);
-			}
-		}
+		easyMDEOpts: {
+			sideBySideFullscreen: false,
+			renderingConfig: { codeSyntaxHighlighting: true },
+		},
 	},
 	methods: {
 		getTempURL: function() {

public/javascripts/view.js

@@ -1,10 +1,15 @@
 Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)
+
 // 查看消息需要用到的JS
 app = new Vue({
 	el: '#app',
 	data: {
 		status: -1,
 		text: null,
+		easyMDEOpts: {
+			toolbar: ['preview'],
+			renderingConfig: { codeSyntaxHighlighting: true },
+		},
 	},
 	mounted: function() {
 		// 从URL获取GUID，然后透过POST获取消息
@@ -18,17 +23,18 @@ app = new Vue({
 		}).catch(function (error) {
 			throw error;
 			alert('发生错误！')
-        });
-    },
-    watch: {
-        status(newVal) {
-            if (newVal !== 1) return;
-            // 获取成功，等待装载并设定编辑器状态
-            this.$nextTick(() => {
-                var easyMDE = this.$refs.preview.getMDEInstance();
-                easyMDE.togglePreview();
-                easyMDE.codemirror.setOption('readOnly', true);
-            });
-        },
-    },
-});
+		});
+	},
+	watch: {
+		status: function(status) {
+			if (status !== 1) return;
+			// 获取成功，等待装载并设定编辑器状态
+
+			this.$nextTick(() => {
+				var easyMDE = this.$refs.preview.getMDEInstance();
+				easyMDE.togglePreview();
+				easyMDE.codemirror.setOption('readOnly', true);
+			});
+		}
+	}
+})

public/stylesheets/style.css

@@ -2,7 +2,7 @@ body { padding-top: 73px; font: 14px "Lucida Grande", Helvetica, Arial, sans-ser
 
 .getbtn { margin-top: -5px; margin-bottom: 10px; padding: 8px 35px; }
 
-pre { font-size: 1.05em; line-height: 1.6em; font-family: Georgia, Cambria, "Times New Roman", Times, serif;}
+#nb-error { font-size: 1.05em; line-height: 1.6em; font-family: Georgia, Cambria, "Times New Roman", Times, serif;}
 footer a { margin-right: 9px }
 footer { margin-bottom: 10px; }
 #zhao { color: red; }

views/error.pug

@@ -1,7 +1,6 @@
 extends layout
-
 block content
   h1= message
   h2= error.status
   h3 出现了一些情况，页面发生错误了。
-  pre #{error.stack}
+  pre#nb-error #{error.stack}

views/imports.pug

@@ -0,0 +1,9 @@
+link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets/styles/github.min.css')
+script(src='https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets/highlight.min.js')
+script(src='https://cdn.jsdelivr.net/npm/highlightjs-vue/dist/highlightjs-vue.cjs.min.js')
+script.
+    hljs.registerLanguage('vue', hljsDefineVue);
+script(src='https://cdn.jsdelivr.net/npm/highlight.svelte/dist/svelte.min.js')
+link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css')
+script(src='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js')
+script(src='/javascripts/vue-easymde.umd.js')

views/index.pug

@@ -1,6 +1,6 @@
 extends layout
 block content
-
+    include imports.pug
     <div id='app'>
         <div class="row">
             <div class='col-md-10 col-xs-12 col-sm-12'>
@@ -8,7 +8,7 @@ block content
                 | <br>然后点一下「去产生」按钮，你就会得到一个长的网址
                 | <br>将这个网址发给你的朋友，他只能看一次
                 | 内容就会 <b>永远消失</b>！ </p>
-                <vue-easymde v-model='text' :options='{sideBySideFullscreen:false}'></vue-easymde>
+                <vue-easymde v-model='text' :options='easyMDEOpts'></vue-easymde>
                 <button :disabled='!text' v-on:click='getTempURL' class="btn btn-primary getbtn">去产生</button>
 
                 <transition name="fade">
@@ -20,20 +20,11 @@ block content
                 hr
                 <p>
                     | <h6>Naiveboom - 让Naive的事情不再发生</h6>
-                    | 这是一个简单的项目，可以一定程度保证你的安全。 <br>
-                    | 举例：你有个链接或者一段文字需要发送给某人<br>但是通过QQ、WeChat这类
-                    if (isZhao)
-                        | 含<span id='zhao' v-on:mouseenter='showtg=true'>赵☭</span>量极高
-                    else
-                        | 被中国严密监管
-                    | 的服务去发送，有的时候会非常不安全，甚至会被查水表。<br>
-                    | <br>现在可以透过这样的一个方案得以解决<br>
+                    | 举例：你有个链接或者一段文字需要发送给某人<br>
                     | 你将私密的链接或者文字粘贴到我们这个页面<br>
                     | 产生一个一次性链接<br>
                     | 阅后即焚<br>
-                    | 嗯，这回你不会被查水表了（确信<br>
                 </p>
-                img(src='/images/zhao.png' id='tg', 'v-bind:class'='tgstyle')
             </div>
         </div>
     </div>
@@ -57,7 +48,4 @@ block content
           </div>
         </div>
     </div>
-        link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css')
-        script(src='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js')
-        script(src='/javascripts/vue-easymde.umd.js')
-        script(src='/javascripts/a.js')
+    script(src='/javascripts/a.js')

views/look.pug

@@ -1,8 +1,9 @@
 extends layout
 block content
+	include imports.pug
 	#app
 		<div v-if='status==1' class='col-md-10 col-xs-12 col-sm-12'>
-		<vue-easymde ref="preview" :value='text' :options='{toolbar:["preview"]}'></vue-easymde>
+			<vue-easymde ref="preview" :value='text' :options='easyMDEOpts'></vue-easymde>
 		</div>
 		<div v-else-if='status==0'>
 		h6 啊喔😯，你查看的内容已经不见了...
@@ -17,7 +18,4 @@ block content
 	//- 输出用于匹配GUID的正则表达式
 	script.
 		reg_guid =  !{locals.reg_guid};
-	link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css')
-	script(src='https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js')
-	script(src='/javascripts/vue-easymde.umd.js')
 	script(src='/javascripts/view.js')