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 %}
++++
Related
I am using Jekyll + Liquid + Markdown to generate static html pages. Consequently, this is really a question specific to the Jekyll framework and Liquid template generator because there is syntax that conflicts with Liquid in some of my Markdown files.
Is there a quick and dirty work-around I can use for the time being in order to prevent Liquid from parsing certain files?
Use Raw:
Raw temporarily disables tag processing. This is useful for generating content (eg, Mustache, Handlebars) which uses conflicting syntax.
{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but
{{{ that }}} will not.
{% endraw %}
I have a bunch of Markdown files. In them, I want to be able to use custom bullets and other images; these are implemented as images (with alt-text, but they're a lot prettier as images). The Markdown to create one of those images looks like this:
**
(Yes, that's rendered inside <em> </em> - that's to simplify the CSS, since I can't put a class on the img tag easily.)
Is there a way to tell the parser that the single character ✨ should be rendered as the entire <img> tag?
The site is hosted on GitHub Pages, so answers need to restrict themselves to GitHub Flavored Markdown. If it can't easily be done, I could make a pre-commit hook or something and run a local parser, but it would be far easier to have it work automatically.
You can put the emojis in includes and then reference them from your posts. That is compatible with Github Pages as it doesn't require plugins.
In your post put:
{% include emoji.html %}
That will load the contents of _includes/emoji.html:
✨
You can pass parameters to it to load different images depending on the image you want to load, e.g.: {% include emoji.html image="stars" %}
Another option is to create custom liquid tags that load them.
...since I can't put a class on the img tag easily.
You can if you use kramdown - it has a feature, which allows assigning attributes to the block level elements. For example:
{: .center }
will become
<img src="...img.png" alt="img" class="center">
I'm trying to use GitHub Pages for my project's documentation, but it includes generated html files that turn out to have illegal liquid tags. I don't need any expansion beyond the _layout itself, but as far as I can tell, any {% ... %} tags in the articles' content themselves are also evaluated and there seems to be no way to suppress this, other than adding {% raw %}...{% endraw %} around the entire contents of every single article.
Is there any way to do this at the call site? Something along the lines of {{ content | unrendered }} would be excellent.
Note: this seems to be the opposite problem to many others, who are using page.content in a pre-render context and wanting it to be rendered; I've tried page.content but as far as I can tell it's exactly the same in my case, so no dice.
page.content was raw in the jekyll 2.x era. Now its rendered content.
You can use a hook plugin to add a page.raw field on any page.
Jekyll::Hooks.register :pages, :pre_render do |document|
document.data['raw'] = document.content
end
If you want to do the same on posts and collections items, use a documents hook :
Jekyll::Hooks.register :documents, :pre_render do |document|
Note :
In :pre_render hooks document.content contains raw content
In :post_render hooks document.content contains rendered content
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.