Hi,

Wondering if you can help me understand how to configure remark-prism to show line numbers. I added this line:

import remark from 'remark';
import html from 'remark-html';
import prism from 'remark-prism';

export default async function markdownToHtml(markdown) {
  const result = await remark()
    .use(html)
    .use(prism, {
      plugins: ['line-numbers']
    })
    .process(markdown);
  return result.toString();
}

But the proper classnames are not being added to the generated <pre> tags.

Any ideas? Tried following https://github.com/sergioramos/remark-prism#plugins but didn't work.

This is a great boilerplate, but I am struggling to figure out how to extract all of the markdown files into a list that contains the link and document names, think something along the lines of a sidebar.

Any suggestions?

It would be best to mention the basic setup needed in the document

I tried to use this repo as a reference to add syntax highlight to my website and get seem to be able to reproduce the syntax highlighting as in your demo.

As far as I can tell, the logic is the same and added the custom unpkg link themes to _document.js globally.

My repo: https://github.com/jgil-r/jesus-gil

Live sample blog post with js snippet: https://jesus-gil.vercel.app/blog/managing-dotfiles

I couldn't make prismjs work on the new app dir on my project.

To be sure, it was not something with my project I took your project and migrate it to the Next 13

npm i next@latest react@latest react-dom @latest

then I changed next.config.js

module.exports = {
  experimental: {
    appDir: true,
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/prism',
        permanent: true
      }
    ];
  }
};

then I moved pages/[slug].tsx into app/[slug]/page.tsx and updated the file:

import Layout from '../../components/Layout';
import { getAllDocs, getDocBySlug } from '../../lib/docs';
import markdownToHtml from '../../lib/markdown';

export default async function Doc({ params }) {
  const doc = getDocBySlug(params.slug);
  const content = await markdownToHtml(doc.content || '');
  return <Layout meta={doc.meta}>{content}</Layout>;
}

export async function generateStaticParams() {
  const docs = getAllDocs();

  return docs.map((doc) => {
    return {
      slug: doc.slug
    }
  });
}

Still not working, even after cleaning node_modules and installing all over again.

If I try to run it as a RSC I have this error:

If I add "use client" to try to run it as a client component (to match the behaviour of the pages dir), then I have this error:

Super weird. And to be honest parsing markdown and html to add code highlighting is really a task that I would really avoid to execute on the client.

Do you guys at Vercel have any idea how to make this work? 🙏

My best regards