vue中显示原网页代码--codemirror

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在项目中遇到了一个需求，后台返回string类型的html源码，要求前端这边按照codeview这种类型把这个源码展示出来。现总结如下

1.如果没啥样式的需求，只是要求该缩进缩进的话，可以直接使用innerText属性，然后给你这个包裹了html源码的div加上white-space:pre;就可以了。效果如下：

2.如果要求你的源码可以编辑并且按照codeview的那种主题样式展示可以使用codemirror插件

我是在vue中使用的

1.首先安装vue-codemirror

npm install vue-codemirror --save

2.在main.js中使用

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css' //这个是你设置了什么主题，就要对应的在main.js中引入主题的css

3.在对应的组件中使用

html部分
<codemirror
ref="myCm"
:value="resArr" //对应的值
:options="cmOptions" //对应的配置
class="code"
></codemirror>js部分
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/python/python.js")
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js') cmOptions:{
value:'',
//mode:'text/html',//模式
theme:'darcula', //主题
indentUnit:2,
smartIndent:true,
tabSize:4,
readOnly:true, //只读
showCursorWhenSelecting:true,
lineNumbers:false, //是否显示行数
firstLineNumber:1
},this.resArr = res;

效果：

注意：我们在使用的时候，想要高度自适应，这个时候需要在

codemirror/lib/codemirror.css 文件中将样式改为

.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: auto;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
height: auto;
overflow-y: hidden;
overflow-x: auto;
}

一些具体的配置信息，大家可以去搜搜，我这边只写了部分