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;
}

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