i see al code black

[lucabecchetti]

editor works, but I see all code black, where is the problem? no keyword highlight! I tried html, javascript, etc...

[Attacler]

Hey there, i had the same for javascript, you can fix it by installing the webpack plugin

[FE-Mars]

Add the Monaco Webpack plugin monaco-editor-webpack-plugin to your webpack.config.js

[ruhshan-abir]

In my case no syntax highlighting or suggestion are showing. And syntaxes are starting from the middle of the editor.

Here is my webpack.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['javascript']
    })
  ]
}

And vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml']
      }
    ])
  }
}

And my template:

<template>
  <div>
    <MonacoEditor
      width="800"
      height="500"
      theme="vs"
      language="javascript"
      :options="options"
      @change="onChange"
    ></MonacoEditor>
  </div>
</template>

<script>
import api from "./backend-api";
import MonacoEditor from "monaco-editor-vue";

export default {
  name: "Lesson",
  components: {
    MonacoEditor,
  },
  created() {
    this.lesson = api.getLesson(this.$route.params.lessonId);
  },

  data() {
    return {
      lesson: {},
      options: {
        value: "",
        language: "javascript",
      },
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
  },
};
</script>

Thanks in advance.

[saumyasinghal747]

Remove default CSS from App.vue to fix the alignment.

I am having the same problem with syntax highlighting however. Did anyone find a solution? My code is very similar to @ruhshan-abir .

[jlebard]

Same problem, no highlights

[Attacler]

Hey there, i had the same for javascript, you can fix it by installing the webpack plugin

Hey guys, i already gave the solution before.
please read the issue first before creating comments.

[peterje]

I also am not getting syntax highlighting. monaco-editor-webpack-plugin is already installed.

// vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml']
      }
    ])
  }
}

[OsirisFrik]

I have the same problem

https://github.com/OsirisFrik/test-monaco-editor-vue

[ckrieger]

Probably a bit late, but the solution is to use the correct version of the monaco-editor-webpack-plugin (1.8.* in this case). See the version matrix here: https://www.npmjs.com/package/monaco-editor-webpack-plugin.