Extended Markdown Post

Table of Contents

• Standard Markdown
• Extensions
  • TOC
  • Emphasis
  • GFM
  • OEmbed
  • Syntax Highlighting
  • Emojis

Standard Markdown

Since all posts are written in markdown and rendered statically as HTML at build time; we have access to the rich text feature of markdown. For example we can get all the usual markdown features like bold, and italics as well as:

• Bullet
• Points

and also:

1. Numbered
2. Lists

Blockquotes

External Links automatically open in a new tab, unlike Internal Links which use the SvelteKit clientside router.

Other standard markdown features like images are also included. Read the post on images to learn more.

Extensions

This project uses remark to parse markdown and so there are a handful of useful extensions included to add even more functionality.

TOC

A TOC or table of contents can be added by simply adding the heading Table of Contents anywhere. It will populate the list of contents with headings that come after the Table of Contents. See the table of contents at the top of the post for an example.

Emphasis

Standard markdown does not have a way to highlight/mark or underline text. With this extended renderer you can do the following:

==highlight==

GFM

GFM or Github Flavoured Markdown adds:

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

OEmbed

This automatically converts URLs in your markdown to the embedded version of those URLs. Its useful for adding in youtube videos into your content for example. Learn more at oembed.com.

https://www.youtube.com/watch?v=DTIZikaOTDE

Syntax Highlighting

Using Prism.js (and refractor) for highlighting and rehype-prism-plus to add a bit more functionality. You can specify a language at the begining of a code block, the list of supported languages is here.

def my_function():
  print("Hello from a function") 

You can also add properties to highlight certain lines and show line numbers.

const hello = (name) => `Hi, ${name}!`;

// The following line will be highlighted
hello("World")

It even supports diffs, by adding the diff- prefix before the language!

const add = (a: number, b: number) => {
- return a - b
+ return a + b
}

Emojis

You can insert emojis using their shortcodes in this format :emoji:. The full list of emojis is here.

This can be combined with other standard markdown features to ‘hack’ together even more functionality, for example see below.

⚠️ Warning: Do not push the big red button.

📝 Note: Sunrises are beautiful.

💡 Tip: Remember to appreciate the little things in life.