Escaping kramdown for paragraphs


#1

I have my content in the following paragraph, which is using the tachyons framework:

<div markdown="0"><p class="f4 lh-copy mt0 pt0 black-70"> {{ content | markdownify }}</p></div>

All the content ends up taking on the following structure:

image

Is there something I can do to get the content to wrap in the necessary paragraph tag?

I have the markdown=0 setting in there because I was just playing around, but i originally was working with that tag omitted.


#2

I was just learning about Kramdown within HTML elements this morning. Using markdown="0" in your div is going to turn off and Markdown parsing within the element. If you’re trying to implement it with the markdownify (I’m not familiar with that, being new around here), perhaps just get rid of markdownify and go with markdown="1" instead. You may need to play with which HTML element needs the markdown attribute. Maybe its better on the div, maybe on the p? Good luck!


#3

ok I gave that a shot but still no dice. this change, however yields a totally unformatted paragraph, which means the style takes.

<p class="f4 lh-copy mt0 pt0 black-70"> {{ page.content }}</p>

however that means there are no linebreaks where needed. this is why i originally resorted to content | markdownify before i got into the paragraph styling mess.


#4

OK, what just dawned on me is I am working within a content file (a .md with yaml front matter) and it’s dawning on me that you’re working in a layout (.html) file.

This works in a content file:

<aside class="notice" markdown="1">

#### An Aside on Audio Quality {#an-aside-on-audio-quality}

An old adage about video production is […]
</aside>

…maybe there’s something amiss in your content file that’s feeding {{ page.content }}? Do you have front matter? (Markdown won’t be parsed without at least the double --- present)


#5

This isn’t pretty and it’s extra code but you can use the remove filter to remove the opening and closing p tags.

When you Markdownify a string of text it converts it to a paragraph, and since you already are wrapping it with <p></p> removing the extras is the way to go.

<p class="f4 lh-copy mt0 pt0 black-70"> {{ page.content | markdownify | remove: '<p>' | remove: '</p>' }}</p>

I do this in a few places in some of my themes to get Markdown formatted headlines with nesting <p></p> inside of my h1 elements.


#6

yep this works in a limited circumstance. and it looks like a lot of other useful stuff on that Liquid page as well.