# @codemirror/lang-jinja [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-jinja.svg)](https://www.npmjs.org/package/@codemirror/lang-jinja) [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-jinja/blob/main/CHANGELOG.md) ] This package implements [Jinja template](https://jinja.palletsprojects.com/en/stable/templates/) support for the [CodeMirror](https://codemirror.net/) code editor. The [project page](https://codemirror.net/) has more information, a number of [examples](https://codemirror.net/examples/) and the [documentation](https://codemirror.net/docs/). This code is released under an [MIT license](https://github.com/codemirror/lang-jinja/tree/main/LICENSE). We aim to be an inclusive, welcoming community. To make that explicit, we have a [code of conduct](http://contributor-covenant.org/version/1/1/0/) that applies to communication around the project. ## Usage ```javascript import {EditorView, basicSetup} from "codemirror" import {jinja} from "@codemirror/lang-jinja" const view = new EditorView({ parent: document.body, doc: `{% if a.active %}{{ a.title }}{% endif %}`, extensions: [basicSetup, jinja()] }) ``` ## API Reference
jinja(config⁠?: JinjaCompletionConfig & Object = {}) → LanguageSupport

Jinja template support.

jinjaLanguage: LRLanguage

A language provider for Jinja templates.

type JinjaCompletionConfig

Configuration options to jinjaCompletionSource.

tags⁠?: readonly Completion[]

Adds additional completions when completing a Jinja tag.

variables⁠?: readonly Completion[]

Add additional global variables.

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"].

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

Returns a completion source for jinja 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.