vue项目中使用vue-codemirror

最近开发中的一个需求如下:

  • 类似代码题库,代码展示的区域刚开始用模板字符串和v-html,可以正常显示,但是不可以按代码格式展示,所以去gitHub上找到了vue-codemirror,顺便记录下在vue项目中使用vue-codemirror使用过程

image.png

第一步:安装vue-codemirror

  • 使用npm:npm install vue-codemirror --save
  • 使用yarn:yarn add vue-codemirror
  • 使用cdn:

    <link rel="stylesheet" href="path/to/codemirror/lib/codemirror.css">
    <script type="text/javascript" src="path/to/codemirror.js"></script>
    <script type="text/javascript" src="path/to/vue.min.js"></script>
    <script type="text/javascript" src="path/to/dist/vue-codemirror.js"></script>
    <script type="text/javascript" src="path/to/codemirror/{some-resources}"></script>
    <script type="text/javascript">
        Vue.use(window.VueCodemirror)
    </script>

第二步:全局配置

项目全局main.js文件内引入:

import VueCodemirror from 'vue-codemirror'
// import base style
import 'codemirror/lib/codemirror.css'
// import more codemirror resource...

Vue.use(VueCodemirror, /* {
  options: { theme: 'base16-dark', ... },
  events: ['scroll', ...]
} */)

第三步:组件文件内使用

test.vue文件内使用:

<template>
  <div class="exercise">
      <codemirror
        v-model="codeSnippets"
        :options="cmOptions"
      />
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
export default {
  data() {
    return {
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',  // 模式
        theme: 'base16-dark',  // 主题
        lineNumbers: true,  // 是否显示行数
        line: true,
        viewportMargin: Infinity,  // 处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 2,
        smartIndent: true,
        readOnly: true,  // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1,
        // 更多配置查询 https://codemirror.net/doc/manual.html#config
      },
     codeSnippets:
      `for (var i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 1)
      }

      for (let i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 1)
      }`,
    }
  },
  components: {
    codemirror
  },
}
</script>
<style>  /* 注意:这里的样式需要全局,如果写了scoped会导致样式不生效 */
.CodeMirror {
  border: 1px solid #eee;
  height: auto;  /* 编辑器盒子高度自适应 */
  width: 30%;
}
</style>

不要着急,不要着急,学习,学习一下

9 声望
0 粉丝
0 条评论
推荐阅读
windows10 微软商店 Code: 0x80131500
1. 尝试过的方案(noted: 建议都试下) {代码...} 2. 最终解决方案 {代码...} 3. 不得不吐槽 {代码...}

guyu阅读 519

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20.1k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用&lt;keep-alive&gt;缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.6k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.3k

封面图

不要着急,不要着急,学习,学习一下

9 声望
0 粉丝
宣传栏