goldmark VS remark

Goldmark used by Hugo.

Yuin/Goldmark is the new standard Go Markdown processor. Black Friday is older.

As for Hugo with its built-in goldmark Markdown parser and included Footnote extension, a footnote’s HTML begins like this (here, it’s the first footnote in a page):

I am writing a library to convert markdown to HTML. In Go, the common library is https://github.com/yuin/goldmark.

Hugo -> goldmark -> goldmark-highlighting -> chroma

Primarily born out of the annoyance of never-ending README copy & paste, our teammate Adam Babik decided to utilize a Markdown Abstract Syntax Tree parser to generate a naive digest of README snippets and make them easily runnable. This is a prototype (take the happy path!), but we are pleased with the initial results. Illustrated here using Husky - a popular solution to manage git hooks:

Building table in markdown is super easy and well-documented. However, having a bit of formatting within it, like carriage return within a cell as below is not possible by default. Hugo uses Goldmark (a CommonMark implementation in Go) to process the markdown. Apparently it's extremely fast, with this implementation we choose to block any HTML processing d'HTML by default.

Comparison: By default, Eleventy uses Markdown-it; like Astro, Gatsby and Next.js use Remark; and Hugo uses goldmark. As for Astro’s ability to mix components and Markdown on a page, probably the closest analogy to this is the use of MDX files in Gatsby and Next.js; Eleventy and Hugo can’t do this (however, see also “Components,” below, for some words on how Eleventy and Hugo use shortcodes which can provide some degree of code-in-Markdown functionality). Note that migrating an existing site to Astro from any of these other platforms probably will involve far more editing to your existing Markdown content than if you were migrating between two of the non-Astro platforms in this mix.

3rd party libraries: goldmark for converting MD syntax to HTML

The solution to the problem of having to escape many characters in LaTeX markup is solved in a simlar manner, however a combination of Hugo now using the Goldmark renderer and the MathJax API changing quite significantly at version 3.0, it largely needs re-writing. Firstly the script to add the class to the code blocks now looks like this:

I also didn't try this tool but it's called RemarkJS which is named too similar to revealjs.

remark. Primarily, this is a linter for Markdown. Additionally, thanks to its numerous plugins, it allows us to perform additional checks for grammatical mistakes within the content itself. Before using this linter, our content was not scrutinized to this extent.

Rehype and Remark are plugins used to transform and manipulate the HTML and Markdown content of a website, helping to enhance its functionality and appearance.

I usually combine remark-parse, remark-rehype and rehype-react to transform markdown into react components. The configuration of the processor is like:

Astro content collection are as simple as a folder containing a bunch of Markdown (or Markdoc or MDX) files if that's the only thing you need, but they can also do relationship matching between different collections, frontmatter validation using zod and you can also customize how the markdown is parsed and translated to html using rehype and remark and their plugin ecosystem.

On my personal blog I have few external links in my posts. I wanted to keep people on my website by applying target="_blank" on external (those what don't reference to my site) links. This is a common and good practice too. I write my content in Markdown, so I decided to write a remark plugin. It is simple to implement, just few lines of code.

Although we are building a custom table of contents, we won't have to write everything from scratch. To separate the Markdown/MDX content from the front matter, we'll use the Gray-matter package. It is optional in case you don't have front matter in your Markdown files. To process the Markdown itself, we'll use the Remark package. We'll also need the unist-util-visit package for traversing node trees and mdast-util-to-string for getting the text content of a node.

That's all to render the post as HTML, there are lots of things you can do to customize the results, you can check the remark plugins and rehype plugins to pass as props to and you can also take a look at some other bloggers if you're looking for different styles for example Lee Robinson's or if you liked mine.

contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.

Now we have our Cloudinary account set up, we can use it with Docusaurus. To do so, we need to create a remark plugin. This is a plugin for the remark markdown processor. It's a plugin that will transform the markdown image syntax into a Cloudinary URL.