【sduoj】代码编辑器的使用

2021SC@SDUSC

前言

SDUOJ 是一个旨在提升山东大学学生编程能力的 Online Judge 平台，势必需要设计一个用于编写代码的输入框组件。在该项目中，我们采用了开源的 Vue-CodeMirror ，作为在线代码编辑器。

CodeMirror简介

CodeMirror是一个用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并带有许多 实现更高级编辑功能的语言模式和插件。
丰富的编程 API和 CSS主题系统可用于自定义 CodeMirror 以适应不同的应用程序，并使用新功能对其进行扩展。

安装依赖

Vue-CodeMirror 的安装十分简单，在 VS Code 中打开该项目，在终端中键入以下代码：

npm install vue-codemirror --save

# or
yarn add vue-codemirror

并按下回车，等待依赖安装完成后即可使用。

vue-codemirror 的使用

作为组件引入

在需要使用该依赖的 Vue 文件的 <script /> 中，通过 import 进行引入。

import { codemirror } from 'vue-codemirror'; // 引入组件
import "codemirror/lib/codemirror.css"; // 引入依赖所需的基本样式文件

export default {
	// ...
	components: {
		codemirror, // 在 Vue 页面中注册组件
	},
	// ...
}

书写好以上代码后，即可在该页面的 <template /> 中，通过 <codemirror /> 标签进行使用。
示例代码如下（仅供参考）：

<template>
	<div>
		<codemirror v-model="code" :options="cmOption" />
	</div>
</template>
<script>
import { codemirror } from 'vue-codemirror'; // 引入组件
import "codemirror/lib/codemirror.css"; // 引入依赖所需的基本样式文件

export default {
	name: 'codeEditor',
	components: {
		codemirror, // 在 Vue 页面中注册组件
	},
	data() {
		return {
			code: '',
			cmOption: {
				tabSize: 4,
				indentUnit: 4, // 缩进单位，值为空格数，默认为2
				indentWithTabs: true, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符
				...
			}
		}
	}
}
</script>

功能扩展

上面有提到，CodeMirror 拥有很多不同功能的扩展，用以帮助用户设计满足自身需求的代码编辑器。要使用这些功能，我们需要引入更多的依赖文件。并为 <codemirror /> 添加额外的设置。
下面我将简单介绍几个比较有意思的功能。

编辑器主题

CodeMirror 作为一款扩展性强的在线代码编辑器，其支持自定义不同的主题样式。要使用不同的主题，需要引入不同的样式文件，并在 options 中配置好。
比如，如果我想要让我的 CodeMirror 使用 IntelliJ（IDEA） 的主题风格，我需要在代码中引入对应的样式文件：

// theme css
import "codemirror/theme/idea.css"; // 所有的样式文件均位于 `codemirror/theme/${themeName}.css` 下

并在 options 中记录下来：

data() {
	return {
		... ,
		cmOption: {
			... ,
			theme: "idea",
			... 
		}
	}
}

配置 CodeMirror 的主题非常简单，下面给几个不同主题的样式预览作为参考。

• panda-syntax
  
• idea
  
• eclipse
  
• darcula
  

除了上述的几种主题，CodeMirror 还具有诸多其他的主题，用户可根据自身需要进行选择。

语法高亮

针对不同的语言，CodeMirror 可以对不同的语法进行高亮显示。

// language
import "codemirror/mode/brainfuck/brainfuck.js"; // brainfuck
import "codemirror/mode/clike/clike.js"; // C, C++, Java, C#, Scala, Kotlin, Object-C++ 等
import "codemirror/mode/cmake/cmake.js"; // cmake
import "codemirror/mode/css/css.js"; // css
import "codemirror/mode/python/python.js"; // Python
import "codemirror/mode/go/go.js"; // GoLang
import "codemirror/mode/javascript/javascript"; // JavaScript
import "codemirror/mode/jsx/jsx"; // JSX
...

所有支持的语言均位于 codemirror/mode/ 下。
引入不同的语法高亮后，仍需要对 codemirror 组件的 options 进行设置。
在其 options 的 mode 字段下，填写对应不同语法的字符串。
这些字符串会在上面给出的语法高亮的 js 文件中给出。
比如：

• C语言：text/x-c
• C++：text/x-c++src
• Java：text/x-java
• Python：text/x-python
• …

显示效果如下：

• Java
  
• C++
  
• C语言
  
• Python