Overview
When I was building a client's webstore using my existing tools, it was quite a breeze to use react-markdown & tailwind/Typography to quickly setup a static markdown page for their legal documents like Privacy Policies, those sorts of things.
However, as I was using the same tools to port my own blog from Jekyll to NextJS, I encountered a difficult problem -- nothing else works.
- Missing Code syntax
- Missing Alert boxes
- Missing Tables
- Missing Code labels
Remark Rehype Plugins FTW
After 72 hours of coffee, documentations, and writing, I've put together a starting template to rule all static site generation for NextJS -- Paper.md
Right out the box you can port your markdown files from obsidian straight into NextJS with all the beautiful CSS styling prepared. Code Syntax, language label, table of contents, tables, callouts -- all the important ones that made up the markdown experience.
Code Syntax and Headers
Syntax highlighting powered by rehype-highlight, and the headers -- A custom rehype plugin made by yours truly for easy copy button
Tables
Powered by remark-gfm, which adds a plateral of other sytaxes. Styling from Tailwind typography's CSS
Callouts / Alerts
Built on a custom fork of remark-obsidian-callout, with styling inspired by the Jekyll theme, Chirpy.
Design Principle
I wanted a tool to help developers like me write markdown pages without the hassle of setting up dependencies nor use special syntaxes like MDX to enable common features like ToC, code-copy buttons. Since an entire template ecosystem is already out there for markdown like Jekyll I simply wanted the same experience in NextJS.