Logo vypxl

What my Markdown can do

Published Thu Jul 20 2023 ~3 min read
#webdev

I installed several Remark and Rehype plugins, here I document which features they and my own plugins provide to my blog.

Table of contents

Frontmatter

Allows for defining frontmatter in my markdown files like this:

---
meta: This is frontmatter data
what: Later accessible as an object
---
 
> Text...

Directives

Allows to create custom directives to easily create custom items and blocks with my own code. Currently, I implement:

  • Abbreviations

YAML has a tooltip!

:abbr[YAML]: YAML Ain't Markup Language

Emoji

Allows for emoji text codes to be replaced with actual emoji (:thumbsup: => 👍 ).

GitHub Flavored Markdown (GFM)

Allows me to use GitHub Flavored Markdown, enabling features like strikethrough, tables, tasklists, and more.

An example table in GFM:

Column 1Column 2
Cell 1Cell 2
Cell 3Cell 4
| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Allows to easily link to GitHub stuff, for example me (@vypxl), or an issue (vypxl/tx8#1).

@vypxl fixed this in #42

Blockquote Admonitions

Allows to create custom blocks via blockquote admonitions, for example info or warning blocks.

Warning This is a warning

Note This is a note

> **Warning**
> This is a warning
 
> **Note**
> This is a note

LaTeX Math

Allows math formula rendering.

Inline math:

Block math:

Inline math: $e=mc^2$
 
Block math:
 
$$
f(x) = \frac{1}{\sqrt{2\pi}}e^{-\frac{1}{2}x^2}
$$

Reading Time

I wrote this plugin myself.

This plugin estimates the time it takes to read an article. Uses dead simple word counting. Reading time is .

Table of Contents (TOC)

Automatically generates a TOC, when a level 2 heading ## Table of contents is present as the first subheading.

Autolinking Headings

This plugin automatically adds links to headings. See the little link icons that appear when you hover over a heading? Try clicking on one!

Code Highlighting

Uses shiki for highlighting code blocks. Also supports features like linenumbers, titles, captions and highlighting specific lines or words.

I added some more functionality, like showing the language of the code block, and a 'copy code' button.

Title for rust code example
fn helloWorld() {
  println!("Hello, world!")
 
  println!("Code {} are cool!", "blocks");
}
This is a demonstration of a caption.
```rust showLineNumbers {2} /{}/ title="Title for rust code example" caption="This is a demonstration of a caption."
fn helloWorld() {
  println!("Hello, world!")
 
  println!("Code {} are cool!", "blocks");
}
```