How to build Markdown content page with partial in between?

[j9t]

I’m probably missing something, but what’s the most elegant way of setting up a “content page” that embeds a partial, to come out with something like

• Markdown content
• Partial
• Markdown content

The only not-too-ugly way I could get to work was to switch to Nunjucks and HTML:

• HTML content
• Partial
• Markdown content

This index.njk is the result, but if there is an elegant way to keep Markdown for the content—and ideally not splitting up the content into two files, either—I’d like to take that approach.

Thanks for any pointers!

[pdehaan]

Wouldn't something like this work?

---
title: Homepage
twitter: pdehaan
email: [email protected]
website: https://twitter.com/pdehaan
---

# Heading Number One

Some paragraph text.

{% include "partials/websites.njk" %}

## Heading Number Two

1. ordered list bullet
1. more list items

> Block quote

Then you just need to set markdownTemplateEngine: "njk" in your .eleventy.js config file (which I see you're already doing; but more of a heads-up for future readers).

Seems to work for me locally (albeit with a very simple test case) and rendered out the following HTML:

<h1>Heading Number One</h1>
<p>Some paragraph text.</p>
<ul><li><a href="https://twitter.com/pdehaan">Website</a></li><li><a href="pdehaan">Twitter</a></li><li><a href="mailto:[email protected]">E-Mail</a></li>
</ul>
<h2>Heading Number Two</h2>
<ol>
<li>ordered list bullet</li>
<li>more list items</li>
</ol>
<blockquote>
<p>Block quote</p>
</blockquote>

[pdehaan]

Pushed my example repo to https://github.com/pdehaan/11ty-partial-markdown.
Also https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output is a really good tip since I was noticing some unwanted <pre> tags in my output before trimming some whitespace in the partial.

[j9t]

Thanks @pdehaan!

This was super-strange.

When I read your description and then went back to trying it, I recalled the specific problems I had in the beginning, when the partial was not rendered correctly.

Now I took a closer look at that problem and noticed how the partial did actually get included—but was for some reason rendered as code (<pre><code>…</code></pre>). I then added | safe (which gave an error I couldn’t resolve), tried different quotes and stuff, until I noticed what you mentioned then, that trimming spaces would get the partial to be displayed correctly.

The respective commit shows the changes.

Do you or does anyone know why this indentation would “break” displaying of the partial?

Thank you, @pdehaan, for your help!

[pdehaan]

Do you or does anyone know why this indentation would “break” displaying of the partial?

Yeah, that was link number two: https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output

Markdown will convert anything indented by 4 spaces into a <pre><code>..</code></pre> block (boooo!). You can disable it using something like let markdownLib = markdownIt(options).disable('code'); in your .eleventy.js file, but it will require setting your own library instance (see https://www.11ty.dev/docs/languages/markdown/#optional-set-your-own-library-instance for an example).

[j9t]

Ah, missed that.

That’s really unexpected—the partial is using Nunjucks, and indentation was done with just one tab. I’ll review the docs again, maybe I can just use the option to turn this off (no code snippets on the site in the first place).