This is my first question on stack, so please be kind.
I'm building a blog with Next.js and i'm using gray-matter and also markdown-it for convert markdown to html. Gray-matter does is job but markdown-it doesn't render markdown from files.
This is a page [slug].js):
import fs from "fs";
import matter from "gray-matter";
import Markdown from "markdown-it";
// The page for each post
export default function Post({ frontmatter, content }) {
const md = new Markdown();
const { titolo, categoria, data, tags} = frontmatter;
return (
<main className="py-14 md:py-28">
<h1 className="text-3xl mb-4">{titolo}</h1>
<h2 className="text-slate-400">{categoria}</h2>
<h2 className="text-slate-400 mb-4">{tags}</h2>
<h3 className="mb-16">{data}</h3>
<div dangerouslySetInnerHTML={{ __html: md.render(content) }} />
</main>
);
}
// Generating the paths for each post
export async function getStaticPaths() {
// Get list of all files from our posts directory
const files = fs.readdirSync("./pages/posts");
// Generate a path for each one
const paths = files.map((fileName) => ({
params: {
slug: fileName.replace(".md", ""),
},
}));
// return list of paths
return {
paths,
fallback: false,
};
}
// Generate the static props for the page
export async function getStaticProps({ params: { slug } }) {
const fileName = fs.readFileSync(`./pages/posts/${slug}.md`, "utf-8");
const { data: frontmatter, content } = matter(fileName);
return {
props: {
frontmatter,
content,
},
};
}
Here is my markdown file:
---
titolo: "Guida Scrollreveal JS"
categoria: "Librerie Javascript"
data: "2022-03-13"
tags: "#javascipt #librerie"
---
###Ciao
Prova Ciao
"###Ciao" is the output that returns instead of an: