Riebeckite
Menu
Color mode

最初の Plugin を追加する

Plugin は Riebeckite サイトに検索や図表、埋め込みなどの機能を追加します。このガイドでは highlight プラグインを追加し、==二重イコール== 構文でテキストをハイライトできるようにします。

見た目を変えたい場合は 最初の Theme を変える を参照してください。

1. インストール

生成されたサイトのディレクトリで次のコマンドを実行してください。

sh
npm install @riebeckite/plugin-highlight

2. インポート

riebeckite.config.ts を開き、先頭にインポートを追加してください。

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

3. Plugin を追加

plugins 配列に highlight() を追加してください。

ts
plugins: [
  // ... 既存の plugin
  highlight(),
],

4. 試す

開発サーバーを再起動 (または起動) してください。

sh
npm exec riebeckite dev

サイトを開き、Markdown ファイル (例: content/index.md) を編集してハイライトを書いてください。

md
この文には ==ハイライトされる語句== が含まれています。

保存してページを見ると、== で囲まれた部分がハイライトされています。

5. 次のステップ

History

1 changesCollapseExpand
1 + # 最初の Plugin を追加する
2 +
3 + Plugin は Riebeckite サイトに検索や図表、埋め込みなどの機能を追加します。このガイドでは **highlight** プラグインを追加し、`==二重イコール==` 構文でテキストをハイライトできるようにします。
4 +
5 + > 見た目を変えたい場合は [最初の Theme を変える](./first-theme.ja.md) を参照してください。
6 +
7 + ---
8 +
9 + ## 1. インストール
10 +
11 + 生成されたサイトのディレクトリで次のコマンドを実行してください。
12 +
13 + ```sh
14 + npm install @riebeckite/plugin-highlight
15 + ```
16 +
17 + ---
18 +
19 + ## 2. インポート
20 +
21 + `riebeckite.config.ts` を開き、先頭にインポートを追加してください。
22 +
23 + ```ts
24 + import { highlight } from "@riebeckite/plugin-highlight";
25 + ```
26 +
27 + ---
28 +
29 + ## 3. Plugin を追加
30 +
31 + `plugins` 配列に `highlight()` を追加してください。
32 +
33 + ```ts
34 + plugins: [
35 + // ... 既存の plugin
36 + highlight(),
37 + ],
38 + ```
39 +
40 + ---
41 +
42 + ## 4. 試す
43 +
44 + 開発サーバーを再起動 (または起動) してください。
45 +
46 + ```sh
47 + npm exec riebeckite dev
48 + ```
49 +
50 + サイトを開き、Markdown ファイル (例: `content/index.md`) を編集してハイライトを書いてください。
51 +
52 + ```md
53 + この文には ==ハイライトされる語句== が含まれています。
54 + ```
55 +
56 + 保存してページを見ると、`==` で囲まれた部分がハイライトされています。
57 +
58 + ---
59 +
60 + ## 5. 次のステップ
61 +
62 + - [Plugin リファレンス](../plugins/README.ja.md) で他の Plugin を探す
63 + - 図表用に `@riebeckite/plugin-mermaid` を試す
64 + - グラフ可視化用に `@riebeckite/plugin-graphviz` を試す
65 + - [自作 Plugin の書き方](../plugins/writing-a-plugin.ja.md) を学ぶ