Jekyll - How can I make avoid a paragraph to be added on a YAML frontmatter markdownify item

Question

Okay... I have a project where I'm using Jekyll for a podcast project. And I chose to list the hosts in the shownotes by a YAML Front Matter item:

hosts:
  - Name A
  - Name B
  - Name C

Using this piece of code

<li> <strong>Hosts:</strong>
<ul>
  {% for host in page.hosts %}
<li>{{ host }}
{% endfor %}
</ul>

I receive the correct list

<ul>
<li> <strong>Hosts:</strong> 
<ul> 
  <li>Name A </li>
  <li>Name B </li>
  <li>Name C </li>
</ul>
</ul>

However, I want to markdownify this by doing

<li> <strong>Hosts:</strong>
<ul>
  {% for host in page.hosts %}
<li>{{ host | markdownify }}
{% endfor %}
</ul>

But Jekyll returns:

<ul>
<li> <strong>Hosts:</strong> 
<ul> 
  <li><p>Name A </p></li>
  <li><p>Name B </p></li>
  <li><p>Name C </p></li>
</ul>
</ul>

Any way to forbid Jekyll to add the <p> tag into the list item? Actually, if I want to add any rich formatting, I need to put HTML directly into the items, but I want to add it via Markdown'ing the Front Matter text. Any suggestions?

PS: my site is hosted at Github Pages

Answer 1

You can use the remove filter like this :

{{ host | markdownify | remove: '<p>' | remove: '</p>' }}

Answer 2

Well... It's quite old question, but still actual.

You can use | remove: '<p>' | remove: '</p>' like David Jacquel answered before. But it will remove every <p> tag in the text.

But if you want to remove <p>-tag wrapping only in cases there is only one <p> node, you'll need more complex solution.

There are few ways to do that without external plugins and filters.

And this is my solution:

{%- assign arr = yourTextVar | markdownify | strip | split: "<p>" -%}
{%- if arr.size > 2 -%}
  {{ arr | join: "<p>" | prepend: "<p>" }}
{%- else -%}
  {{ arr[1] | remove: "</p>" }}
{%- endif -%}

It'll split the text on empty <p> tag and will ignore anything like <p id="my-id">

Answer 3

I failed with "killing" the <p> and </p>.

So I added a css-class to the p-element, e.g. .handle-as-span, then I was able to "manipulate" the p-element with css (change from block to inline).

{: .handle-as-span }
![Image Alt Tag](path/to/image)

It should also work for lists / tables in markdown. I learned that the {: .handle-as-span } needs to be placed sometimes before the block, sometimes after. Just try it out. It is still ugly, but at least I was able to have my design not broken.

p.handle-as-span {
  display: inline;
}

Answer 4

use md.renderInline() to remove the <p> tag