Jekyll Kramdown T.O.C. not building - jekyll

Here's the final output of what I'd like to have:
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
<nav aria-label="Table of Contents">
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
<nav>
<section itemprop="articleBody">
<p>the main body of the article</p>
</section>
</article>
With a default Jekyll install Kramdown can create a TOC with
* TOC
{:toc}
However Markdown is not currently supported in HTML includes or Layout files.
I tried using [Capture and Markdownify}(https://github.com/jekyll/jekyll/issues/6166#issuecomment-322771527) to add the above TOC call to the layout file without success
// _layouts/post.html
<article>
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
{% capture toc %}{% include toc.md %}{% endcapture %}
{{ toc | markdownify }}
<section itemprop="articleBody">
<p>the main body of the article</p>
</section>
</article>
Adding a inline markdownify works for plain markdown but not the Kramdown TOC call.
// this works
{% capture md %}
## Heading 2
*Stuff added in my layout*
{% endcapture %}
{{ md | markdownify }}
// This doesn't work
{% capture md %}
* TOC
{:toc}
{% endcapture %}
{{ md | markdownify }}
The only way I see around this is to include some of the layout markup in the post's markdown file.
// _layouts/post.html
<article>
<header>
<h1>Jekyll Table of Contents with Kramdown
</h1>
</header>
{{ content }}
</article>
// _posts/post.md
---
layout: post
---
<nav aria-label="Table of Contents">
* TOC
{:toc}
</nav>
<section itemprop="articleBody">
## My Heading
Standard markdown content here
</section>
The draw back here is that I've now got page markup in my post that can be easily corrupted and a distraction to content editors.
Does anybody see a way round this?

I found this excellent Ruby Gem jekyll-toc — it generates a TOC that you can place anywhere in your layout files.
I'm now successfully using the following in my _layouts/post.html:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>

Related

What is the indentation standard for jinja2 syntax applied to nested blocks when optimized for readability of both jinja2 and html code

Context
My colleagues are starting to enhance jinja2 templates that I have developed, and I want my syntax to be as readable and easy for them to navigate as possible. But I don't know how to resolve the challenge that I've reproduced in it's simplest form below:
Minimal reproducible example
When jinja2 syntax is not interspersed within HTML, html parent/child relationships are easy to spot because of the vertical alignment, such as in the example below:
<li>
<p>List Item 1</p>
<p>List Item 2</p>
<p>List Item 3</p>
<p>List Item 4</p>
<p>List Item 5</p>
</li>
And the nested blocks of jinja2 syntax are likewise easy to trace back to their hierarchical precedents in the following example:
{% if foo == bar %}
{% if foo == 1 %}
# Do something
{% endif %}
{% if foo == 2 %}
# Do something
{% endif %}
{% endif %}
But if the two are merged, readability diminishes.
When the indentation of the jinja2 template is given priority, it makes the html parent/child relationships harder to see:
<li>
<p>List Item 1</p>
{% if foo == bar %}
<p>List Item 2</p>
{% if foo == 1 %}
<p>List Item 3</p>
{% endif %}
{% if foo == 2 %}
<p>List Item 4</p>
{% endif %}
{% endif %}
<p>List Item 5</p>
</li>
And if the html indentation is given priority, it makes it harder to trace nested blocks back to their hierarchical precedents:
<li>
<p>List Item 1</p>
{% if foo == bar %}
<p>List Item 2</p>
{% if foo == 1 %}
<p>List Item 3</p>
{% endif %}
{% if foo == 2 %}
<p>List Item 4</p>
{% endif %}
{% endif %}
<p>List Item 5</p>
</li>
I've seen other indentation patterns that split the difference, but they all suffer from lack of readability.
This minimal reproducible example is still fairly easy to visually parse because there is little distance between lines that share a relationship. But the impact is much more onerous when working with large templates.
The Question
Is there an official indentation standard for jinja2 and html that minimizes these tradeoffs? If so, where is the standard discussed?
What I've found so far
I've searched the jinja2 docs for the term "indent" and the two results are not relevant. Some of the Google and Bing results address questions of indentation, but not in this particular context, like these: link, link, link, link, link, link
It seems like this would be a fundamental question, and I apologize if I've overlooked the obvious places where it is answered. Thank you for your help!
try command line formatter djhtml mention in this solution.
https://github.com/rtts/djhtml/

Looping a block of markup with Nunjucks

I’m building static HTML templates and would like to loop over a block of markup to output it multiple times. Twig has a simple method for it, but I've been unable to find the equivalent in Nunjucks.
Twig input:
{% for i in 1..2 %}
<div>Lorem ipsum</div>
{% endfor %}
HTML output:
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>

Text after inline-block heading breaks lines if the heading also broke lines

I'm currently working on a product page for an online-shop. The title and the volume of the products are meant to be in one line with the title being a <h3> and the volume being a muted text. I fixed the problem with the line breaks after my <h3> headings with display: inline-block.
On your average desktop my code works just fine. However if the title is exceptionally long or the device you are viewing the website on is particularly narrow, causing the heading to break lines, the volume text is displayed one line below.
Here is an example:
Headline Test Product 750ml
Headline Test Product Headline
Test Product
750ml
What I want:
Headline Test Product Headline
Test Product
750ml
my code:
<h3 class="name" style="display: inline-block">{{ product.title }}</h3>
{% if (product.volume >= 1) %}
<span class="volume text-muted">{{ product.volume|number_format(1, ',', '.') }}l</span>
{% else %}
<span class="volume text-muted">{{ (product.volume * 1000)|number_format(0, ',', '.') }}ml</span>
{% endif %}
I know my english isn't perfect, but I hope you still understand my problem.
Use display: inline:
<h3 style="display: inline">Headline Test Product Headline
Test Product Headline Test Product Headline
Test Product</h3>
<span>750ml</span>

display equation in jekyll blog in latex format on github pages

I am trying to write equations on my jekyll powered blog hosted on github pages. I am trying to use MathJax javascript library as per instructions here. Essentially, I added the following code below front matter in the _layouts\page.html and _layouts\post.html
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
(copied from here). The problem is that the equations still do not show up correctly on the post, e.g., I wrote the following in my post (with a blank line above and below it):
[\\ a^2 + b^2 = c^2 \\]
and instead of showing me the equation in the latex format on the page, it only escapes a \ and shows me the following
[\ a^{2} + b^{2} = c^{2} \]
Additional details (in my _config.yml regarding highlighting) are as follows
# Build settings
markdown: kramdown
highlighter: rouge
paginate: 5
kramdown:
input: GFM
hard_wrap: false
# syntax_highlighter: rouge
Also, pasted below the is the code in _layouts\page.html
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<div class="post-content">
{{ content }}
</div>
</article>
and the code in _layouts\post.html
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
</header>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<div class="post-content" itemprop="articleBody">
{{ content }}
</div>
</article>
Any help in resolving this issues of showing equations properly will by very highly appreciated!
Thanks!
SN248
On the one hand, the math delimiters should be \[...\] (and double backslashes should you need to escape them).
On the other hand, kramdown (Jekyll's default markdown parser) has its somewhat unique math block syntax where it uses $$...$$ for both inline and display style, cf. http://kramdown.gettalong.org/syntax.html#math-blocks

Pinterest post structure

How one can build a site structure like Pinterest?
I mean each post has it's own height (with is determined by backend programming).
I'm trying to do it, but what I have now is this:
<ul class="thumbnails">
{% for key, values in prodmatrix %}
<li class="span3">
<div class="product-box">
<span class="sale_tag"></span>
<p><img src="{{ STATIC_URL }}{{values.1.0}}" alt="" /></p>
<h4>{{ values.0.0 }}</h4><br/>
<p class="category">{{values.2.0}} {{values.2.1}} {{values.2.2}}</p>
</div>
</li>
{% endfor %}
</ul>
Which don't work really well, as you can see here
Some similar questions might help you:
CSS3 Multiple Columns
Pinterest style layout (Bootstrap 3 + Masonary) final tweeks
How to display a grid with text like Pinterest?
CSS code for pinterest layout style