Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Excerpt not rendering markdown tags #1380

Closed
jonathanyeong opened this issue Aug 28, 2020 · 4 comments
Closed

Excerpt not rendering markdown tags #1380

jonathanyeong opened this issue Aug 28, 2020 · 4 comments

Comments

@jonathanyeong
Copy link

jonathanyeong commented Aug 28, 2020

Description
I'm getting an excerpt that contains raw markdown when I use custom front matter parsing from the docs: https://www.11ty.dev/docs/data-frontmatter-customize/.

To Reproduce

  1. Add this config to .eleventy.js
  eleventyConfig.setFrontMatterParsingOptions({
    excerpt: true,
    excerpt_separator: "<!-- excerpt -->",
    excerpt_alias: 'my_custom_excerpt'
  });
  1. Add to a markdown post that has a link [test](example.com) in the excerpt.
  2. Call the custom excerpt post.data.my_custom_excerpt.

Expected behavior
I expect the link to render as a link

Actual behavior
It renders the raw markdown.

Screenshots
Raw markdown in excerpt

This is the markdown:

Last week I wrote up a [learning plan](https://www.jonathanyeong.com/blog-posts/phoenix-elixir-learning-plan/) for Phoenix & Elixir. In this post, I wanted to add an addendum to phase 1 of the plan and give a quick progress update.

Environment:

  • Mac 10.15.6
  • Eleventy Version - 0.11.0

Additional context
There are workarounds to this issue such as creating custom shortcodes, but would love to use the frontmatter excerpt..

Another, consideration is to render the markdown and then strip the tags. Stripping the tags is seen in frameworks such as Hugo (via plainify - https://gohugo.io/functions/plainify/). And can provide a more uniform excerpt. Totally my opinion though! Feel free to ignore if it won't provide value!

@jonathanyeong
Copy link
Author

jonathanyeong commented Aug 28, 2020

Doing a little bit of digging because I'm curious. Looks like this is where we generate the excerpt:

fm.excerpt.trim() +
I wonder if maybe we could call a TemplateRender on that excerpt? Your guess is better than mine though!

@revelt
Copy link

revelt commented Sep 24, 2020

The excerpts indeed come as raw markdown. But that's not a problem! Just create a markdown rendering filter and pass the value through it. That filter will become handy in other places later...

In .eleventy.js I'm using only:

eleventyConfig.setFrontMatterParsingOptions({ excerpt: true });

The excerpt separator is default, --- and it's shown in template using:

{{ article.data.page.excerpt | md | safe }}

The | md filter looks like this:

// .eleventy.js
const markdownIt = require("markdown-it");
// ...
eleventyConfig.addFilter("md", function (content = "") {
  return markdownIt({ html: true }).render(content);
});

Here's my excerpt with links:

excerpt


I've been thinking about this; in theory, getting raw markdown gives more freedom to process the excerpt before displaying it. For example, imagine if this was corporate blog and you were asked to add different tracking tags on URL's on excerpts, so that analytics team could separate internal links in articles from same-URL links in excerpts... That could be done tweaking this markdownIt() call...

I don't know, it could be an issue or it could be just that we need some more documentation instructions how to create and use md filter on https://www.11ty.dev/docs/data-frontmatter-customize/

@Noogic
Copy link

Noogic commented Nov 19, 2020

The filter @revelt mentions solve the problem in an elegant way and with minimum complexity. And it's true, it gives more flexibility.

@jonathanyeong
Copy link
Author

Awesome! That filter looks awesome. I'm going to close this issue since there's an elegant way to solve the problem!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants