I see on some tutorials that some manage to use intellisense and syntax highlighting for jinja templates injected in html files on Visual Studio Code, but I cannot find the way to achieve it.
I installed the Jinja and the Better Jinja extensions but I cannot manage to make them work.
To be clear, I'd like to have intellisense and syntax highlighting for code such as the one below, in an HTML file.
<p>
{% if music_style %}
The style you entered is {{ music_style }}
Update it in the form below
{% else %}
Please enter your style:
{% endif %}
</p>
In the status bar at the bottom right right side in VS code is an option to change the language,
From HTML, change it to Django HTML by clicking it and searching on the search option and then select it.
In settings.json file, you can add the following code so that mostly everytime django templates will be taken as django-html and other times html
"files.associations": { // so that all html files are not recognized as django-html
"**/templates/**/*.html": "django-html",
"*.html": "html"
},
Hope it helps you,
Thank You!
Related
In my current Jekyll setup I am writing all my posts using the asciidoc (.adoc) file format, specifically I'm using these plugins
plugins:
- jekyll-asciidoc
- jekyll-redirect-from
- jekyll-feed
I am in need to create a custom HTML component which I have added in component.html under the _includes folder, following the includes feature of Jekyll.
I am able at the moment to use Liquid in a Markdown file to render the HTML component by just using
{% include component.html %}
at any point in my posts, but I can't do the same with asciidoc files. I've taken a look at their documentation and I can't find a suitable way to make use of this Jekyll feature.
Is there a way to use Liquid in asciidoc?
After a little bit of research I've found a couple of things with which I was able to inject _includes HTML components in an asciidoc file.
jekyll-asciidoc has a special page attribute to enable Liquid preprocessing, you can find the docs at :page-liquid:
So, in order to enable Liquid preprocessing you just have to add this to the asciidoc post
:page-liquid:
With this, Jekyll is going to parse every Liquid statement in your file before actually passing it to the asciidoc generator.
The post needs another little change at this point, citing the docs:
If you’re using the Liquid include tag to include HTML into the AsciiDoc document, enclose it in a passthrough block.
++++
{% include file.html %}
++++
By default :page-liquid: will escape Liquid generated content, which is why you need to enclose the {% include ... %} statement in the asciidoc Passthrough construct ++++ that is going to inject raw HTML into the page itself.
In conclusion, this is what an example post should look like:
_includes/component.html
<p>Some sample text</p>
_posts/liquid-in-asciidoc.adoc
---
title: "HTML component in adoc
---
:page-liquid:
++++
{% include component.html %}
++++
I have been able to add syntax highlighting to my .liquid files by following the instructions here: Enabling Liquid templating syntax highlight in webStorm/phpStorm
It worked fine for my HTML and liquid syntax highlighting as it's so similar to Twig.
But my issue is I also have my schema included in each of my .liquid templates. The schema is JSON but there's not syntax highlighting on it at all.
Is there a way to add a custom syntax highlighting for a file type if it's wrapped in some sort of delimiter?
My schema is wrapped like so:
{% schema %}
JSON object with my settings/configuration
{% endschema %}
See image below:
As #yole have said: you cannot do that. Well... permanently.
You can always inject JSON there manually .. and it will last for a while (a session for sure).
Just place caret just after {% schema %} and hit Alt + Enter.
Choose Inject language or reference and locate JSON in the list (speed search works there as well, so just start typing).
Result is obvious:
You are using Twig plugin for .liquid files (native support for them (RUBY-7210) does not seem to be on JetBrains short list right now).
It's now possible to have permanent Language Injection in custom Twig tag (using Twig plugin). See the screenshot below for custom injection rule that you can create yourself:
You can inject JSON in your {% schema %} block manually via Alt+Enter, Inject language or reference > JSON:
See also https://blog.jetbrains.com/phpstorm/2017/12/twig-handling-improvements/
At my org we use a custom .amg filetype for an internal framework that is essentially just a JSON
I made IntelliJ treat those as JSONs by adding *.amg pattern under Recognized File Types > JSON
reference: JetBrains / File type associations
Hi sorry that I may not be able to give out more information, but can I ask what the error message (dir1/dir2/dir3/error.md: Template syntax error: Invalid block tag: 'endif') may indicate?
So basically I have a HTML and a Markdown file that seem to be linked somehow in an environment, I'm thinking there must be another Django templates existing somewhere that store the variables and values shown in both the HTML and Markdown files. The HTML and markdown files have variables inside like {%I'mavariable%}.
I wanted to provide more information, but I don't know much more than this to be honest. But I was told that the corresponding html actually break the build...
So what are some potential possibilities/errors that made the build fail? The endif tag may refer to the variable {% dynamics endif %} in the html I guess?
Thank you so much!
I'm using Pygments for highlighting code snippets in Jekyll.
I want to know how to highlight .cshtml/.aspx files using Pygments highlighter
Here are the available lexers in Pygments. Since ASPX might contain C# or VB, it should be supported in Pygments since it is on the supported languages list.
The relevant ones that you are looking for would be aspx-cs and aspx-vb, as those highlight ASPX code snippets.
{% highlight aspx-cs %}
//your aspx code here
{% endhighlight %}
Or if those aspx code snippets mainly contain static html or xhtml, you should be able to just {% highlight html %}.
CSHTML should probably just use csharp or c# as the short name.
A readable reference list of languages and their shortnames are found here.
I am working on a django project (my first), and in one of my views, I have a sophisticated html snippet with JS weaved within it. I would like to reuse this "component" somewhere else in the same view. Is there a way of achieving this? Please let me know if this design is faulty to begin with?
Use the {% include '/my/common/template.html' %} templatetag.
Loads a template and renders it with
the current context. This is a way of
"including" other templates within a
template.
The template name can either be a
variable or a hard-coded (quoted)
string, in either single or double
quotes.
I know it's an old one but maybe someone is gonna have use of this answer.
There's also the inclusion tag. It's like the include tag, only you can pass it arguments and process it as a seperate template.
Put this in my_app/templatetags/my_templatetags.py:
#register.inclusion_tag('my_snippet.html')
def my_snippet(url, title):
return {'url': url, 'title': title}
and then my_snippet.html can be:
{{ title }}
then, to use this snippet in your templates:
{% load my_templatetags %}
{% my_snippet "/homepage/" "Homepage" %}
More info:
https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#howto-custom-template-tags-inclusion-tags
Not sure, if you like to reuse your HTML in different templates (rendered by different views). If so, look into Django's template inheritance mechanism:
The most powerful -- and thus the most complex -- part of Django's template engine is template inheritance. Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and defines blocks that child templates can override.
You should try Django custom template tags. This way you will keep your snippets in an external file and then call them easily by something like {{ your_custom_tag }}. It's a very convenient method for working with reusable chunks of xhtml markup. You can even use arguments with these custom tags, something like {{ your_custom_tag|image:"logo.png" }}.
You can learn more about custom tags here.