VUE中展示代码

CodeMirror

CodeMirror是一款在线代码编辑器，本篇文章只记录展示代码，无在线编辑模块

安装

npm install vue-codemirror --save

main.js引入

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/dracula.css' //主题

• 如下所示，安装codemirror后，在node_modules\codemirror\theme目录下有许多css主题，挑选中意的即可
  

组件封装

组件引用

效果图

• 注意：在使用时想要高度自适应，需要修改codemirror/lib/codemirror.css文件中的样式为高度自适应

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 30px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -30px; margin-right: -30px;
  padding-bottom: 30px;
  height: auto;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
}

.end