Kramdown table of content doesn't display inside HTML block

Question

I was following this question, but it doesn't seem to take effect for me. Any help would be greatly appreciated.

_includes/layout.html

<main>
<div>
<!-- Sidebar -->
<aside markdown="1">
<h4>Table of Contents</h4>
* ToC
{:toc}
</aside>
<!-- END Sidebar -->

<!-- Main content -->
<article>
{{ content }}
</article>
<!-- END Main content -->
</div>
</main>

_config.yml

markdown: kramdown

Result:

Update

_layouts/site.html

<aside markdown="1">
mark**down**
</aside>

It just renders as above. Kramdown is turned on in config.

Answer 1

Solved by using pure liquid ToC by allejo.

% capture tocWorkspace %}
{% comment %}
    "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe

    Usage:
        {% include toc_pure_liquid.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3  %}

    Parameters:
        * html     (string) - the HTML of compiled markdown generated by kramdown in Jekyll

    Optional Parameters:
        * sanitize (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
        * class    (string) :   ''   - a CSS class assigned to the TOC
        * id       (string) :   ''   - an ID to assigned to the TOC
        * h_min    (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
        * h_max    (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored

    Output:
        An unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it
{% endcomment %}

{% capture my_toc %}{% endcapture %}
{% assign minHeader = include.h_min | default: 1 %}
{% assign maxHeader = include.h_max | default: 6 %}
{% assign nodes = include.html | split: '<h' %}
{% for node in nodes %}
    {% if node == "" %}
        {% continue %}
    {% endif %}
    {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 %}
    {% assign headerLevel = headerLevel | times: 1 %}
    {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}
    {% assign _workspace = node | split: '</h' %}
    {% unless headerLevel >= minHeader %}
        {% continue %}
    {% endunless %}
    {% if headerLevel > maxHeader %}
        {% continue %}
    {% endif %}
    {% assign _idWorkspace = _workspace[0] | split: '"' %}
    {% assign html_id = _idWorkspace[1] %}
    {% capture _hAttrToStrip %}{{ headerLevel }} id="{{ html_id }}">{% endcapture %}
    {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
    {% assign space = '' %}
    {% for i in (1..indentAmount) %}
        {% assign space = space | prepend: '  ' %}
    {% endfor %}
    {% capture my_toc %}{{ my_toc }}
{{ space }}- [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}](#{{ html_id }}){% endcapture %}
    {% endfor %}
    {% if include.class %}
        {% capture my_toc %}{:.{{ include.class }}}
{{ my_toc | lstrip }}{% endcapture %}
    {% endif %}
    {% if include.id %}
        {% capture my_toc %}{: #{{ include.id }}}
{{ my_toc | lstrip }}{% endcapture %}
    {% endif %}
{% endcapture %}{% assign tocWorkspace = '' %}
{{ my_toc | markdownify }}

Answer 2

In theory it should work that way, (it is not working for me either) but you can force to process the code inside a block with `markdown="1" like this:

<aside markdown="1">
<h4>Table of Contents</h4>
* ToC
{:toc}
</aside>

Make sure you don't indent the code inside the aside tag or it will be parsed as kramdown code.

By default, kramdown parses all block HTML tags and all XML tags as raw HTML blocks. However, this can be configured with the parse_block_html. If this is set to true, then syntax parsing in HTML blocks is globally enabled. It is also possible to enable/disable syntax parsing on a tag per tag basis using the markdown attribute:

If an HTML tag has an attribute markdown="0", then the tag is parsed as raw HTML block.

If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.

Update

I've checked your repo, you need to rename index.html to index.md so kramdown will parse it and then you can also add the line to _config.yml to parse markdown inside html blocks.

Answer 3

Jekyll only parse .md or .mardown files.

.html files are not proccessed by markdown parser.

If you rename a file from .html to .md, it will be processed as kramdown.

But there you will have problems with indentation.

Mixing html and markdown is not so easy ;-)