How to use codemirror legacy modes?

CodeMirror 6 introduces a modular architecture, allowing for more flexibility and customization. But the language support is still limited compared to CodeMirror 5. But the good news is that you can still use legacy modes from CodeMirror 5 in CodeMirror 6. We'll go through the steps to do this.

Install the package:

First, make sure you have CodeMirror 6 installed, then install the legacy modes package:

npm install @codemirror/legacy-modes

Import the desired legacy mode:

The package provides various legacy modes. Import the one you need:

import { nginx } from "@codemirror/legacy-modes/mode/nginx"

Create a StreamLanguage:

Use the StreamLanguage function from "@codemirror/language" to create a language from the legacy mode:

import { StreamLanguage } from "@codemirror/language"

const nginxLanguage = StreamLanguage.define(nginx)

Use the language in your editor setup:

Add the language to your CodeMirror configuration:

import { EditorState } from "@codemirror/state"
import { EditorView } from "@codemirror/view"

let view = new EditorView({
    state: EditorState.create({
    extensions: [nginxLanguage]
    }),
    parent: document.body
})

Conclusion

This process allows you to use legacy modes from CodeMirror 5 in CodeMirror 6. Keep in mind that while this works, it's generally recommended to use the newer, more efficient language packages specifically designed for CodeMirror 6 when available.