[sduoj] Use of code editor

2021SC@SDUSC

foreword

SDUOJ is an Online Judge platform aimed at improving the programming ability of Shandong University students , so it is necessary to design an input box component for writing code. In this project, we use the open source Vue-CodeMirror as an online code editor.

Introduction to CodeMirror

CodeMirror is a multifunctional text editor implemented in JavaScript for the browser. It is designed specifically for editing code and comes with a number of language modes and plugins for more advanced editing features.
A rich programming API and CSS theme system can be used to customize CodeMirror for different applications and extend it with new features.

install dependencies

The installation of Vue-CodeMirror is very simple. Open the project in VS Code and type the following code in the terminal:

npm install vue-codemirror --save

# or
yarn add vue-codemirror

And press Enter, wait for the dependencies to be installed and then use them.

Use of vue-codemirror

Introduced as a component

<script />In the Vue file that needs to use this dependency , importimport it through .

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

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

After writing the above code, it can be used <template />in the page through the tag. The sample code is as follows ( for reference only ):<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>

function extension

As mentioned above, CodeMirror has many extensions with different functions to help users design code editors that meet their own needs. To use these features, we need to introduce more dependency files. and <codemirror />add .
Below I will briefly introduce a few more interesting functions.

editor theme

As an extensible online code editor, CodeMirror supports customizing different theme styles. To use different themes, you need to introduce different style files and configure them in options .
For example, if I want my CodeMirror to use the theme style of IntelliJ (IDEA), I need to introduce the corresponding style file in the code:

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

And record it in options :

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

Configuring the theme of CodeMirror is very simple. Here are a few previews of the styles of different themes for reference.

• panda-syntax
  
• idea
  
• eclipse
  
• Darcula
  

In addition to the above-mentioned themes, CodeMirror also has many other themes that users can choose according to their own needs.

syntax highlighting

For different languages, CodeMirror can highlight different syntaxes.

// 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
...

All supported languages ​​are located under codemirror/mode/ .
After introducing different syntax highlighting, you still need to set the options of codemirrorthe component . Under the mode field of
its options , fill in strings corresponding to different syntaxes. These strings will be given in the syntax highlighted js file given above. for example:

• C language: text/xc
• C++：text/x-c++src
• Java: text/x-java
• Python：text/x-python
• …

The display effect is as follows:

• Java
  
• C++
  
• C language
  
• Python