Vue页面中的sql语句如何高亮显示

最近新接到一个需求，页面上输入的sql语句要高亮显示。实现这个效果

开始的开始想到用正则去匹配，实现是可以实现但是不能摸鱼了，于是开始面向搜索引擎编程，返现个插件觉得可以实现此功能。于是开始实践。。。

先贴出官网地址highlightjs.org/download/ 说说实现思路 一个input一个div重叠，点击div触发input聚焦，input内容设置透明，获取input内容经过插件处理给到div。

这里我没有npm下载插件，直接用的cdn地址

html代码

<div id="CodeArea">
   <h2>编辑您的代码：</h2>
   <input id="TestCode" v-model="input" ref="child" style=" width: 800px;height: 40px;font-family: monospace; color: #e9eef3; float: left;vertical-align:middle;letter-spacing: 0px;font-size: 14px;  " rows="50" cols="80" @input="refresh()" />
   <div contenteditable="true" id="result"  @click="inputMessage" style=" font-family: 'Courier New', Courier, monospace; width: 800px;height: 40px;line-height: 40px;font-size: 14px; border: 1px solid #ccc; margin-top: -40px;"></div>
</div>

js代码

//点击div使input聚焦
methods:{
           inputMessage() {
            let childMessage = this.$refs.child
            setTimeout(function () {   //因为vue页面使用jquery在DOM未渲染完成之前事件绑定不  上，所有需要延时（jquery不适合在vue页面中使用，但查了好多资料，没找到合适的vux获取input焦点的代码，就果断选择了这个）
            childMessage.focus()
            }, 1)
            },
         refresh() {
           //获取input内容处理之后给到div显示
            var highlightDiv = document.getElementById('result');
            var inputTest = document.getElementById('inputTest')
            var str_sql = document.getElementById('TestCode').value;
	    var format_sql = hljs.highlight('sql', str_sql).value;
	    highlightDiv.innerHTML = "<pre><code class='sql'>" + format_sql
				   + "</code></pre>";
	     }
        },
       created(){     
       //插入script
         const oScript = document.createElement('script');
         oScript.type = 'text/javascript';
         oScript.src = '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js';
         document.body.appendChild(oScript);
        //   this.refresh()
        }

css 部分

//引入样式文件
<style  scoped>
/* @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/androidstudio.min.css'; */
/* @import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark-reasonable.min.css'; */
@import 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/arduino-light.min.css';
</style>

效果

注意 input 和div的字体要一致，不然会出现光标错位现象 font-family: monospace;