How to Load Custom Language in Monaco using VueJS/Webpack

Question

I've created a custom language using this tool here. I don't know what to do to load it to my VueJS app. I tried the following and get no errors, but it also doesn't show seem to work, because in the Monarch tool thing I get blue text on known functions etc, but in my editor I don't. Other languages work as expected.

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
          }
        ]
      })
    ]
  }
...

I made my .ts file essentially export a conf property with all the variables or whatever that are used in the tokenizer. I also exported a language property. I'm not totally sure that is the right format.

My .ts file essentially looks like:

export const conf = {...}
export const language = {...}

I'm not totally sure what to do here. Docs are sparse for custom languages and nothing seems to be working other than I think I at least have the first part of defining the language working.

Answer 1

That Webpack plugin isn't actually needed.

Based on the custom language example, you can register the language at runtime via monaco.languages.setMonarchTokensProvider(). The second function argument is an instance of IMonarchLanguage, which matches the language spec in the example you linked.

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

demo w/Vue CLI

demo w/Vite