StackEdit5でもくじ(TOC)を挿入する方法！

作成:2018.05.17 02:47 更新:2021-08-01T20:45:14Z

StackEdit4では、記事中に[TOC]と入力することで目次を挿入することができました。

StackEdit5では、この機能は標準ではサポートされなくなりました。自分でテンプレートとヘルパーを設定する必要があります。

ここでは、StackEdit5でもくじを挿入するための方法を紹介します。

テンプレートとヘルパーの設定

[# MENU]-[More…]-[Templates]を選択します。すると、上のようなダイアログが出るので、図のアイコンをクリックして新規テンプレートを作成します。

[Template]に新規に作成するテンプレート名を入力し、[Add helpers]をクリックしてヘルパーを追加します。

[Value]と[Helpers]にそれぞれ以下のソースコードを入力し、OKをクリックします。

Value

{{#transformToc files.0.content.toc}}{{{files.0.content.html}}}{{/transformToc}}

Helpers

Handlebars.registerHelper('transformToc', function (toc, options) {
  var result = options.fn(this);
  var toc = '<div class="toc">' + Handlebars.helpers.tocToHtml.call(this, toc) + '</div>';
  return new Handlebars.SafeString(
    result.replace(/\[toc\]/gi, toc)
  );
});

デフォルトでは、H1～H6までをTOCにしますが、H1～H3のにTOCにしたい場合があります。その場合は上記HelperのHandlebars.helpers.tocToHtml.call(this, toc)の部分をHandlebars.helpers.tocToHtml.call(this, toc, 3)のようにすれば可能です。

これで準備完了です。