Converting markdown to html using remark

Overview

• This blog uses the following remark and rehype plugins
  • remark-gfm — GitHub flavored markdown
  • remarkToc - Generate table of contents
  • remarkRehype - Markdown to html
  • rehypeSlug - Add ids to headings.
  • rehypeAutolinkHeadings - Add links to headings with ids back to themselves.
  • rehypeHighlight - Code block syntax highlighting

Table of contents

• Syntax highlighting

  • Javascript
  • Python

• GitHub flavored markdown (GFM)

Syntax highlighting

Javascript

import React from "react"
import ReactDOM from "react-dom"
import ReactMarkdown from "react-markdown"
import rehypeHighlight from "rehype-highlight"

ReactDOM.render(
  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
    {"# Your markdown here"}
  </ReactMarkdown>,
  document.querySelector("#content"),
)

Python

weekdays = ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday","Friday", "Saturday"]
print("Seven Weekdays are:\n")
for day in range(len(weekdays)):
    print(weekdays[day])

GitHub flavored markdown (GFM)

Feature	Support
CommonMark	100%
GFM	100% w/ remark-gfm

strikethrough

• task list
• checked item

https://example.com