1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GROWIで目次を表示するプラグインを作りました

Last updated at Posted at 2025-01-12

オープンソースのWikiであるGROWIにはプラグイン機能が用意されています。自社のデータを表示したり、表示をカスタマイズするのに利用できます。

今回は、GROWIプラグインとして目次を表示するプラグインを作りました。GROWIではもともと、ページの右側に目次を表示しています。このプラグインでは、ページの中に目次を表示するのが特徴です。

プラグインの動作

Markdownは以下のように、 ## 目次 のように記述します。そうすると、このセクションの中に目次が表示されます。この他、以下の書き方にも対応しています。

## TOC

## Table of contents

## 目次

## 目录

image.jpg

特徴

本プラグインの特徴としては、remarkjs/remark-tocというRemarkプラグインを利用している点が挙げられます。GROWIはMarkdownのレンダリングにRemarkを採用しているので、既存のRemarkプラグインを取り込んで利用できる可能性があります(可能性、というのは試した限り利用できないプラグインが多かったからです…)。

コードについて

コードはgoofmint/growi-plugin-toc: This GROWI plugin generates table of contents in page.にて公開しています。ライセンスはMIT Licenseになります。

プラグインを追加する

利用する際には、GROWIの管理画面の プラグイン にて追加してください。URLは https://github.com/goofmint/growi-plugin-toc です。

Admin

コードについて

前述の通り、本プラグインではRemarkプラグインを利用しています。そのため、コードはほとんどありません。以下のように、 remarkPluginsrehypePlugins にRemarkプラグインを追加するだけです。

client-entry.tsx
import rehypeSlug from 'rehype-slug';
import remarkToc from 'remark-toc';

const activate = (): void => {
  if (growiFacade == null || growiFacade.markdownRenderer == null) {
    return;
  }
  const heading = '(table[ -]of[ -])?contents?|toc|目次|目录';
  const { optionsGenerators } = growiFacade.markdownRenderer;
  const originalCustomViewOptions = optionsGenerators.customGenerateViewOptions;
  optionsGenerators.customGenerateViewOptions = (...args) => {
    const options = originalCustomViewOptions ? originalCustomViewOptions(...args) : optionsGenerators.generateViewOptions(...args);
    // TOCプラグイン追加(表示用)
    options.remarkPlugins.push([remarkToc, { heading }] as any);
    options.rehypePlugins.push(rehypeSlug as any);
    return options;
  };

  // For preview
  const originalGeneratePreviewOptions = optionsGenerators.customGeneratePreviewOptions;
  optionsGenerators.customGeneratePreviewOptions = (...args) => {
    const preview = originalGeneratePreviewOptions ? originalGeneratePreviewOptions(...args) : optionsGenerators.generatePreviewOptions(...args);
    // TOCプラグイン追加(プレビュー用)
    preview.remarkPlugins.push([remarkToc, { heading }] as any);
    preview.rehypePlugins.push(rehypeSlug as any);
    return preview;
  };
};

GROWIコミュニティについて

プラグインの使い方や要望などがあれば、ぜひGROWIコミュニティにお寄せください。実現できそうなものがあれば、なるべく対応します。他にもヘルプチャンネルなどもありますので、ぜひ参加してください!

GROWI Slackへの参加はこちらから

まとめ

GROWIプラグインを使うと、表示を自由に拡張できます。足りない機能があれば、どんどん追加できます。ぜひ、自分のWikiをカスタマイズしましょう。

OSS開発wikiツールのGROWI | 快適な情報共有を、全ての人へ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?