✨Markdown displays rendered html by default.

src/components/markdown/index.vue

@@ -52,10 +52,23 @@ export default {
       console.log("not mounted init");
     }
   },
+  watch: {
+    source(val) {
+      if (val) {
+        this.initWithMd();
+      }
+    },
+  },
   methods: {
+    handler(source) {
+      if (source) {
+        source = source.replace(/---\n([\s\S]*)---\n/, "");
+      }
+      return source;
+    },
     // 使用 md 初始化
     initWithMd() {
-      this.markedHTML = this.marked(this.source);
+      this.markedHTML = this.marked(this.handler(this.source));
     },
     // 使用 url 初始化
     async initWithUrl() {

src/views/common/BreadCrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <nav
-      class="breadcrumb level g2-breadcrumb is-hidden-mobile is-hidden-touch"
+      class="breadcrumb level g2-breadcrumb is-hidden-mobile"
       aria-label="breadcrumbs"
     >
       <div class="level-left">

src/views/page/GoText.vue

@@ -1,60 +1,96 @@
 <template>
   <div class="content g2-content">
-    <codemirror v-model="content" :options="cmOptions" />
+    <codemirror
+      v-if="!ismd || isEdit || loaded"
+      v-show="!ismd || isEdit"
+      v-model="content"
+      :options="options"
+    />
+    <markdown
+      v-if="ismd"
+      v-show="!isEdit"
+      :source="content"
+    />
+    <a
+      v-if="ismd"
+      class="g2-content-edit is-hidden-mobile"
+      @click="edit"
+    >
+      <i
+        :class="'fa' + (isEdit ? ' fa-eye' : ' fa-pencil-square-o')"
+        aria-hidden="true"
+      ></i>
+    </a>
   </div>
 </template>
 
 <script>
 import { get_file, decode64 } from "@utils/AcrouUtil";
-import { codemirror } from 'vue-codemirror'
+import { codemirror } from "vue-codemirror";
 
 // import base style
-import 'codemirror/lib/codemirror.css'
+import "codemirror/lib/codemirror.css";
 // import language js
-import 'codemirror/mode/javascript/javascript.js'
+import "codemirror/mode/javascript/javascript.js";
 // import theme style
-import 'codemirror/theme/base16-dark.css'
+import "codemirror/theme/base16-dark.css";
 export default {
-  data: function () {
+  data: function() {
     return {
       path: "",
       content: "",
-      cmOptions: {
+      options: {
         tabSize: 4,
-        mode: 'text/javascript',
+        mode: "text/javascript",
         // theme: 'base16-dark',
         lineNumbers: true,
-        line: true
+        line: true,
-      }
+      },
+      isEdit: false,
+      loaded: false,
     };
   },
-  activated () {
+  activated() {
     this.render();
   },
   computed: {
-    url () {
+    url() {
       if (this.$route.params.path) {
         return decode64(this.$route.params.path);
       }
-      return ''
+      return "";
-    }
+    },
+    ismd() {
+      return this.url.match(".*\\.(md|MD)$");
+    },
   },
   components: {
-    codemirror
+    codemirror,
   },
   methods: {
-    render () {
+    render() {
       let path = this.url;
       this.content = this.$t("page.text.loading");
-      get_file({ path: path, file: {} }, data => {
+      get_file({ path: path, file: {} }, (data) => {
         this.content = data;
       });
-    }
+    },
-  }
+    edit() {
+      this.loaded = true;
+      this.isEdit = !this.isEdit;
+    },
+  },
 };
 </script>
 <style lang="scss">
 .CodeMirror {
   height: 650px;
 }
-</style>
+</style>
+<style lang="scss" scoped>
+.g2-content-edit {
+  position: absolute;
+  top: 10px;
+  right: 0;
+}
+</style>