@codemirror/lang-liquid 

[WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements Liquid
template support for the
CodeMirror code editor.

The project page has more information, a
number of examples and the
documentation.

This code is released under an
MIT license.

We aim to be an inclusive, welcoming community. To make that explicit,
we have a code of
conduct that applies
to communication around the project.

Usage

``javascript
import {EditorView, basicSetup} from "codemirror"
import {liquid} from "@codemirror/lang-liquid"

const view = new EditorView({
parent: document.body,
doc: {% if a.active %}{{ a.title }}{% endif %},
extensions: [basicSetup, liquid()]
})
``

API Reference

liquid(config⁠?: LiquidCompletionConfig & Object = {}) → LanguageSupport

Liquid template support.

liquidLanguage: LRLanguage

A language provider for Liquid templates.

type
LiquidCompletionConfig

Configuration options to
liquidCompletionSource.

tags⁠?: readonly Completion[]

Adds additional completions when completing a Liquid tag.

filters⁠?: readonly Completion[]

Add additional filter completions.

variables⁠?: readonly Completion[]

Add variable completions.

properties⁠?: fn(path: readonly string[], state: EditorState, context: CompletionContext) → readonly Completion[]

Provides completions for properties completed under the given
path. For example, when completing user.address., path will
be ["user", "address"].

liquidCompletionSource(config⁠?: LiquidCompletionConfig = {}) → fn(context: CompletionContext) → CompletionResult | null

Returns a completion source for liquid templates. Optionally takes
a configuration that adds additional custom completions.

closePercentBrace: Extension

This extension will, when the user types a % between two
matching braces, insert two percent signs instead and put the
cursor between them.