mdeck – advanced: custom markup

class: center, middle

# mdeck — Advanced

### Custom markup & plugins

---

# What we'll cover

1. **Content classes** — mdeck's built-in block/inline wrapper syntax
2. **Custom CSS classes** — style them any way you like
3. **markdown-it plugins** — extend the parser at runtime
4. **Custom macros** — reusable slide directives

---

# Content classes (built-in)

Wrap any block or inline content with a CSS class using `.className[…]`:

```markdown
.center[This text is centered]

.pull-left[
  ## Left column
  Content here.
]

.pull-right[
  ## Right column
  Content here.
]
```

Nest them freely — `.red[.bold[important]]`.

---

# Custom CSS classes

Because content classes map directly to CSS class names, you can define
**any class you like** and immediately use it in slides.

Add to your page `<style>`:

```css
.highlight { background: #fff176; padding: 0 4px; border-radius: 3px; }
.warning   { border-left: 4px solid #f44336; background: #fff3f3; … }
.tip       { border-left: 4px solid #4caf50; background: #f3fff3; … }
```

Then use in Markdown:

```markdown
Here is a .highlight[highlighted term] inline.

.warning[
  Watch out! This is a warning callout.
]
```

---

# Live demo — custom classes

Here is a .highlight[highlighted term] inline.

.warning[
  **Watch out!** This slide uses a custom `.warning` CSS class defined in `<style>`.
]

.tip[
  **Tip:** Custom classes are just CSS — no JavaScript required.
]

---

# markdown-it plugins

`mdeck` exposes the `markdownIt` instance so you can attach any
[markdown-it plugin](https://www.npmjs.com/search?q=markdown-it-plugin)
**before** calling `createSlideshow()`.

```html
<script src="../dist/mdeck.umd.cjs"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it-mark/dist/markdown-it-mark.min.js"></script>
<script>
  // Register the plugin on the shared md instance
  mdeck.markdownIt.use(window.markdownitMark);

mdeck.createSlideshow();
</script>
```

After registering, `==highlighted==` renders as `<mark>highlighted</mark>`.

---

# markdown-it plugin — live demo

The plugin `markdown-it-mark` is loaded on this page.

Type `==text==` in your Markdown to get ==highlighted text== via the HTML
`<mark>` element.

Combined with a custom CSS class:

```markdown
.highlight[==double emphasis==]
```

.highlight[==double emphasis==]

---

# Custom macros

Macros let you define **slide-level directives** — reusable properties or
content that can be invoked with `!macro_name(arg)`.

```javascript
// Registers !badge(text) → injects a badge span into slide content
mdeck.macros.badge = function(text) {
  return '<span class="badge">' + text + '</span>';
};
```

Then in Markdown:

```markdown
!badge(New)

# My slide

Content here.
```

???

Macros are evaluated once per slide at parse time. The return value is
prepended to the slide's content as raw HTML.

---

# Putting it all together

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .badge { background: #2196f3; color: #fff; border-radius: 12px;
             padding: 2px 10px; font-size: 0.75em; }
  </style>
</head>
<body>
  <textarea id="source">
    # My slide
    !badge(New)
    .highlight[Some ==marked== text]
  </textarea>
  <script src="mdeck.umd.cjs"></script>
  <script src="markdown-it-mark.min.js"></script>
  <script>
    mdeck.markdownIt.use(window.markdownitMark);
    mdeck.macros.badge = (t) => `<span class="badge">${t}</span>`;
    mdeck.createSlideshow();
  </script>
</body>
</html>
```

---
class: center, middle

# That's it!

Extend mdeck however you need — it's just markdown-it all the way down.