【sduoj】代码编辑器的使用_综合

2021SC@SDUSC

文章目录

前言
CodeMirror简介
安装依赖
vue-codemirror 的使用
- 作为组件引入
- 功能扩展
- - 编辑器主题
  - 语法高亮

前言

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, // 缩进单位，值为空格数，默认为2indentWithTabs: 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