Metadata visible when we want to display markdown

[nassima2404]

I'm trying to use markdown with yaml front matter. When i display the markdown content in my website, it also displays metadata.
Is it possible to display only the content without showing metadata elements.

[jfcere]

Hi @nassima2404,

I am not exactly sure of your precise use case but metadata is not currently supported.

[nassima2404]

Thank you for your response.

 

I am trying to alter/strip some content from my Markdown(s) (available in my asset) before rendering them with ngx-markdown. For that, I created a loader with a get(...) Method and i added it to my app.module
   MarkdownModule.forRoot({ loader: myCustomLoader})

 

unfortunately, the method is never called.

 

can we use customLoader in ngx-markdown?

[Auha]

@jfcere I know that this is old, but front matter is very popular with blogs. It allows people to add metadata to a markdown document. If I were to create a PR for this feature would you be okay with it?

[jfcere]

@Auha I would suggest to create a marked extension. That would make the feature usable with ngx-markdown AND marked directly.

See the documentation on how to implement a custom marked extension here: https://marked.js.org/using_pro#extensions

And the documentation on how to use a marked extension with ngx-markdown here: https://github.com/jfcere/ngx-markdown#marked-extensions

[Auha]

@jfcere After doing a quick look it seems there are multiple plugins for marked out there. If that's the case then I think we should close this issue. I will try it out probably in a few weeks to see if there are any issues.

[Auha]

Okay, so I was able to get an extension working where it would split the front-matter from the actual markdown. But the issue is that I am not able to get that data and use it anywhere else. For example, I would like to use the data to display in other places of the component. I do have some alternatives to do it, but it would make my life a lot simpler to include it in this component.

would you still object for a PR to add this feature?

[bufke]

IMO this would be a useful plugin as it's a common task for static site generation.

Here's how I do it, with an example of parsing the front matter content. There are plugins, but the function is so tiny to implement oneself.

export class BlogPostComponent {
  cleanedMarkdown: string | null = null;
  title: string | null = null;
  constructor(
    private http: HttpClient,
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    const src = `/blog/${this.route.snapshot.params.slug}.md`;
    this.http.get(src, { responseType: "text" }).subscribe((data) => {
      const { title, markdown } = this.parseFrontMatter(data);
      this.title = title;
      this.cleanedMarkdown = markdown;
    });
  }

  parseFrontMatter(markdown: string): { title: string; markdown: string } {
    const frontMatterRegex = /---[\s\S]*?---/;
    const match = markdown.match(frontMatterRegex);

    let title = "";
    let content = markdown;

    if (match) {
      const frontMatter = match[0];
      content = markdown.replace(frontMatterRegex, "").trim();

      const titleMatch = frontMatter.match(/title:\s*['"]?([^'"]+)['"]?/);
      if (titleMatch) {
        title = titleMatch[1];
      }
    }

    return { title, markdown: content };
  }
}