Implementing syntax highlighting for YAML in Vue3 with CodeMirror6

I'm attempting to create a YAML editor in a Vue 3 app using CodeMirror 6, and I'm having problems integrating syntax highlighting in it, in particular making string text green, e.g.

description: my description

where My description is green

As a starter, here is my Editor.vue component that implements it.

<script setup>
    import { Codemirror } from 'vue-codemirror'
    import {ref} from 'vue';
    import { yaml } from '@codemirror/lang-yaml'
    import { yamlLinter } from '@/codemirror/yamlLinter'
    import { yamlHints }  from '@/codemirror/yamlHints'
    import { autocompletion } from '@codemirror/autocomplete'
    import dedent from 'dedent'

    const code = ref(dedent`
      name: Internet2
      version: 1
    `)

    /* Editor extensions */
    const extensions = [
        yaml(),
        yamlLinter(),
        autocompletion({
            override: [yamlHints],
            activateOnTyping: true
        }),
    ]
</script>


<template>
    <main class="min-h-screen">
        <div class="w-full max-w-2xl px-4">
            <h1 class="text-3xl font-bold mb-6 text-center">YAML Editor</h1>

            <!-- Codemirror component -->
            <Codemirror
                v-model="code"
                :autofocus="true"
                :indent-with-tab="true"
                :tabSize="2"
                :extensions="extensions"
                style="height: 400px; border: 1px solid black"
                class="w-full max-w-2xl border rounded overflow-auto"
            ></Codemirror>
        </div>
    </main>
</template>

I've tried various implementations, such as really basic with just CSS

<style>
/* scope it to the editor wrapper if you wish */
.cm-string {
  /* Tailwind’s emerald‑500, pick any green you like */
  color: #10b981;
}
</style>

But the problem is that the normal use of the cm-string class is removed by Vite, so instead, you just get

<div class="cm-activeLine cm-line">- <span class="ͼl">description</span>: My description.</div>

I tried something like this

// src/codemirror/greenStrings.js
import { HighlightStyle, tags }      from '@codemirror/highlight'
import { syntaxHighlighting }        from '@codemirror/language'

export const greenStrings = syntaxHighlighting(
  HighlightStyle.define([
    { tag: tags.string, color: '#10b981' }
  ])
)

and then add it in my Editor.vue like this

    import { greenStrings }   from '@/codemirror/greenStrings'

    const code = ref(dedent`
      name: Internet2
      version: 1
    `)

    /* Editor extensions */
    const extensions = [
        yaml(),,
        greenStrings,
        yamlLinter(),
        autocompletion({
            override: [yamlHints],
            activateOnTyping: true
        }),
    ]

or even this

import { EditorView } from '@codemirror/view'

// This applies to whatever minified class CM6 gives strings at runtime
export const greenStrings = EditorView.theme({
  '.cm-line [style*="string"]': { color: '#10b981' }
})

but none work.

The latest version of @codemirror/highlight is 0.19.8, which doesn't seem to work so well with v6.

What is the best way to implement syntax highlighting, since what I'm trying obviously isn't working?

LaryAI

1 year ago

Level 58

To implement syntax highlighting for YAML in a Vue 3 app using CodeMirror 6, you need to ensure that the syntax highlighting extension is correctly configured and applied. Here's a step-by-step guide to achieve this:

Ensure Correct Imports: Make sure you have the necessary CodeMirror packages installed and imported correctly. You need @codemirror/lang-yaml for YAML support and @codemirror/highlight for custom highlighting.
Define a Custom Highlighting Style: Use HighlightStyle from @codemirror/highlight to define a custom style for strings.
Apply the Highlighting Style: Add the custom highlighting style to your editor's extensions.

Here's how you can implement this:

// src/codemirror/greenStrings.js
import { HighlightStyle, tags } from '@codemirror/highlight';
import { syntaxHighlighting } from '@codemirror/language';

// Define a custom highlight style for strings
export const greenStrings = syntaxHighlighting(
  HighlightStyle.define([
    { tag: tags.string, color: '#10b981' } // Tailwind's emerald-500
  ])
);

Integrate the Custom Style in Your Vue Component:

<script setup>
import { Codemirror } from 'vue-codemirror';
import { ref } from 'vue';
import { yaml } from '@codemirror/lang-yaml';
import { yamlLinter } from '@/codemirror/yamlLinter';
import { yamlHints } from '@/codemirror/yamlHints';
import { autocompletion } from '@codemirror/autocomplete';
import { greenStrings } from '@/codemirror/greenStrings';
import dedent from 'dedent';

const code = ref(dedent`
  name: Internet2
  version: 1
`);

/* Editor extensions */
const extensions = [
  yaml(),
  greenStrings, // Add the custom highlighting style here
  yamlLinter(),
  autocompletion({
    override: [yamlHints],
    activateOnTyping: true
  }),
];
</script>

<template>
  <main class="min-h-screen">
    <div class="w-full max-w-2xl px-4">
      <h1 class="text-3xl font-bold mb-6 text-center">YAML Editor</h1>

      <!-- Codemirror component -->
      <Codemirror
        v-model="code"
        :autofocus="true"
        :indent-with-tab="true"
        :tabSize="2"
        :extensions="extensions"
        style="height: 400px; border: 1px solid black"
        class="w-full max-w-2xl border rounded overflow-auto"
      ></Codemirror>
    </div>
  </main>
</template>

Check for Compatibility: Ensure that all your CodeMirror packages are up-to-date and compatible with each other. Sometimes, issues arise from version mismatches.
Debugging: If the highlighting still doesn't work, check the browser console for any errors and ensure that the greenStrings extension is being applied correctly. You can also inspect the rendered HTML to see if the correct classes are being applied.

By following these steps, you should be able to achieve the desired syntax highlighting for YAML strings in your Vue 3 application using CodeMirror 6.

wonder95

1 year ago

Level 5

Well, not only does that not work, but it also completely removes any syntax highlighting that was working.

Please or to participate in this conversation.