高亮支持codemirror

Author: tzfun

README.md

@@ -241,51 +241,51 @@ type为`code`时content类型为字符串，直接传入文本或代码即可
 
 code类型消息支持 `highlight.js` 高亮显示
 
-首先你需要配置 **Highlight.js**
+首先你需要配置 **Highlight.js**，在main.js入口安装，详细配置见[https://www.npmjs.com/package/highlight.js](https://www.npmjs.com/package/highlight.js)
 
 ```js
-import Hljs from 'highlight.js';
-import 'highlight.js/styles/tomorrow-night-bright.css';
-
-let Highlight = {};
-Highlight.install = function (Vue) {
-    Vue.directive('highlight', {
-        inserted: function (el) {
-            let blocks = el.querySelectorAll('pre code');
-            blocks.forEach(block => {
-                let ul = document.createElement("ul");
-                let rowCount = block.outerHTML.split('\n').length;
-                for (let i = 1; i <= rowCount; i++) {
-                    let li = document.createElement("li")
-                    let text = document.createTextNode(i)
-                    li.appendChild(text)
-                    ul.appendChild(li)
-                }
-                ul.className = 'pre-numbering'
-                block.parentNode.appendChild(ul)
-                Hljs.highlightBlock(block)
-            })
-        },
-        componentUpdated: function (el) {
-            let blocks = el.querySelectorAll('pre code');
-            for (let i = 0; i < blocks.length; i++) {
-                Hljs.highlightBlock(blocks[i]);
-            }
-        }
-    })
-};
+import Terminal from 'vue-web-terminal'
+import hljs from 'highlight.js'
+import java from 'highlight.js/lib/languages/java'
+import vuePlugin from "@highlightjs/vue-plugin"
+import 'highlight.js/styles/tomorrow-night-bright.css'
 
-export default Highlight;
+hljs.registerLanguage('java', java)
+Vue.use(vuePlugin)
+Vue.use(Terminal, {highlight: true})
 ```
 
-然后在载入 Terminal 的入口修改配置就可以高亮显示了
+vue2版本推荐
+```json
+{
+  "@highlightjs/vue-plugin": "^1.0.2",
+  "highlight.js": "^10.7.3"
+}
+```
 
-```js
-import Terminal from 'vue-web-terminal'
-import Hljs from '@/Highlight.js'
+#### codemirror 代码高亮
 
-Vue.use(Hljs)
-Vue.use(Terminal, {highlight: true})
+code类型消息也支持 `codemirror` 高亮显示，详细配置见[https://www.npmjs.com/package/vue-codemirror](https://www.npmjs.com/package/vue-codemirror)
+
+同样只需要在main.js入口安装即可，版本推荐：`"vue-codemirror": "^4.0.6"`
+```js
+import VueCodemirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/darcula.css'
+import 'codemirror/mode/clike/clike.js'
+import 'codemirror/addon/edit/closebrackets.js'
+
+Vue.use(VueCodemirror)
+Vue.use(Terminal, {
+    codemirror: {
+        tabSize: 4,
+        mode: 'text/x-java',
+        theme: "darcula",
+        lineNumbers: true,
+        line: true,
+        smartIndent: true
+    }
+})
 ```
 
 ### table

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-terminal",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -28,7 +28,6 @@
     "vue-template-compiler": "^2.6.11",
     "webpack": "^5.69.0",
     "webpack-cli": "^4.9.2",
-    "highlight.js": "^11.4.0",
     "uglifyjs-webpack-plugin": "^2.1.3"
   },
   "eslintConfig": {

src/Terminal.vue

@@ -81,12 +81,14 @@
                   </option>
                 </select>
             </span>
-            <div v-else-if="item.type === 'code'"
-                 style="position: relative;max-height: 500px;overflow: auto;font-size: 20px">
-              <div v-if="$terminalOptions.highlight" v-highlight>
-                <pre style="margin:0 0 0 30px"><code v-html="item.content"></code></pre>
+            <div v-else-if="item.type === 'code'" class="t-code">
+              <div v-if="$terminalOptions.highlight">
+                <highlightjs ref="highlightjs" autodetect :code="item.content"/>
               </div>
-              <div v-else style="background: rgb(39 50 58)">
+              <div v-else-if="$terminalOptions.codemirror">
+                <codemirror ref="codemirror" v-model="item.content" :options="$terminalOptions.codemirror"/>
+              </div>
+              <div v-else style="background: rgb(39 50 58);">
                 <pre style="padding: 1em;margin: 0"><code style="font-size: 15px" v-html="item.content"></code></pre>
               </div>
             </div>

src/css/style.css

@@ -102,4 +102,11 @@ pre {
 
 .t-a:hover {
     color: white;
+}
+
+.t-code {
+    position: relative;
+    max-height: 500px;
+    overflow: auto;
+    font-size: 20px;
 }

yarn.lock

@@ -4634,16 +4634,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^10.7.1:
+highlight.js@^10.7.1, highlight.js@^10.7.3:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
-highlight.js@^11.4.0:
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
-  integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"