My input is pretty simple. I'm pulling from a data file to fill <p> with content then running the method markdownify, but the output duplicates the <p> element in (to me) unexpected ways.
Please advise! And thank you.
Sample Input:
{% for item in site.data.filename.item %}
<p style="display:{{ item.display }}" id="{{ item.nav }}">{{ item.content | markdownify }}</p>
{% endfor %}
And the Output:
<p id="test" style="display:block"></p>
<p>testing output</p>
<p></p>
Is there something going on with my liquid syntax? Many thanks in advance
This is typically what happens when you nest paragraphs. You should remove HTML tags from your content.
{{ item.content | strip_HTML}}
https://docs.shopify.com/themes/liquid/filters/string-filters#strip_html
If you want to keep the html formatting, you can use a div to wrap the content, like this:
{% for item in site.data.filename.item %}
<div style="display:{{ item.display }}" id="{{ item.nav }}">{{ item.content | markdownify }}</div>
{% endfor %}
Did you try removing markdownify?
Internally jekyll framework will apply markdownify so we do not need to write markdownify
I tried your code with markdownify removed and got single lines of <p> duplicates.
strip_HTML option also works.
Either remove markdownify or put strip_HTML
Instead of display:{{ item.display }} try
display:{{ display }}
Should do the job! :)
Related
I want my page to show table of content from list of dictionary call book_re. I use Jinja to iterate through my list and show each of them in page. One of them is image link so I use <img> tag for output the image. I add src attribute and use Jinja to assign img link from my dict. But HTML interpret my first quotation mark in key bracket as close quotation mark for src attribute. The problem is I don't know which escape syntax I need to use from Jinja or HTML. Which one I should use or are there any solution? to solve this.
Here is my HTML code
{% extends "layout.html" %}
{% block title %}
Search results: {{ keyword }}
{% endblock %}
{% block main %}
<h3>Keyword {{ keyword }}</h3>
<h3>result</h3>
<table class="table">
{% for book in book_re %}
<td><img src="{{ book["smallpic"] }}" alt="bookpic"></td>
{% endfor %}
</table>
{% endblock %}
Since Jinja is rendered before your HTML, your template should work. You can combine single and double quotes if you want better syntax highlighting support in your IDE.
<td><img src="{{ book['smallpic'] }}" alt="bookpic"></td>
My Jekyll template has a simple alert include:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
<p>{{ include.text | markdownify }}</p>
</div>
I am trying to do something like this:
{% include alert.html style="warning" text="This article is for Administrators and other Roles. Learn more about [permissions]({% link _docs/permissions.md %}) and [roles]({% link _docs/roles.md %})." %}
The issue is the output is not parsed by markdown and I get the raw text:
This article is for Administrators and other Roles. Learn more about [permissions](/support/docs/permissions/) and [roles](/support/docs/roles/).
Tried adding this:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
<p>{{ include.text | markdownify }}</p>
</div>
This sort of works but I get extra <p></p> before and after the markdown text and it adds padding.
So far this is what I have working with a capture:
{% capture alert_text %}This article is for Administrators and other Roles. Learn more about permissions and roles.{% endcapture %}
{% include alert.html style="warning" text=alert_text %}
Can I just just have the link generated inline direct or somehow eliminate the extra paragraph tags?
A single line of markdown is considered a paragraph, which is why it's being wrapped in those tags. I'd keep the capture to render out the liquid link tags, and just remove the p tags in the include:
<div{% if include.style %} class="uk-alert-{{ include.style }}"{% endif %} data-uk-alert>
{{ include.text | markdownify }}
</div>
If you're seeing the p tags added before or after, it's because an opening p tag implies the close of the previous one. If you're still having issues with whitespace on each end of your text, you could strip it before markdownify to be sure:
{{ include.text | strip | markdownify }}
I am unable to remove the new line character that is generated by jekyll's for loop from the following:
<br/><ul class="post-list">
{% for post in site.tags[page.tag] %}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>
{% endfor %}
</ul>
I have looked all over SO and, though I see that this is a issue that people get stuck on, it is not clear to me whether it is possible to remove this newline without writing something that would remove the newline characters from the jekyll generated HTML after the fact. I would prefer not to have to do that. Does anyone know how to get post.date and post.excerpt to generate without a new line in between?
Im not sure if I understood your question correct. I guess, with new line character you mean some obsolete empty lines in the generated HTML.
At least with newer versions of liquid, the solution is to replace {% by {%-.
<br/><ul class="post-list">
{%- for post in site.tags[page.tag] -%}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>
{%- endfor -%}
</ul>
More details can be found here.
I think if you move the {% endfor %} up to the end of the </li> it will remove the new lines.
Like:
<br/><ul class="post-list">
{% for post in site.tags[page.tag] %}
<li>
<h2>{{ post.date | date: "%b %d %Y" | append: post.excerpt }}</h2>
</li>{% endfor %}
</ul>
EDIT:
After playing with this I see what you mean. The post.excerpt itself seems to contain a line break. If you take out the post.excerpt and just use post.date as an example you should see that you will get new lines if the {% endfor %} is below the </li> and moving it up fixes that. I tried a few things to remove the line break from the actual post.excerpt but nothing worked. I use my own descriptions in the front matter instead of post.excerpt and that works.
Also, your code I think is not correct - by appending the post.excerpt to the post date inside of an h2 you are ending up with a <p> inside of an h2.
I would do something like this:
<ul class="post-list">
{% for post in site.tags.[page.tag] %}
<li><h2>{{post.title}}</h2>{{post.excerpt}}</li>{% endfor %}
</ul>
I used title instead of date, use what ever works for you but appending the excerpt to the date inside of an h2 doesn't seem right.
As for the post.excerpt seeming to contain a line break, I think that may be a bug. Though in my code I don't see the line break causing any problems.
I had the same problem and changing the source file to html solved the issue.
Change the source file from markdown to HTML.
Add the frontmatter --- to the top of HTML so it is processed by Jekyll.
Change the corresponding markdown items such as ###### to <h6></h6>.
The linebreak should not appear now.
For simple template
{% with var1="super" var2="man" %}
<p>
{{ var1 }}
{{ var2 }}
</p>
{% endwith %}
gives super man but I want superman.
{% spaceless %} does not work for this case (between two strings, not two tags.)
What is the solution? Making {{ var1 }} and {{ var2 }} in one line is actually too long in my code.
The solution is simple, just remove the enter character:
{% with var1="super" var2="man" %}
<p>
{{ var1 }}{{ var2 }}
</p>
{% endwith %}
But if you don't want to make the code as you said "long" ( I don't know the reason :) ), you can combine the variables two by two and merge them and so on.
Needless to say, as long as you have HTML file, it will interpret the enter character as a space in <p></p>, so your problem isn't really a django/python problem, because the problem is between the tags, not the tags themselves.
Look at what the "problem" is differently.
{% with v1=var1 %}
{% with v2=var2 %}
{{ v1 }}{{ v2 }}
{% endwith %}
{% endwith %}
Though technically less efficient here, in a lot of cases readability is more important than saving a few bits or cycles.
I'm creating a bird's eye view tutorial for Jekyll, to be hosted on Github pages (on my blog that runs on Jekyll). So, I want to put some code there. If I put the following:
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
(all lines after tabspaces), it doesn't render as code, rather, it executes. How do I stop it from executing and render it as code?
The {%...%} syntax used by Jekyll is part of the Liquid templating engine. To escape these tags, and so show them literally, you should use the raw tag.
You will probably want to combine this with the markdown syntax for code blocks. With Redcarpet you can use the triple backtick syntax. It doesn’t matter if you put the backticks inside the raw tags or the other way round:
{%raw%}
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
{%endraw%}
Enclose your code in backticks:
(tested with redcarpet markdown engine)
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
There are at least three options exist, taht you can use to format code in Jekyll:
highlight - Jekyll has built in
{% highlight java %}
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
{% endhighlight %}
example: https://raw.githubusercontent.com/Labs64/netlicensing.io/gh-pages/_drafts/2010-09-16-post-template.md (see Syntax highlighting section)
backtick - GitHub style
```java
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
```
HTML pre/code - HTML can be included in markdown as well
<pre><code>
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
<code/></pre>