Using codemirror/lang-liquid with lang-markdown instead of lang-html

I’m building a markdown editor that allows for liquid templating, and I was overjoyed to see that codemirror/lang-liquid already exists:

Having said that, after reading the docs I can’t make sense of how best to unite both Liquid and Markdown.

It seems that I should be able to pass the output of markdown() to the liquid() function like so:

import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { liquid } from '@codemirror/lang-liquid'

// Editor state config doesn't fully match what I'm doing, but for
// simplicity this is more or less the idea
const view = new EditorView({
  parent: document.querySelector("#editorRoot"),
  state: EditorState.create({
    extensions: [
      liquid({ base: markdown({ base: markdownLanguage }) }),
    ],
  })
})

But when I do that it throws an error that indicates base must be the result of html() from lang-html.

Is there any straightforward way to accomplish what I’m trying to accomplish?

It looks like that constraint was a leftover from the lang-vue code, which I used as a base when implementing this, but it wasn’t actually needed for this mode. Version 6.0.1 removes it.

1 Like

@marijn Absolutely incredible. As soon as I updated my editor worked flawlessly. Thanks for the quick patch!