Jinja2
A Sublime Text package that provides enhanced syntax highlighting, completions, snippets & more for Jinja templates.
Details
Installs
- Total 78K
- Win 21K
- Mac 33K
- Linux 24K
Jul 27 | Jul 26 | Jul 25 | Jul 24 | Jul 23 | Jul 22 | Jul 21 | Jul 20 | Jul 19 | Jul 18 | Jul 17 | Jul 16 | Jul 15 | Jul 14 | Jul 13 | Jul 12 | Jul 11 | Jul 10 | Jul 9 | Jul 8 | Jul 7 | Jul 6 | Jul 5 | Jul 4 | Jul 3 | Jul 2 | Jul 1 | Jun 30 | Jun 29 | Jun 28 | Jun 27 | Jun 26 | Jun 25 | Jun 24 | Jun 23 | Jun 22 | Jun 21 | Jun 20 | Jun 19 | Jun 18 | Jun 17 | Jun 16 | Jun 15 | Jun 14 | Jun 13 | Jun 12 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 3 | 2 | 6 | 2 | 1 | 1 | 0 | 1 | 3 | 2 | 4 | 1 | 1 | 0 | 2 | 1 | 3 | 3 | 0 | 0 | 0 | 2 | 2 | 3 | 1 | 4 | 0 | 2 | 3 | 2 | 6 | 2 | 2 | 0 | 1 | 2 | 2 | 0 | 0 | 1 | 0 | 5 | 0 | 4 | 2 |
Mac | 0 | 1 | 5 | 3 | 5 | 0 | 0 | 1 | 7 | 2 | 1 | 3 | 3 | 2 | 1 | 2 | 1 | 8 | 0 | 4 | 3 | 2 | 1 | 1 | 1 | 3 | 2 | 1 | 0 | 1 | 3 | 2 | 10 | 2 | 2 | 3 | 2 | 6 | 6 | 6 | 3 | 3 | 1 | 2 | 1 | 5 |
Linux | 0 | 3 | 1 | 1 | 1 | 0 | 1 | 3 | 2 | 1 | 3 | 7 | 2 | 0 | 1 | 4 | 3 | 1 | 4 | 3 | 0 | 1 | 3 | 2 | 3 | 2 | 0 | 0 | 3 | 3 | 2 | 4 | 1 | 3 | 1 | 2 | 1 | 6 | 5 | 2 | 2 | 3 | 1 | 2 | 2 | 3 |
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.