Я создал собственный язык, используя этот инструмент здесь. Я не знаю, что делать, чтобы загрузить его в свое приложение VueJS. Я попробовал следующее и не получил ошибок, но он также не работает, потому что в инструменте Monarch я получаю синий текст для известных функций и т. д., Но в моем редакторе я этого не делаю. Другие языки работают как положено.
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');
const main = path.resolve(__dirname, './src/test/test.ts');
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript', 'python', 'java', 'python', 'json', 'vb'],
customLanguages: [
{
label: 'test',
entry: main
}
]
})
]
}
...
Я сделал свой файл .ts
, по сути, экспортирующим свойство conf
со всеми переменными или чем-то еще, что используется в tokenizer
. Я также экспортировал свойство language
. Я не совсем уверен, что это правильный формат.
Мой файл .ts
выглядит примерно так:
export const conf = {...}
export const language = {...}
Я не совсем уверен, что здесь делать. Документов мало для пользовательских языков, и, похоже, ничего не работает, кроме того, что я думаю, что у меня, по крайней мере, есть первая часть определения рабочего языка.
Этот плагин Webpack на самом деле не нужен.
На основе примера пользовательский язык вы можете зарегистрировать язык во время выполнения через monaco.languages.setMonarchTokensProvider()
. Второй аргумент функции — это экземпляр IMonarchLanguage
, который соответствует спецификации языка в приведенном вами примере.
<script setup lang = "ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import { ref, onMounted } from 'vue'
/**
* `customLangMonarch` contains the language spec example from
* https://microsoft.github.io/monaco-editor/monarch.html
*/
// @ts-ignore
import customLangMonarch from '@/custom-lang-monarch'
monaco.languages.register({ id: 'custom' })
monaco.languages.setMonarchTokensProvider('custom', customLangMonarch)
const editor = ref()
onMounted(() => {
monaco.editor.create(editor.value, {
language: 'custom',
})
})
</script>