A component for using CodeMirror6 with Vue. Unrelated to surmon-china's vue-codemirror, it is for CodeMirror6.
If you are using Vue2, please use 0.1.2. (The component itself supports both, but the script generated by vue-demi can only output one)
This component can handle bidirectional binding by v-model like a general Vue component. When using with Vue2, @vue/composition-api is required separately.
| Props | Type | Information |
|---|---|---|
| dark | boolean | Toggle Darkmode. If you use Vuetify, I recommend that you enter $vuetify.theme.dark. |
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use @codemirror/theme-one-dark, import oneDark and put it in this prop. |
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
| editable | boolean | When this is set to false, it is similar to readonly, except that the cursor is not displayed like the normal pre tag. |
| lang | LanguageSupport | The language you want to have syntax highlighting. see https://codemirror.net/6/#languages |
| phrases | Record<string, string> | Specify here if you want to make the displayed character string multilingual. see https://codemirror.net/6/examples/translate/ |
| extensions | Extension[] | Includes enhancements to extend CodeMirror. Such as @codemirror/basic-setup. |
| linter | Diagnostic[] | Set Linter. see example https://codesandbox.io/s/f6nb0?file=/src/index.js |
Notice: lang and linter can also be set together in extensions. This is defined for usability compatibility with past CodeMirrors.
@codemirror/lang-cpp@codemirror/lang-html@codemirror/lang-java@codemirror/lang-javascript@codemirror/lang-json@codemirror/lang-lezer@codemirror/lang-markdown@codemirror/lang-php@codemirror/lang-python@codemirror/lang-rust@codemirror/lang-sql@codemirror/lang-xml
Mark up as follows to make it work at a minimum.
<template> <code-mirror v-model="value" /> </template> <script> import { ref, defineComponent } from 'vue'; import CodeMirror from 'vue-codemirror6'; export default defineComponent({ components: { CodeMirror, }, setup() { const value = ref('Cozy lummox gives smart squid who asks for job pen.'); return { value }; }, }); </script>The contents of the slot will overwrite the existing v-model. For this reason, it is recommended to use it when simply displaying with a readonly prop without using v-model.
Also, insert a <pre> tag to prevent the text in the slot from being automatically formatted.
<template> <code-mirror :lang="lang" :editable="false"> <pre> { "key": "value" }</pre > </code-mirror> </template> <script> import { ref, defineComponent } from 'vue'; import { json } from '@codemirror/lang-json'; import CodeMirror from 'vue-codemirror6'; export default defineComponent({ components: { CodeMirror, }, setup() { const lang = ref(json()); return { lang }; }, }); </script>When using as a Markdown editor on Vuetify.
<template> <code-mirror v-model="value" :lang="lang" :phrases="phreses" :extensions="extensions" :dark="$vuetify.theme.dark" /> </template> <script lang="ts"> import { ref, type Ref, defineComponent } from 'vue'; // Load component import CodeMirror from 'vue-codemirror6'; // CodeMirror extensions import type { LanguageSupport } from '@codemirror/language'; import { markdown } from '@codemirror/lang-markdown'; import { basicSetup } from '@codemirror/basic-setup'; import type { Extension } from '@codemirror/state'; import type { ViewUpdate } from '@codemirror/view'; export default defineComponent({ components: { CodeMirror, }, setup() { /** text */ const value: Ref<string> = ref(''); /** * CodeMirror Language * * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language} */ const lang: Ref<LanguageSupport> = ref(markdown()); /** * Internationalization Config. * In this example, the display language to Japanese. * * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization} */ const phrases: Ref<Record<string, string>> = ref({ // @codemirror/view 'Control character': '制御文字', // @codemirror/fold 'Folded lines': '折り畳まれた行', 'Unfolded lines': '折り畳める行', to: '行き先', 'folded code': '折り畳まれたコード', unfold: '折り畳む解除', 'Fold line': '行を折り畳む', 'Unfold line': '行の折り畳む解除', // @codemirror/search 'Go to line': '行き先の行', go: 'OK', Find: '検索', Replace: '置き換え', next: '▼', previous: '▲', all: 'すべて', 'match case': '一致条件', regexp: '正規表現', replace: '置き換え', 'replace all': 'すべてを置き換え', close: '閉じる', 'current match': '現在の一致', 'on line': 'した行', // @codemirror/lint Diagnostics: 'エラー', 'No diagnostics': 'エラーなし', }); /** * CodeMirror Extensions * * @see {@link:https://codemirror.net/6/docs/ref/#state.Extension | Extending Editor State} */ const extensions: Ref<Extension[]> = ref([ /** @see {@link:https://codemirror.net/6/docs/ref/#basic-setup | basic-setup} */ basicSetup, ]); return { value, lang, phrases, extensions, }; }, }); </script>