Syntax Sugar

Syntax sugar lets you call components with Markdown directives instead of repeating full Vue tags.

Overview

Using Block as an example, the full Vue syntax is:

<Block type="info" title="Note">
Content here
</Block>

The equivalent Markdown directive is:

:::block{type="info" title="Note"}
Content here
:::

Available Syntax

Block

:::block{type="info" title="Title"}
Your content here...
:::

Types: default, info, success, warning, danger, example, alert

Theorem

:::theorem{type="theorem" title="Theorem Name"}
Mathematical content here...
:::

Types: theorem, lemma, proposition, corollary, definition, example, remark, proof, note, claim

Highlight

:::highlight{type="warning"}
Text to highlight
:::

Types: primary, success, warning, danger, info (legacy alias: color="yellow|green|blue|pink|purple")

Cite

:::cite{author="Smith et al." year="2024"}
Citation context
:::

Steps

:::steps{:steps='[{"title":"Step 1","description":"Description"}]' :activeStep="1"}:::

Keywords

:::keywords{:keywords='["Keyword 1", "Keyword 2"]' color="blue"}:::

Columns

Use +++ to separate columns:

:::columns{columns="2" gap="2rem"}
Content for column 1
+++
Content for column 2
:::

Complete Example

---
layout: default
title: Research Methods
---

## Our Approach

:::block{type="info" title="Key Innovation"}
We propose a novel method that combines...
:::

:::theorem{type="theorem" title="Convergence"}
For any $\epsilon > 0$, the algorithm converges in $O(1/\epsilon^2)$ steps.
:::

:::columns{columns="2"}
### Advantages
- Fast convergence
- Low memory usage
+++
### Applications
- Image classification
- Natural language processing
:::

:::keywords{:keywords='["Deep Learning", "Optimization", "Convergence"]' color="blue"}:::

Notes

• The theme processes these directives at build time.
• Each directive accepts the same props as its component.
• Use Vue binding syntax such as :prop for arrays and objects.
• Saving slides.md refreshes directive content. Restart Slidev after changing theme dependencies or configuration if the change is not picked up.