Banner image for the blog post “Everything MDRS can do, in one post” — A tour of MDRS, the Markdown dialect behind this site. Plain CommonMark and GFM first, then callouts, tabs, steps, math, diagrams, charts, live data and variables, all in one post.

Everything MDRS can do, in one post

Profile picture of farhnkrnapratma
Authored by farhnkrnapratma
7 min read
View as  MD
TL;DR
  • MDRS is a Markdown dialect that adds extensions to CommonMark and GFM.
  • It supports inline HTML and entities.
  • Links can be inline, by reference, or bare.
  • MDRS adds task states to GFM.
Summarize this article

Welcome to fkp.my.id. This post is written in MDRS 1.0, the Markdown dialect that powers every article here. It is plain Markdown first. Everything after that is an extension, and each one appears at least once below, so the source of this post doubles as a reference.

Note

Every section starts with the syntax you already know from CommonMark and GitHub Flavored Markdown, then adds what MDRS brings on top. Jump straight to the extensions if you know Markdown well.

Writing text

A paragraph is just lines of text. A single line break inside it becomes a space, and a backslash at the end of a line
forces a hard break.

You get bold, italic, both, strikethrough and inline code. Inline HTML covers the rest: press Ctrl + K, write H2O and E = mc2, highlight a phrase, underline one, or expand an MDRS abbreviation. Small print is fine too, as are short quotations, titles of works and dates like .

Escape any punctuation with a backslash: *not italic*, # not a heading, and $$ not math. Entities work as well: © — →.

Links can be inline, by reference, or bare: https://github.github.com/gfm/ and www.example.com both become links, as does an address like hello@example.com. Links to other sites open in a new tab and get a small arrow; links within this site don't.

The site icon

Definitions

MDRS
Markdown Rich Syntax, a drop-in superset of CommonMark and GFM.
.mdrs
The file extension for documents that use it.

Lists

Bullets and numbers work as you'd expect, and lists nest:

  • Server
    • KaTeX math
    • Variables and live data
  • Browser
    • Mermaid diagrams
    • Charts
  1. Numbered lists can start anywhere,
  2. and the numbers after the first one don't matter.
  3. This is still item five.

A loose list, with blank lines between items, keeps its paragraphs apart:

  • The first item has room to breathe.

  • So does the second one.

Task states

GFM gives you [ ] and [x]. MDRS adds five more states:

  • Done:
    Write the engine
  • In progress:
    Write the docs
  • Failed:
    Port the parser to Rust
  • Skipped:
    Support single-dollar math
  • Important:
    Keep it a drop-in superset
  • Question:
    Ship a VS Code extension?
  • To do:
    Publish the first release
    • Done:
      Reserve the package names
    • To do:
      Write the changelog

They work in numbered lists too:

  1. Done:
    Reserve @mdrs/core
  2. In progress:
    Extract the engine
  3. To do:
    Tag v0.1.0

Quotes and tables

A blockquote is a > at the start of a line.

Quotes nest, and hold any Markdown:

  • even lists
Feature Where it runs Status
Directives Server Stable
Math Server Stable
Diagrams Browser Stable
Charts Browser Beta

Code

Fences take a language, an optional filename and an optional mark to highlight lines:

export function greet(name: string) {
    const message = `Hello, ${name}!`;
    console.log(message);
    return message.length;
}

Diffs are coloured line by line:

- const engine = 'markdown';
+ const engine = 'mdrs';

A shell fence without script constructs becomes a command block, with a prompt instead of line numbers:

bun add @mdrs/core

Indented code works too:

plain indented code
keeps its spacing

Callouts and alerts

Note

Background the reader can safely skip.

Tip

A shortcut that saves time.

Important

A step that must not be skipped.

Warning

A breaking change or a surprise.

Caution

Something that can lose data.

GitHub's alert syntax renders the same callouts, so READMEs look right here:

Tip

This one was written as > [!TIP].

Custom callouts take a title and an optional Lucide or Bootstrap icon:

Changelog

v1.0: frontmatter, GitHub alerts, numbered task states and mdrs-* classes.

Made with Bootstrap Icons

Prefix the name with bi- or lucide- to pick the library.

Details

What makes MDRS a drop-in superset?

Plain Markdown renders exactly as on any CommonMark or GFM renderer. MDRS only adds meaning where plain Markdown has none, or where a document opts in, as this one does with its :::define block.

Details nest

And they can hold any Markdown.

Raw HTML details get the same styling

Leave blank lines around Markdown inside them.

Tabs and snippets

Directives, math, variables and live data are resolved on the server, so readers get finished HTML.

Snippet groups add copy and download controls. Groups with the same key stay in sync, so picking "npm" below switches both:

bun add @mdrs/core
bun run dev

Steps

  1. Write the post in MDRS.
  2. Import the file in the admin.
  3. Publish.

Draft

Start from the frontmatter: title, excerpt and tags.

Review

The editor checks every expression while you type.

Ship

Readers get static HTML, rendered on the server.

Media

A link ending in .mp4 or .webm, written as an image (![Clip](https://…/clip.mp4)), becomes a <video> player.

Math

Inline formulas sit in the text, like Euler's identity eiπ+1=0e^{i\pi} + 1 = 0 or x2x^2. Prices stay prices, though: a single $ never starts math, so a coffee is $5 and a book is $10.

∫−∞∞e−x2 dx=π\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}

Formulas can use variables. There are 5 headline features:

n=5,(n2)=10n = 5, \quad \binom{n}{2} = 10

Diagrams and charts

Rendering diagram…
Loading chart visualization…

Variables and live data

This post's :::define block mixes literals, expressions and live data. Farhan Kurnia Pratama has published 1 posts on fkp.my.id so far, and this one was written in 2026.

  • The second headline feature is tabs.
  • The engine's file extension is ${engine.extension}, and it ships 14 directives.
  • Is this build stable? true.

Conditional text only shows when its condition is true, and can hold its own expressions:

This is a stable build of MDRS 1.0.

The newest post is Everything MDRS can do, in one post.

A backslash keeps the syntax literal: ${site} and [text].${stable} stay as written.

Footnotes and references

MDRS renders math on the server[1] and diagrams in the browser[2]. Cite a source twice[3] and it gets a back-link for each use[3].

References

  1. ^With KaTeX, so formulas need no client JavaScript.

  2. ^Mermaid loads only on pages that have a diagram.

  3. abThe CommonMark specification, https://spec.commonmark.org.

Showing MDRS source

Code spans and code blocks never render MDRS: :::note, ${site} and $$x$$ stay literal. For whole examples, :::ignore-render prints the source as-is, and a longer fence can hold a complete directive:

:::tip
Directives open with `:::name` and close with `:::`.
:::

That's the whole language, in one post. Every rule behind it is plain enough to fit in your head: write Markdown, and reach for a directive only when Markdown runs out.

Help improve this article

Was this article helpful to you?

Subscribe to Stay Updated

Stay updated by email whenever something new is published. You can unsubscribe anytime.

Comments (0)

By posting a comment, you agree to our Terms of Service and Privacy Policy.

No comments yet

Be the first to share your thoughts on this article.

Farhan Kurnia Pratama

Software Engineering | AI Engineering | UI/UX Research | Cybersecurity

Security and privacy-focused Software Engineer working across AI Engineering, UI/UX Research, and Cybersecurity, with a focus on building intelligent, secure, reliable, maintainable, user-centered, and privacy-conscious software.

© 2026 Farhan Kurnia Pratama. Terms Privacy Security Sitemap RSS Status