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

Metadata visible when we want to display markdown #445

Open
nassima2404 opened this issue Mar 27, 2023 · 7 comments
Open

Metadata visible when we want to display markdown #445

nassima2404 opened this issue Mar 27, 2023 · 7 comments

Comments

@nassima2404
Copy link

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.

@nassima2404 nassima2404 changed the title Metadata visible when parsing markdown we want to display markdown Metadata visible when we want to display markdown Mar 27, 2023
@jfcere
Copy link
Owner

jfcere commented Mar 31, 2023

Hi @nassima2404,

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

@nassima2404
Copy link
Author

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
Copy link

Auha commented May 10, 2024

@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
Copy link
Owner

jfcere commented May 10, 2024

@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
Copy link

Auha commented May 14, 2024

@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
Copy link

Auha commented May 30, 2024

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
Copy link

bufke commented Sep 9, 2024

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 };
  }
}

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

No branches or pull requests

4 participants