How to use liquid in markdown

[arpeasal]

I'm having a problem with rendering my home page. A partial is rendering the html as html rather than what I expect it to show.

I'm using liquid for templating.

I have an _includes/layouts/base.liquid file for a base template

I have an _includes/layouts/page.liquid file with layout: layouts/base.liquid in the front matter.

My homepage is in source (designated as input in .eleventy.js)

I have a partial (_includes/partials/articles.liquid) which produces a list of articles. This partial displays fine if I include it in the _includes/layouts/page.liquid file, by using {% include "partials/articles.liquid" %}. However, if I try to use this partial in the index.md file, since this is a markdown file instead of a liquid file, the partial is rendered as the html.

Is there a way to use liquid constructs in the markdown files?

[pdehaan]

This will probably be difficult to debug without some source code since there can be a lot of subtle things in .md files which could affect rendering.

If you try viewing the generated source and see some unexpected <pre> tags, you're probably encoutering https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output (and will need to create a custom Markdown parser instance which disables indented code blocks).

[arpeasal]

I did see some <pre> tags when I inspected this.

I thought I saw somewhere a while back that there is a way to include liquid in the front matter so it will parse that first, but I couldn't find where I saw that and I might be wrong. Either way, I don't know what the syntax in the front matter would be.

This is probably not a big issue. Since I want the list of articles on the home page but not the other pages, I can just make a separate home_page.liquid template and include that partial there. That's no problem.

[pdehaan]

If you're seeing <pre> tags, then I'm guessing it's almost certainly a case of indented content getting converted to <pre> blocks due to the odd markdown indenting rules.

Yeah, for things like permalink you can use "/site/{{ title | slugify }}/" for some basic liquid stuff. But not sure if I've tried w/ shortcodes or anything more complex. Although I have used eleventyComputed to do more complex formatting. See https://www.11ty.dev/docs/data-computed/ for some examples.

I personally find it easier to use separate template and directory specific data files instead of using JavaScript front matter (for example, src/index.liquid and src/index.11tydata.js), but that's just me. 🤷

[arpeasal]

Well, while taking my daily walk, I decided making a separate template for the home page wasn't that great an idea. If I want the articles list inside the content, as opposed to before or after {{ content }} I'd have to do some serious working around. So I decided to try one of the suggestions in the article you referenced, and disable indented block codes. Followiing the instructions, I added the following code near the top of my .eleventy.js file (note: The instructions used "let" but I changed that to "const.):

const markdownIt = require("markdown-it");
const options = {
  html: true
};
const markdownLib = markdownIt(options).disable('code');

I then added the line below in the module.exports function:
eleventyConfig.setLibrary("md", markdownLib);

That seems to have resolved the problem