Optimize code highlighting / 优化代码高亮

web_src/src/App.vue

@@ -12,4 +12,5 @@ export default {
 
 <style>
 @import '../static/css/common.css';
+@import '../static/highlight/a11y-light.min.css';
 </style>

web_src/src/components/common/Editormd.vue

@@ -13,25 +13,6 @@
   min-height: 60%;
 }
 
-.markdown-body .kwd {
-  color: #8959a8;
-}
-.markdown-body .com {
-  color: #8e908c;
-}
-.markdown-body .str {
-  color: #718c00;
-}
-.markdown-body code {
-  color: #d14;
-}
-.markdown-body .pln {
-  color: #4d4d4c;
-}
-.markdown-body .typ {
-  color: #4271ae;
-}
-
 .markdown-body h1 {
   font-size: 1.8em !important;
 }
@@ -44,6 +25,12 @@
 .markdown-body h4 {
   font-size: 1.1em !important;
 }
+.markdown-body code {
+  color: #d14;
+}
+.markdown-body pre code {
+  color: #333;
+}
 </style>
 <script>
 import BigImg from '@/components/common/BigImg'
@@ -218,7 +205,8 @@ export default {
           },
           onchange: () => {
             this.deal_with_content()
-          }
+          },
+          previewCodeHighlight: false // 关闭编辑默认的代码高亮模块。用其他插件实现高亮
         }
       }
     }
@@ -248,7 +236,6 @@ export default {
           [
             `${this.editorPath}/../xss.min.js`,
             `${this.editorPath}/lib/marked.min.js`,
-            `${this.editorPath}/lib/prettify.min.js`,
             `${this.editorPath}/lib/underscore.min.js`,
             `${this.editorPath}/lib/sequence-diagram.min.js`,
             `${this.editorPath}/lib/jquery.flowchart.min.js`,
@@ -261,10 +248,6 @@ export default {
             $s(`${this.editorPath}/editormd.js`, () => {
               this.initEditor()
             })
-
-            $s(`${this.editorPath}/../highlight/highlight.min.js`, () => {
-              hljs.initHighlightingOnLoad()
-            })
           }
         )
       }
@@ -356,6 +339,12 @@ export default {
     // 对内容做些定制化改造
     deal_with_content() {
       var that = this
+
+      // 代码高亮
+      $s(`${this.editorPath}/../highlight/highlight.min.js`, () => {
+        hljs.highlightAll()
+      })
+
       // 当表格列数过长时将自动出现滚动条
       $.each($('#' + this.id + ' table'), function() {
         $(this).prop(

web_src/static/highlight/a11y-light.min.css

@@ -0,0 +1 @@
+.hljs-comment,.hljs-quote{color:#696969}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#d91e18}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#aa5d00}.hljs-attribute{color:#aa5d00}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:green}.hljs-section,.hljs-title{color:#007faa}.hljs-keyword,.hljs-selector-tag{color:#7928a1}.hljs{display:block;overflow-x:auto;background:#fefefe;color:#545454;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-builtin-name,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}