前言
code mirror是一个集成度很高的代码嵌入插件，支持python、js、java等多个语法识别，如果有后台支持，可以进行编译工作，这个后面可以试试看。
这篇文章里列了很多codemirror的相关配置：(code mirror配置)[blog.csdn.net/qq_20389175…]
问题提出
查了很多文档，一直没有看到nuxt对这个插件的支持，于是自己就尝试集成了一下，附加代码如下：
问题解决
-
安装依赖
npm install vue-codemirror --save -
nuxt配置
head: {
...
link: [
{ rel: 'stylesheet' ,href: "https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"},
]
},
css: [
// lib css
'codemirror/lib/codemirror.css',
// merge css
'codemirror/addon/merge/merge.css',
// theme css
'codemirror/theme/base16-dark.css',
'codemirror/theme/idea.css'
],
- 页面引入
<template>
<section class="container">
<no-ssr placeholder="Codemirror Loading...">
<codemirror v-model="code"
:options="cmOption"
@cursorActivity="onCmCursorActivity"
@ready="onCmReady"
@focus="onCmFocus"
@blur="onCmBlur">
</codemirror>
</no-ssr>
</section>
</template>
<script>
export default {
data() {
const code = `# for test
# -*- coding: UTF-8 -*-
if __name__ == '__main__':
N = len(a)
print a
for i in range(len(a) / 2):
a[i],a[N - i - 1] = a[N - i - 1],a[i]
print a`;
return {
code,
cmOption: {
tabSize: 4,
foldGutter: true,
styleActiveLine: true,
smartIndent: true,
lineNumbers: true,
line: true,
keyMap: "sublime",
mode: 'python',
theme: 'idea',
indentWithTabs: true,
lineWrapping: true,
extraKeys: {
'F11'(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"))
},
'Esc'(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
}
}
}
}
},
methods: {
onCmCursorActivity(codemirror) {
console.log('onCmCursorActivity', codemirror)
},
onCmReady(codemirror) {
console.log('onCmReady', codemirror)
},
onCmFocus(codemirror) {
console.log('onCmFocus', codemirror)
},
onCmBlur(codemirror) {
console.log('onCmBlur', codemirror)
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
margin: 0 auto;
top: 0;
text-align: left;
}
</style>
这里的更多配置可以参考如下：
mode: "python", // 语言模式
theme: "leetcode", // 主题
keyMap: "sublime", // 快键键风格
lineNumbers: true, // 显示行号
smartIndent: true, // 智能缩进
indentUnit: 4, // 智能缩进单位为4个空格长度
indentWithTabs: true, // 使用制表符进行智能缩进
lineWrapping: true, //
// 在行槽中添加行号显示器、折叠器、语法检测器
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
foldGutter: true, // 启用行槽中的代码折叠
autofocus: true, // 自动聚焦
matchBrackets: true, // 匹配结束符号，比如"]、}"
autoCloseBrackets: true, // 自动闭合符号
styleActiveLine: true, // 显示选中行的样式
效果
