markdown-it doesn't render markdown from html

Viewed 26

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:

ciao

0 Answers
Related