monaco-editor配置代码高亮
时间: 2023-11-09 10:09:15 浏览: 51
Monaco Editor 是一个基于 Web 的代码编辑器,它提供了丰富的 API 和功能,同时也支持自定义主题和语法高亮。要配置代码高亮,你需要做以下几步:
1. 安装 monaco-editor 包
你可以通过 npm 或 yarn 安装 monaco-editor 包:
```
npm install monaco-editor
```
或者
```
yarn add monaco-editor
```
2. 引入 monaco-editor 样式文件
在你的 HTML 文件中引入 monaco-editor 的样式文件:
```html
<link rel="stylesheet" href="https://unpkg.com/monaco-editor@0.22.3/min/vs/editor/editor.main.css">
```
3. 引入语言定义文件
Monaco Editor 不会自动加载语言定义文件,你需要手动加载。你可以在这里找到所有支持的语言和它们的语言定义文件:https://github.com/microsoft/monaco-languages
例如,如果你想要支持 JavaScript 语言,你需要加载以下文件:
```html
<script src="https://unpkg.com/monaco-editor@0.22.3/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.22.3/min/vs' }});
require(['vs/editor/editor.main'], function() {
monaco.languages.register({ id: 'javascript' });
monaco.languages.setMonarchTokensProvider('javascript', {
tokenizer: {
root: [
[/\b(function)(\s+)([a-z$][\w$]*)/, ['keyword', null, 'function']],
[/[a-z$][\w$]*/, 'identifier'],
[/\s+/, 'white'],
[/[{}()\[\]]/, '@brackets'],
[/[=><!~?&|+\-*\/%]/, 'operator'],
[/\d+/, 'number'],
[/"([^"\\]|\\.)*$/, 'string.invalid'],
[/"/, 'string', '@string']
]
}
});
monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n console.log("Hello world!");\n}',
language: 'javascript'
});
});
</script>
```
4. 自定义主题
你可以在 monaco-editor 中使用自定义主题。你可以在这里找到所有支持的主题:https://github.com/microsoft/vscode/tree/master/extensions/theme-defaults/themes
例如,如果你想要使用 VS Code 的 Dark+ 主题,你需要加载以下文件:
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/vs2015.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@monaco-editor/react@3.8.0/min/vs/editor/editor.main.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@monaco-editor/react@3.8.0/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/@monaco-editor/react@3.8.0/min/vs' }});
require(['vs/editor/editor.main'], function() {
const theme = 'vs-dark-plus';
// 加载主题样式文件
fetch(`https://cdn.jsdelivr.net/npm/@monaco-editor/react@3.8.0/min/vs/editor/editor.${theme}.min.css`)
.then(res => res.text())
.then(css => {
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
});
// 加载语言定义文件和代码高亮样式文件
Promise.all([
fetch('https://cdn.jsdelivr.net/npm/@monaco-editor/react@3.8.0/min/vs/basic-languages/javascript/javascript.min.js').then(res => res.text()),
fetch('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/languages/javascript.min.js').then(res => res.text())
])
.then(([jsLangDef, jsHighlightDef]) => {
monaco.languages.register({ id: 'javascript' });
monaco.languages.setMonarchTokensProvider('javascript', {
tokenizer: {
root: [
[/\b(function)(\s+)([a-z$][\w$]*)/, ['keyword', null, 'function']],
[/[a-z$][\w$]*/, 'identifier'],
[/\s+/, 'white'],
[/[{}()\[\]]/, '@brackets'],
[/[=><!~?&|+\-*\/%]/, 'operator'],
[/\d+/, 'number'],
[/"([^"\\]|\\.)*$/, 'string.invalid'],
[/"/, 'string', '@string']
]
}
});
monaco.editor.defineTheme(theme, {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'delimiter', foreground: '569cd6' },
{ token: 'keyword', foreground: 'c586c0' },
{ token: 'identifier', foreground: '9cdcfe' },
{ token: 'number', foreground: 'b5cea8' },
{ token: 'string', foreground: 'ce9178' },
{ token: 'operator', foreground: 'd4d4d4' }
]
});
monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n console.log("Hello world!");\n}',
language: 'javascript',
theme
});
hljs.registerLanguage('javascript', () => ({
keywords: {
keyword: 'break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new null package private protected public return static super switch this throw true try typeof var void while with yield',
literal: 'null undefined true false NaN Infinity'
},
contains: [
hljs.HASH_COMMENT_MODE,
hljs.C_LINE_COMMENT_MODE,
hljs.C_BLOCK_COMMENT_MODE,
hljs.APOS_STRING_MODE,
hljs.QUOTE_STRING_MODE,
hljs.NUMBER_MODE,
{
beginKeywords: 'function', end: /\{/, excludeEnd: true,
contains: [
hljs.TITLE_MODE,
{
className: 'params',
begin: /\(/, end: /\)/,
contains: [
hljs.APOS_STRING_MODE,
hljs.QUOTE_STRING_MODE,
hljs.NUMBER_MODE,
hljs.TITLE_MODE
]
}
]
},
{
beginKeywords: 'class', end: /\{/, excludeEnd: true,
contains: [
hljs.TITLE_MODE,
{
beginKeywords: 'extends',
endsWithParent: true,
contains: [hljs.TITLE_MODE]
}
]
}
]
}));
hljs.initHighlightingOnLoad();
});
});
</script>
```
以上代码中的 `theme` 变量指定了要使用的主题,你可以自由更改。`monaco.editor.defineTheme` 方法用于定义主题,它接受一个对象作为参数,该对象包含了主题的配置信息。在这个例子中,我们重写了一些规则来更改颜色方案。
5. 创建编辑器实例
最后,你需要创建一个编辑器实例,并指定要使用的语言和主题:
```html
<div id="container" style="height: 400px;"></div>
<script>
monaco.editor.create(document.getElementById('container'), {
value: 'function hello() {\n console.log("Hello world!");\n}',
language: 'javascript',
theme: 'vs-dark-plus'
});
</script>
```
以上就是在 monaco-editor 中配置语法高亮的基本步骤。你可以按照以上方式配置任意支持的语言和主题。