Modules and Features

mr-md version 3 leverages standard Markdown syntax to elegantly construct complex modules.

The Live Theming Engine

mr-md features a built-in, real-time theming engine. Click the Settings Gear in the corner of your screen to customize the visual presentation of your course.

You can instantly:

• Toggle Light & Dark Modes: Seamlessly switch between light, dark, and auto modes.
• Customize Color Palettes: Swap out the core accent colors by choosing between Ink, Field, or Ember.
• Transform the UI Style: Change the overall aesthetic profile of the components on the fly by selecting the Standard, Neo Brutalist, or Playful UI modes!

Callouts

Use GitHub-flavored blockquotes to render beautiful callouts.

Syntax:

> [!warning]
> This is a warning.

Result:

Math

Syntax: Inline math uses single dollar signs: $x = y$.
Block math uses double dollar signs: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$.

Result:

Inline math: $x = y$

Block math:

KaTeX is bundled natively and renders at build-time.

Tables and Lists

Standard Markdown tables are automatically styled.

Syntax:

| Syntax | Description |
|---|---|
| Header | Title |

Result:

Nested ordered and unordered lists are also perfectly formatted out of the box.

Syntax:

1. First item
2. Second item
   - Nested unordered
   - Another one

Result:

1. First item
2. Second item
   • Nested unordered
   • Another one

Media

Instead of using HTML or shortcodes, mr-md v3 extends the standard Markdown image syntax ![caption](src).

Images

Syntax:

![A beautiful landscape](./media/nature.jpg)

Result:

Video and Audio

If the URL ends in .mp4, .webm, or .mov, it renders as a video player. For .mp3 or .wav, it renders as an audio player.

Syntax:

![Demo Video](https://www.w3schools.com/html/mov_bbb.mp4)
![Horse Sound Effect](https://www.w3schools.com/html/horse.mp3)

Result:

YouTube

If the URL contains youtube.com or youtu.be, it embeds a YouTube player:

Syntax:

![Khan Academy Tutorial](https://youtube.com/watch?v=dQCsA2cCdvA)

Result:

Quizzes

To embed an interactive quiz, create a .quiz.md file containing the quiz configuration, and link to it like an image:

![Test your knowledge](./quizzes/sample.quiz.md)

Quizzes are written using a simple markdown syntax! See the Creating Quizzes guide for details.

Result:

Simulations

Embed interactive JavaScript sandboxes natively using a link to a .js or .ts file:

Syntax:

![QCD Simulation](./sims/qcd.js)

Result:

Columns Layout

When you need side-by-side layouts, use the <columns> tag. You can pass raw markdown, code, or LaTeX into individual columns via attributes.

Syntax:

<columns label="Compare">
  <column markdown="**Classical Mechanics**\n\nClassical mechanics describes the motion of macroscopic objects, from projectiles to parts of machinery, and astronomical objects." />
  <column markdown="**Quantum Mechanics**\n\nQuantum mechanics describes the physical properties of nature at the scale of atoms and subatomic particles." />
</columns>

Result: