Jinja2
A Sublime Text package that provides enhanced syntax highlighting, completions, snippets & more for Jinja templates.
Details
Installs
- Total 78K
- Win 22K
- Mac 33K
- Linux 24K
Dec 9 | Dec 8 | Dec 7 | Dec 6 | Dec 5 | Dec 4 | Dec 3 | Dec 2 | Dec 1 | Nov 30 | Nov 29 | Nov 28 | Nov 27 | Nov 26 | Nov 25 | Nov 24 | Nov 23 | Nov 22 | Nov 21 | Nov 20 | Nov 19 | Nov 18 | Nov 17 | Nov 16 | Nov 15 | Nov 14 | Nov 13 | Nov 12 | Nov 11 | Nov 10 | Nov 9 | Nov 8 | Nov 7 | Nov 6 | Nov 5 | Nov 4 | Nov 3 | Nov 2 | Nov 1 | Oct 31 | Oct 30 | Oct 29 | Oct 28 | Oct 27 | Oct 26 | Oct 25 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 2 | 1 | 1 | 2 | 5 | 4 | 1 | 1 | 0 | 3 | 2 | 0 | 0 | 0 | 1 | 1 | 3 | 2 | 1 | 0 | 3 | 1 | 1 | 3 | 0 | 0 | 2 | 2 | 3 | 1 | 0 | 2 | 5 | 4 | 2 | 1 | 1 | 3 | 1 | 1 | 4 | 2 | 0 | 2 | 1 |
Mac | 0 | 1 | 1 | 2 | 1 | 3 | 5 | 5 | 0 | 0 | 3 | 2 | 0 | 0 | 0 | 0 | 1 | 4 | 7 | 0 | 0 | 6 | 1 | 1 | 3 | 0 | 0 | 4 | 4 | 0 | 3 | 3 | 3 | 2 | 5 | 7 | 1 | 1 | 1 | 5 | 5 | 2 | 3 | 0 | 3 | 3 |
Linux | 0 | 0 | 1 | 2 | 4 | 3 | 4 | 1 | 1 | 0 | 1 | 6 | 0 | 0 | 0 | 0 | 1 | 0 | 2 | 1 | 0 | 4 | 3 | 1 | 5 | 0 | 0 | 2 | 1 | 1 | 3 | 3 | 2 | 1 | 3 | 1 | 4 | 0 | 1 | 4 | 3 | 2 | 1 | 1 | 1 | 0 |
Readme
- Source
- raw.githubusercontent.com
Jinja2
Jinja2 syntax definitions, completions and snippets for Sublime Text based on its bundled C/C++, CSS, HTML, JavaScript, JSON, Markdown, XML and YAML syntaxes.
Features
- Syntax highlighting for Jinja2 templates
Supported languages: C/C++, CSS, HTML, JavaScript, JSON, Markdown, XML and YAML - Syntax specific indentation for code blocks
- Completions for built in tags, filters, functions, tests & loop variables.
- Key bindings to make your life easier
- Snippets for tags and common code blocks
Installation
Package Control
The best way is to install it via Package Control.
Once you have Package Control setup in Sublime Text, open the command palette
and search for Package Control: Install Package
. Search for Jinja2
and
install it. Package Control will take care for of automatically updating the
package for you if there are new releases.
You can also use Package Control: Add Repository
. Copy the github url
(without the .git
at the end) and enter it into the input panel that pops up
at the bottom when you select Package Control: Add Repository
. Now use
Package Control: Install Package
and search for Jinja2
and install it.
Documentation
How to use this package ?
By default, this package supports the following Jinja extensions:
j2
, jinja
, jinja2
, html.j2
, html.jinja
, html.jinja2
, htm.j2
, htm.jinja
, htm.jinja2
.
Since a user can have more than one templating language package installed,
this package doesn't support .html
directly. To get highlighting for .html
files with Jinja code and all the other features this package provides, you
can follow any of the two approaches given below
Go to the bottom right status bar item that displays information on current syntax and click on that when the currently open file is any
.html
file. From there go toOpen all with current extensions as ...
and scroll to selectJinja
. You should now be good to go.When the currently open file has any of the aforementioned file extensions, from the main menu, go to
Preferences -> Settings -- Syntax Specific
. This should open a 2 column new window, with the default settings on the right and a user settings on the left. In the user settings, add the following, save & close.
{
"extensions": [
".html"
]
}
Key bindings
- The key bindings are configured so that pressing shift + {
twice will automatically add spaces on both sides for the inner brace
expression block & place the cursor in the center, like so
{{ | }}
. - |||ly pressing shift + % within
{}
will add spaces on both sides of the inner%
like so{% | %}
- You can use ctrl + / for inserting Jinja style line comments (
## This is a line comment
) - Similarly, use ctrl + shift + / for block style comments (
{# This is a block comment #}
)
Auto completions
No special configuration is required for completions to show while typing or snippets to expand.
Completion behaviour of the primary syntax applies to normal content.
Default behaviour of ST involves distinction between source
and text
scopes.
source
(CSS, JavaScript, JSON, YAML): completions display while typing.text
(HTML, Markdwon, Text, XML): only snippets expand by pressing tab key.
Content of {% %}
and {{ }}
tags is scoped source.jinja
to enable completions while typing.
Snippets
Basic snippets for each keyword are provided to create expressions without bothering with {% %}
.
Tab Trigger | Jinja Tag |
---|---|
autoescape |
{% autoescape %} |
endautoescape |
{% endautoescape %} |
… | … |
Prefixed with j
basic snippets for most common control structures are provided.
Tab Trigger | Jinja Code Block |
---|---|
jautoescape |
{% autoescape %}{% endautoescape %} |
jblock |
{% block %}{% endblock %} |
jcall |
{% call %}{% endcall %} |
jextends |
{% extends %} |
jexp |
{% %} |
jfilter |
{% filter %}{% endfilter %} |
jfor |
{% for %}{% endfor %} |
jif |
{% if %}{% endif %} |
jifelse |
{% if %}{% else %}{% endif %} |
jmacro |
{% macro %}{% endmacro %} |
jraw |
{% raw %}{% endraw %} |
jwith |
{% with %}{% endwith %} |
For more, please follow the official documentation on snippets to create your own.
Snippets can be disabled (ignored) by adding the following to Preferences.sublime-settings:
{
"ignored_snippets": ["Jinja2/*"]
}
Troubleshooting
Jinja2 extends Sublime Text's CSS, HTML, JavaScript, JSON, Markdown, XML and YAML syntax definitions.
If Jinja2 syntax highlighting doesn't work and console displays syntax errors,
- check if required bundled packages are enabled.
- remove any out-dated syntax override.
Enable bundled packages
- Open
Command Palette
using ctrl+shift+P or menu itemTools → Command Palette...
- Choose
Package Control: Enable Packages
- Find
CSS
and hit Enter - Repeat the steps for
JavaScript
,HTML
…
Remove overrides
- call Menu > Preferences > Browse Packages..
- Look for CSS, HTML, … folders
- Remove them or at least delete any syntax definition in them
Issues & Feature requests
There is always scope for improvements so please report bug(s) or feature requests.
Please follow the issue & feature request templates that have been setup while reporting any bug(s) or requesting for feature(s) (So as to stay as organised as possible).
Acknowledgements
The syntax_test.yml is taken & used (with some modifications) from the official Packages repository. So full credit goes to them for it.