Riebeckite
Menu
Color mode

Add Your First Plugin

Plugins add features to your Riebeckite site — search, diagrams, embeds, and more. This guide walks through adding the highlight plugin, which lets you mark text with ==double equals== syntax.

Want to change how the site looks instead? See Change Your Theme.

1. Install

In your generated site directory:

sh
npm install @riebeckite/plugin-highlight

2. Import

Open riebeckite.config.ts and add the import at the top:

ts
import { highlight } from "@riebeckite/plugin-highlight";

3. Add the Plugin

Find the plugins array in your config and add highlight():

ts
plugins: [
  // ... existing plugins
  highlight(),
],

4. Try It

Restart the dev server (or start it if not running):

sh
npm exec riebeckite dev

Open your site and edit a Markdown file (e.g., content/index.md). Add some highlighted text:

md
This sentence has a ==highlighted phrase== inside it.

Save and check the page — the text between == is now highlighted.

5. Next Steps

History

1 changesCollapseExpand
1 + # Add Your First Plugin
2 +
3 + Plugins add features to your Riebeckite site — search, diagrams, embeds, and more. This guide walks through adding the **highlight** plugin, which lets you mark text with `==double equals==` syntax.
4 +
5 + > Want to change how the site looks instead? See [Change Your Theme](./first-theme.en.md).
6 +
7 + ---
8 +
9 + ## 1. Install
10 +
11 + In your generated site directory:
12 +
13 + ```sh
14 + npm install @riebeckite/plugin-highlight
15 + ```
16 +
17 + ---
18 +
19 + ## 2. Import
20 +
21 + Open `riebeckite.config.ts` and add the import at the top:
22 +
23 + ```ts
24 + import { highlight } from "@riebeckite/plugin-highlight";
25 + ```
26 +
27 + ---
28 +
29 + ## 3. Add the Plugin
30 +
31 + Find the `plugins` array in your config and add `highlight()`:
32 +
33 + ```ts
34 + plugins: [
35 + // ... existing plugins
36 + highlight(),
37 + ],
38 + ```
39 +
40 + ---
41 +
42 + ## 4. Try It
43 +
44 + Restart the dev server (or start it if not running):
45 +
46 + ```sh
47 + npm exec riebeckite dev
48 + ```
49 +
50 + Open your site and edit a Markdown file (e.g., `content/index.md`). Add some highlighted text:
51 +
52 + ```md
53 + This sentence has a ==highlighted phrase== inside it.
54 + ```
55 +
56 + Save and check the page — the text between `==` is now highlighted.
57 +
58 + ---
59 +
60 + ## 5. Next Steps
61 +
62 + - Explore more plugins in the [Plugins reference](../plugins/README.en.md)
63 + - Try `@riebeckite/plugin-mermaid` for diagrams
64 + - Try `@riebeckite/plugin-graphviz` for graph visualizations
65 + - Learn to [write your own plugin](../plugins/writing-a-plugin.en.md)