Skip to content

Commit

Permalink
Django/Jinja2 improvements (#1800)
Browse files Browse the repository at this point in the history
This completely rewrites the Django language definition. It's now based on markup-templating.
  • Loading branch information
RunDevelopment committed Mar 10, 2019
1 parent af67c32 commit f246748
Show file tree
Hide file tree
Showing 19 changed files with 652 additions and 111 deletions.
2 changes: 1 addition & 1 deletion components.js

Large diffs are not rendered by default.

6 changes: 1 addition & 5 deletions components.json
Expand Up @@ -231,11 +231,7 @@
},
"django": {
"title": "Django/Jinja2",
"require": "markup",
"peerDependencies": [
"css",
"javascript"
],
"require": "markup-templating",
"alias": "jinja2",
"owner": "romanvm"
},
Expand Down
89 changes: 54 additions & 35 deletions components/prism-django.js
@@ -1,41 +1,60 @@
// Django/Jinja2 syntax definition for Prism.js <http://prismjs.com> syntax highlighter.
// Mostly it works OK but can paint code incorrectly on complex html/template tag combinations.

var _django_template = {
'property': {
pattern: /(?:{{|{%)[\s\S]*?(?:%}|}})/g,
greedy: true,
inside: {
'string': {
pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'keyword': /\b(?:\||load|verbatim|widthratio|ssi|firstof|for|url|ifchanged|csrf_token|lorem|ifnotequal|autoescape|now|templatetag|debug|cycle|ifequal|regroup|comment|filter|endfilter|if|spaceless|with|extends|block|include|else|empty|endif|endfor|as|endblock|endautoescape|endverbatim|trans|endtrans|[Tt]rue|[Ff]alse|[Nn]one|in|is|static|macro|endmacro|call|endcall|set|endset|raw|endraw)\b/,
'operator' : /[-+=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]|\b(?:or|and|not)\b/,
'function': /\b(?:_|abs|add|addslashes|attr|batch|callable|capfirst|capitalize|center|count|cut|d|date|default|default_if_none|defined|dictsort|dictsortreversed|divisibleby|e|equalto|escape|escaped|escapejs|even|filesizeformat|first|float|floatformat|force_escape|forceescape|format|get_digit|groupby|indent|int|iriencode|iterable|join|last|length|length_is|linebreaks|linebreaksbr|linenumbers|list|ljust|lower|make_list|map|mapping|number|odd|phone2numeric|pluralize|pprint|random|reject|rejectattr|removetags|replace|reverse|rjust|round|safe|safeseq|sameas|select|selectattr|sequence|slice|slugify|sort|string|stringformat|striptags|sum|time|timesince|timeuntil|title|trim|truncate|truncatechars|truncatechars_html|truncatewords|truncatewords_html|undefined|unordered_list|upper|urlencode|urlize|urlizetrunc|wordcount|wordwrap|xmlattr|yesno)\b/,
'important': /\b-?\d+(?:\.\d+)?\b/,
'variable': /\b\w+?\b/,
'punctuation' : /[[\];(),.:]/
}
}
};
(function (Prism) {

Prism.languages.django = Prism.languages.extend('markup', {'comment': /(?:<!--|{#)[\s\S]*?(?:#}|-->)/});
// Updated html tag pattern to allow template tags inside html tags
Prism.languages.django.tag.pattern = /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^>=]+))?)*\s*\/?>/i;
Prism.languages.insertBefore('django', 'entity', _django_template);
Prism.languages.insertBefore('inside', 'tag', _django_template, Prism.languages.django.tag);
Prism.languages.django = {
'comment': /^{#[\s\S]*?#}$/,
'tag': {
pattern: /(^{%[+-]?\s*)\w+/,
lookbehind: true,
alias: 'keyword'
},
'delimiter': {
pattern: /^{[{%][+-]?|[+-]?[}%]}$/,
alias: 'punctuation'
},
'string': {
pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
greedy: true
},
'filter': {
pattern: /(\|)\w+/,
lookbehind: true,
alias: 'function'
},
'test': {
pattern: /(\bis\s+(?:not\s+)?)(?!not\b)\w+/,
lookbehind: true,
alias: 'function'
},
'function': /\b[a-z_]\w+(?=\s*\()/i,
'keyword': /\b(?:and|as|by|else|for|if|import|in|is|loop|not|or|recursive|with|without)\b/,
'operator': /[-+*/%=]=?|!=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,
'number': /\b\d+(?:\.\d+)?\b/,
'boolean': /[Tt]rue|[Ff]alse|[Nn]one/,
'variable': /\b\w+?\b/,
'punctuation': /[{}[\](),.:;]/
};

if (Prism.languages.javascript) {
// Combine js code and template tags painting inside <script> blocks
Prism.languages.insertBefore('inside', 'string', _django_template, Prism.languages.django.script);
Prism.languages.django.script.inside.string.inside = _django_template;
}
if (Prism.languages.css) {
// Combine css code and template tags painting inside <style> blocks
Prism.languages.insertBefore('inside', 'atrule', {'tag': _django_template.property}, Prism.languages.django.style);
Prism.languages.django.style.inside.string.inside = _django_template;
}

// Add an Jinja2 alias
Prism.languages.jinja2 = Prism.languages.django;
var pattern = /{{[\s\S]*?}}|{%[\s\S]*?%}|{#[\s\S]*?#}/g;
var markupTemplating = Prism.languages['markup-templating'];

Prism.hooks.add('before-tokenize', function (env) {
markupTemplating.buildPlaceholders(env, 'django', pattern);
});
Prism.hooks.add('after-tokenize', function (env) {
markupTemplating.tokenizePlaceholders(env, 'django');
});

// Add an Jinja2 alias
Prism.languages.jinja2 = Prism.languages.django;
Prism.hooks.add('before-tokenize', function (env) {
markupTemplating.buildPlaceholders(env, 'jinja2', pattern);
});
Prism.hooks.add('after-tokenize', function (env) {
markupTemplating.tokenizePlaceholders(env, 'jinja2');
});

})(Prism);
2 changes: 1 addition & 1 deletion components/prism-django.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion plugins/autoloader/prism-autoloader.js
Expand Up @@ -4,7 +4,7 @@
}

// The dependencies map is built automatically with gulp
var lang_dependencies = /*languages_placeholder[*/{"javascript":"clike","actionscript":"javascript","arduino":"cpp","aspnet":["markup","csharp"],"bison":"c","c":"clike","csharp":"clike","cpp":"c","coffeescript":"javascript","crystal":"ruby","css-extras":"css","d":"clike","dart":"clike","django":"markup","ejs":["javascript","markup-templating"],"erb":["ruby","markup-templating"],"fsharp":"clike","flow":"javascript","glsl":"clike","gml":"clike","go":"clike","groovy":"clike","haml":"ruby","handlebars":"markup-templating","haxe":"clike","java":"clike","javadoc":["markup","java","javadoclike"],"jolie":"clike","jsdoc":["javascript","javadoclike"],"js-extras":"javascript","jsonp":"json","json5":"json","kotlin":"clike","less":"css","markdown":"markup","markup-templating":"markup","n4js":"javascript","nginx":"clike","objectivec":"c","opencl":"cpp","parser":"markup","php":["clike","markup-templating"],"phpdoc":["php","javadoclike"],"php-extras":"php","plsql":"sql","processing":"clike","protobuf":"clike","pug":["markup","javascript"],"qore":"clike","jsx":["markup","javascript"],"tsx":["jsx","typescript"],"reason":"clike","ruby":"clike","sass":"css","scss":"css","scala":"java","smarty":"markup-templating","soy":"markup-templating","swift":"clike","tap":"yaml","textile":"markup","tt2":["clike","markup-templating"],"twig":"markup","typescript":"javascript","t4-cs":["t4-templating","csharp"],"t4-vb":["t4-templating","visual-basic"],"vala":"clike","vbnet":"basic","velocity":"markup","wiki":"markup","xeora":"markup","xquery":"markup"}/*]*/;
var lang_dependencies = /*languages_placeholder[*/{"javascript":"clike","actionscript":"javascript","arduino":"cpp","aspnet":["markup","csharp"],"bison":"c","c":"clike","csharp":"clike","cpp":"c","coffeescript":"javascript","crystal":"ruby","css-extras":"css","d":"clike","dart":"clike","django":"markup-templating","ejs":["javascript","markup-templating"],"erb":["ruby","markup-templating"],"fsharp":"clike","flow":"javascript","glsl":"clike","gml":"clike","go":"clike","groovy":"clike","haml":"ruby","handlebars":"markup-templating","haxe":"clike","java":"clike","javadoc":["markup","java","javadoclike"],"jolie":"clike","jsdoc":["javascript","javadoclike"],"js-extras":"javascript","jsonp":"json","json5":"json","kotlin":"clike","less":"css","markdown":"markup","markup-templating":"markup","n4js":"javascript","nginx":"clike","objectivec":"c","opencl":"cpp","parser":"markup","php":["clike","markup-templating"],"phpdoc":["php","javadoclike"],"php-extras":"php","plsql":"sql","processing":"clike","protobuf":"clike","pug":["markup","javascript"],"qore":"clike","jsx":["markup","javascript"],"tsx":["jsx","typescript"],"reason":"clike","ruby":"clike","sass":"css","scss":"css","scala":"java","smarty":"markup-templating","soy":"markup-templating","swift":"clike","tap":"yaml","textile":"markup","tt2":["clike","markup-templating"],"twig":"markup","typescript":"javascript","t4-cs":["t4-templating","csharp"],"t4-vb":["t4-templating","visual-basic"],"vala":"clike","vbnet":"basic","velocity":"markup","wiki":"markup","xeora":"markup","xquery":"markup"}/*]*/;

var lang_data = {};

Expand Down
2 changes: 1 addition & 1 deletion plugins/autoloader/prism-autoloader.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 56 additions & 0 deletions tests/languages/django!+css/inclusion.test
@@ -0,0 +1,56 @@
<style>
a {
{% if setColor %}
color: {{ bar }};
{% endif %}
}
</style>

----------------------------------------------------

[
["tag", [
["tag", [
["punctuation", "<"],
"style"
]],
["punctuation", ">"]
]],
["style", [
["language-css", [
["selector", "a"],
["punctuation", "{"],
["django", [
["delimiter", "{%"],
["tag", "if"],
["variable", "setColor"],
["delimiter", "%}"]
]],
["property", "color"],
["punctuation", ":"],
["django", [
["delimiter", "{{"],
["variable", "bar"],
["delimiter", "}}"]
]],
["punctuation", ";"],
["django", [
["delimiter", "{%"],
["tag", "endif"],
["delimiter", "%}"]
]],
["punctuation", "}"]
]]
]],
["tag", [
["tag", [
["punctuation", "</"],
"style"
]],
["punctuation", ">"]
]]
]

----------------------------------------------------

Checks for Django/Jinja2 code inside <style> elements.

0 comments on commit f246748

Please sign in to comment.