For AI agents: the complete documentation index is available at /vue-codemirror6/llms.txt, the full documentation bundle is available at /vue-codemirror6/llms-full.txt, and this page is available as Markdown at /vue-codemirror6/guide/languages-and-themes.md.
vue-codemirror6
  • English

      • Languages, Linters & Themes

      Languages

      Install a language package and pass its LanguageSupport object to lang:

      <script lang="ts" setup vapor>
import { markdown } from '@codemirror/lang-markdown';
import CodeMirror from 'vue-codemirror6';

const lang = markdown();
</script>

<template>
  <code-mirror basic wrap :lang="lang" />
</template>

      Official language packages include:

      @codemirror/lang-angular, lang-cpp, lang-css, lang-html, lang-java, lang-javascript, lang-json, lang-lezer, lang-markdown, lang-php, lang-python, lang-rust, lang-sql, lang-vue, lang-wast, lang-xml

      Many community packages are also available. See the CodeMirror language list and the list below.

      Community language packages

      Linters

      Pass a LintSource to linter. Add gutter to show a marker on lines with problems.

      <script lang="ts" setup vapor>
import { json, jsonParseLinter } from '@codemirror/lang-json';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('{ "key": "value", }');
</script>

<template>
  <code-mirror v-model="value" basic gutter :lang="json()" :linter="jsonParseLinter()" />
</template>

      For JavaScript, @codemirror/lang-javascript provides esLint(), which can be combined with eslint-linter-browserify:

      import { esLint } from '@codemirror/lang-javascript';
import eslint from 'eslint-linter-browserify';

const linter = esLint(new eslint.Linter(), {
  languageOptions: {
    parserOptions: { ecmaVersion: 2022, sourceType: 'module' }
  },
  rules: { semi: ['error', 'never'] }
});
      PropDescription
      linterThe lint source.
      linter-configLinter configuration such as delay.
      force-lintingRuns the linter immediately instead of waiting for the editor to become idle.
      gutterShows the lint gutter. Has no effect without linter.
      gutter-configLint gutter configuration.

      The number of diagnostics is available as diagnosticCount on the instance, and lint() runs the linter on demand.

      Tip

      In the editor, Ctrl+Shift+M (Cmd+Shift+M on macOS) opens the lint panel and F8 jumps to the next diagnostic.

      Themes and dark mode

      • dark tells CodeMirror that the editor has a dark background, so built-in UI such as the selection and panels use dark colors.
      • theme accepts a style spec object passed to EditorView.theme.
      <script lang="ts" setup vapor>
import CodeMirror from 'vue-codemirror6';

const theme = {
  '&': { fontSize: '14px' },
  '.cm-content': { fontFamily: 'Menlo, monospace' },
  '.cm-gutters': { backgroundColor: 'transparent', border: 'none' }
};
</script>

<template>
  <code-mirror basic :dark="isDark" :theme="theme" />
</template>

      Ready-made themes are usually distributed as extensions. Add them through extensions:

      <script lang="ts" setup vapor>
import { oneDark } from '@codemirror/theme-one-dark';
import CodeMirror from 'vue-codemirror6';
</script>

<template>
  <code-mirror basic dark :extensions="[oneDark]" />
</template>

      Examples: @codemirror/theme-one-dark, @uiw/codemirror-themes, codemirror6-bootstrap-theme.

      Other extensions

      Any CodeMirror Extension can be passed through extensions. They are combined with the extensions generated from the other props.

      <script lang="ts" setup vapor>
import { EditorView } from '@codemirror/view';
import CodeMirror from 'vue-codemirror6';

const extensions = [EditorView.contentAttributes.of({ spellcheck: 'true' })];
</script>

<template>
  <code-mirror basic :extensions="extensions" />
</template>
      Info

      lang and linter could also be passed through extensions. They are separate props for type safety and for compatibility with earlier versions.

      When props change, the component reconfigures the editor automatically. If you change something the component cannot detect, call forceReconfigure() on the instance.