FE-Mars/monaco-editor-vue

highlight doesn't work!

Closed this issue · 1 comments

I try it with json language like following, but it seems not work.

<template>
  <div id="app">
    <MonacoEditor width="800"
      height="500"
      theme="vs"
      language="json"
      :options="options"
      @change="onChange"></MonacoEditor>
  </div>
</template>
 
<script>
import MonacoEditor from "monaco-editor-vue";
export default {
  name: "App",
  components: {
    MonacoEditor
  },
  data() {
    return {
      options: {
        //Monaco Editor Options
      }
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    }
  }
};
</script>

This is total a new project created by vue-cli.

Just found the solution by reading the documentation.

Choose OPTION 1.

Before you use this component, you should do the following.

  • 01
// install the package
cnpm i monaco-editor-webpack-plugin -D
  • 02
// webpack.base.config.js
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
...
module.exports = {
    ...
    plugins: [new MonacoWebpackPlugin()]
}

Sorry for disturbing you.