remark-toc VS remark-html

While some Remark plugins like Remark-toc provide this functionality, the generated table of contents is placed within the content itself, limiting its potential uses. For instance, on my blog, the table of contents is rendered outside the blog content, making it visible during post navigation. This is the type of table of contents we will build in this tutorial.

Append Editor uses Remark TOC. If you add a section #TOC, the rendered pane will have autogenerated table of contents with local links.

Here is an example of a plugin in action (remark-toc). This section is replaced by an actual table of contents.

remark is a powerful and versatile library that will allow us to start working with our markdown .md blog posts. remark-html is a plugin for remark that allows us to serialize our markdown into HTML.

This means that you can transform your HTML with tools like rehype or remark. You can find out more about the available options here.

Since we will be writing our content in Markdown, we will need a way to serialize the markdown into HTML. To do this, we will install the dependencies remark and remark-html.

Remark-react is a package that converts Markdown into React and it works with a Next.js application. It differs from remark-html as it doesn't force the developer to use dangerouslySetInnerHTML.