`include` tag in a Markdown table not properly generating the table

Help
1

I’m trying to use the include tag inside a Markdown table. However, Jekyll fails to create the table.

In my case, I have a video.html template that wraps around <video> and <figcaption> in <figure>. Here’s the template’s source:

<figure>
  <video src="{{ include.url }}"
    controls="controls"
    alt="{{ include.alt }}"
    title="{{ include.caption }}"
    >{{ include.alt }}</video>
  <figcaption>{{ include.caption }}</figcaption>
</figure>

If I type the following:

{% include video.html url="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/FileTransfer%20and%20FileChooser%20Portals.webm"
caption="Selecting files by dragging and dropping, and by using the file picker."
alt="In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app." %}

Then Jekyll generates the following HTML:

<figure>
  <video src="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/FileTransfer%20and%20FileChooser%20Portals.webm" controls="controls" alt="In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app." title="Selecting files by dragging and dropping, and by using the file picker.">In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app.</video>
  <figcaption>Selecting files by dragging and dropping, and by using the file picker.</figcaption>
</figure>

Which is intended.

However, when I use it inside a table using Markdown, e.g.

| t | t |
|---|---|
| {% include video.html url="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/FileTransfer%20and%20FileChooser%20Portals.webm" caption="Selecting files by dragging and dropping, and by using the file picker." alt="In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app." %} | t |

It generates the following HTML:

<p>| t | t |
|—|—|
| <figure></figure></p>
<video src="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/FileTransfer%20and%20FileChooser%20Portals.webm" controls="controls" alt="In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app." title="Selecting files by dragging and dropping, and by using the file picker.">In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app.</video>
<figcaption>Selecting files by dragging and dropping, and by using the file picker.</figcaption>
<p>&lt;/figure&gt;
 | t |</p>

Which is unintended; it’s not a table. Instead, it should be generating the following:

<table>
  <thead>
    <tr>
      <th>t</th>
      <th>t</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <figure>
          <video src="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/FileTransfer%20and%20FileChooser%20Portals.webm" controls="controls" alt="In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app." title="Selecting files by dragging and dropping, and by using the file picker.">In a file manager, in the '/var/home/TheEvilSkeleton/Pictures/Upscaler' directory, I grab an image named 'test.png' and drop it into an app called Upscaler. Upscaler returns '/run/user/1000/doc/98b40428/test.png' in the logs and imports the image into the app. Then, using the file picker, I open a file 'test2.jpg'. Upscaler returns '/run/user/1000/doc/92c6053f/test2.jpg' and shows the image in the app.</video>
          <figcaption>Selecting files by dragging and dropping, and by using the file picker.</figcaption>
        </figure>
      </td>
      <td>t</td>
    </tr>
  </tbody>
</table>

(Which is a table)

Am I doing something wrong? Ideally, I’d want to put videos and images inside (preferably) Markdown tables.

Thank you!

2

this SO post seems to say that html within a md table may not be supported - though I can’t find anything to say that.

One of the replies says to use the nomarkdown tag to wrap your html and that worked for their ul list, maybe try that with your include?

{::nomarkdown} yourhtmlhere-or-include {:/}

if that doesn’t work I would look into the actual md converter you are using (Kramdown?) and see if there is a way to either use a different one or find out what is wrong with what you are doing. That same post seems to have other solutions for html if that is the actual problem which it seems like it is.

1 Like
3

Another important point is that the “yourhtmlhere-or-include” must be all in one line. Any newlines get interpreted as part of the Markdown table syntax.

4

Thanks for your replies.

I tried the {::nomarkdown} method, but it didn’t work. I based my tests on the example from SO just to be sure it doesn’t work correctly. Here’s the snippet:

|Name   |Columns                               |
|-------|--------------------------------------|
|PRIMARY|{::nomarkdown} {% include video.html url="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/Decoder%20Permissions.webm" caption="Using dynamic permissions to allow and deny camera permissions for Decoder." alt="A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore." %}{:/}|

Same result as before:

<p>|Name   |Columns                               |
|——-|————————————–|
|PRIMARY|{::nomarkdown} <figure></figure></p>
<video src="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/Decoder%20Permissions.webm" controls="controls" alt="A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore." title="Using dynamic permissions to allow and deny camera permissions for Decoder.">A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore.</video>
<figcaption>Using dynamic permissions to allow and deny camera permissions for Decoder.</figcaption>
<p>&lt;/figure&gt;
{:/}|</p>

I also tried using jekyll-spaceship, as recommended in the SO thread, but it didn’t work either:

| : t : |
| :---- |
| {% include video.html url="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/Decoder%20Permissions.webm" caption="Using dynamic permissions to allow and deny camera permissions for Decoder." alt="A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore." %} |

to

<p>| : t : |
| :—- |
| <figure></figure></p>
<video src="https://theevilskeleton.fedorapeople.org/Articles/explaining-flatpaks-permission-systems/Decoder%20Permissions.webm" controls="controls" alt="A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore." title="Using dynamic permissions to allow and deny camera permissions for Decoder.">A prompt appears to allow or deny camera permissions for Decoder; I press Deny to deny the permission; I open Settings and enable the Camera permission, and Decoder can now access my camera; I deny once again and Decoder cannot access my camera anymore.</video>
<figcaption>Using dynamic permissions to allow and deny camera permissions for Decoder.</figcaption>
<p>&lt;/figure&gt;
 |</p>
5

trying doing it in steps - like if your include just had 1 line of text or something. Also start with just the same list that the SO post had to make sure that works for you. If you can get it to work as a simple thing then try adding to it to see where it breaks.

What about just using a regular html table in the md file?

6

Good idea.

I created a bold.html template, containing only <b>{{ include.text }}</b>. I tried the following Markdown table:

| t | t |
|---|---|
| t | {% include bold.html text="t" %} |

Jekyll certainly generated a table, but unfortunately it wasn’t correct:

<table>
  <thead>
    <tr>
      <th>t</th>
      <th>t</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>t</td>
      <td><b>t</b></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
  </tbody>
</table>

It created an extra empty row two columns. Instead, it should be like this:

<table>
  <thead>
    <tr>
      <th>t</th>
      <th>t</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>t</td>
      <td><b>t</b></td>
    </tr>
  </tbody>
</table>

It’s consistent with jekyll-spaceship.

I tried making it simpler by changing the template to <b>t</b> and tried:

| t | t |
|---|---|
| t | {% include bold.html %} |

But the results are consistent: an extra row with two columns. :frowning:

While I could, I prefer not to. Personally, I want to avoid using HTML directly, and instead prefer to use something that I can easily remember. Of course, if it’s too inconvenient, then I’ll resort to HTML. (This means that I don’t mind to spend a week figuring it out if there is a solution I’d be satisfied with.)

7

I don’t see it wrapped in the nomarkdown tag?

you probably stumbled on a bug of sorts, I have no idea how any of the actual jekyll code works, but you can imagine how many steps there are to render the layout, insert the content, load the includes and all that has to work with a mix of md and html. Then add in the kramdown table and its quirks and you can see how it is a lot of parts moving around.

You might want to post this on the jekyll repos issue tracker - with the simplest use case that shows the issue.

But I would play around a bit more with the nomarkdown tag and see if you can isolate when it works and when it doesn’t.

8

Good catch. I tried it, but the results are consistent:

| t | t |
|---|---|
| t | {::nomarkdown} {% include bold.html text="t" %} {:/} |

to

<table>
  <thead>
    <tr>
      <th>t</th>
      <th>t</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>t</td>
      <td> <b>t</b>
</td>
    </tr>
    <tr>
      <td></td>
      <td> </td>
    </tr>
  </tbody>
</table>

(Just to be clear, I’m not asking for help, but informing you.)

Alright. [Bug]: `include` tag in a Markdown table not properly generating the table · Issue #9368 · jekyll/jekyll · GitHub

Thanks so much for your help :slight_smile: