Search code examples
jekyllkramdown

Jekyll produces different output than using kramdown directly

I want to use jekyll to create an HTML document that contains a numbered list of items; i.e. <ol> in HTML. There are items that contain a table. The list stops after the table, but only if I use jekyll, not using kramdown directly.

I am running jekyll version 2.2.0 and kramdown version 1.4.1.

To reproduce this I create a new site using jekyll new that. I then create a new markdown document named this.md:

---
layout: page
title: This
permalink: /this/
---

1. first

   |table|table|
   |-----|-----|
   |conte|nt   |

1. second
1. third

And run jekyll serve.

This produces the following HTML code for http://localhost:4000/this/ (only relevant part quoted):

  <ol>
  <li>first</li>
</ol>

<table>
  <thead>
    <tr>
      <th>table</th>
      <th>table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>conte</td>
      <td>nt</td>
    </tr>
  </tbody>
</table>

<ol>
  <li>second</li>
  <li>third</li>
</ol>

This is obviously not what I want. And running kramdown this.md gives what I want:

<ol>
  <li>
    <p>first</p>

    <table>
      <thead>
        <tr>
          <th>table</th>
          <th>table</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>conte</td>
          <td>nt</td>
        </tr>
      </tbody>
    </table>
  </li>
  <li>second</li>
  <li>third</li>
</ol>

I.e. I want one <ol> list with several items, not a new list after each table.

What does jekyll do different? And how can I solve this problem?

Solution

  • As seen in kramdown doc, multiline lists are tricky, you need to tweek the indentation of both list and table :

    1. first (0 space indentation) NOT WORKING

   |table|  - 3 spaces indent|
   |-----|-----|
   |conte|nt   |

2. second (0 space indentation) NOT WORKING

    |table|  - 4 spaces indent|
    |-----|-----|
    |conte|nt   |

 3. third (1 space indentation) NOT WORKING

   |table|  - 3 spaces indent|
   |-----|-----|
   |conte|nt   |

 4. fourth (1 space indentation) **WORKS GOOOOOD !!**

    |table|  - 4 spaces indent|
    |-----|-----|
    |conte|nt   |


 5. fifth - tip of the day - add a class to table

    {:.table}
    |table|  - 4 spaces indent|
    |-----|-----|
    |conte|nt   |