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

一些具體的配置信息，大家可以去搜搜，我這邊只寫了部分