September 1st, 2020


Gatsby has a lot of cool plugins

Gatsby has a lot of cool plugins blog image

You may have realised that the codeblocks on this blog look really nice...

import string charset = '' + string.ascii_letters + string.punctuation + string.digits def generatePassword(index: int): current = index result = [] while True: remainder = current % len(charset) result.append(charset[remainder]) current = current // len(charset) return ''.join(result)

Believe it or not, all the blog posts on this page are formatted from a markdown file!


This is what is used to get those really nice looking code outputs. More information including installation can be found here.


This lets me write latex in markdown!! It can be inline like $a^2+b^2=c^2$, or it can be in full size mode like so:

$$ \begin{aligned} I &= \int{a}^{b} \frac{f(x)}{g(x)} dx \ \therefore I &= \int{a}^{b} \frac{f(x)}{f'(x)} \frac{f'(x)}{g(x)} dx \end{aligned} $$

One interesting point is that some environments I'm used to using like \begin{align*} \end{align*) are unavailable. Here is a list of supported latex environments and other commands you can use with $K^AT_EX$. More information here.



This is something created with Gatsby in mind, a fusion between Markdown md and jsx, allowing for importing code inside a markdown file for extra utility.

There are some amazing things you can do with it right now, such as Gatsby Theme Waves, which lets you tell a story by animating changes in code blocks, powerpoints and graphs. A super cool tool, but I just got remark to work, so I will probably implement this later when there are more packages I want that require mdx.

To install mdx, you may find these links helpful:

  • Gatsby - How to convert an existing Gatsby blog to use MDX
  • Typescript typings


Feel free to reach out if you're looking for a software developer, want to connect or have a question.
[email protected]
© Justin Or | Made with Gatsby, Theme-ui and MDX.