Hello World!

In this blog post, we will look at a few features that Bon5R has to offer. Some of these features are not included in Next.js and vanilla MDX, and have been added using remark¹ and rehype² plugins for markdown.

Syntax Highlighting

The code below is written with Python and is syntax highlighted using the remark plugin remark-prism³. The theme used is One Dark (based on Atom's One Dark Syntax). The CSS for the code is from the repository prism-themes⁴.

def collatz(n):
  if n %% 2 == 0:
    return n / 2
  else:
    return 3 * n + 1

Github Flavored Markdown

This project also features Github Flavored Markdown, which allows extended syntax of markdown while writing e.g tables, footnotes, tasklists etc. Here is a small demo of the use of Github Flavored Markdown:

Autolink literals

www.example.com, https://example.com, and contact@example.com.

Footnote

A note⁵

Strikethrough

one or two tildes.

Table

Tasklist

• to do
• done

This uses the remark plugin, remark-gfm⁶ to achieve the above. To learn more about Github Flavored Markdown, visit the documentation hosted on Github.

LaTeX Support

We can render inline math, for example $\zeta(1) = \frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \cdots$. We can also render display math like so:

For rendering inline math, we can use the following:

$\zeta(1) = \frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \cdots$

and for display math:

$$
\zeta(s) = \sum_{n = 1}^\infty \frac{1}{n ^ s}
$$