2021年4月1日木曜日

StackEdit5 で [TOC] を使う方法

StackEdit5 で [TOC] を使う方法

概要

基本機能からはなくなったのですがカスタムテンプレートの機能を使うことで使えるようになります
今回は手順を紹介します

環境

  • StackEdit5

Templates を開く

左メニューにある Templates を開きます

新規テンプレートの作成

「New template」から新規にテンプレートを作成します

Value の作成

以下のテンプレートを Value にペーストしましょう

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{files.0.name}}</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>

{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
  <div class="stackedit__html">{{#transformToc files.0.content.toc}}{{{files.0.content.html}}}{{/transformToc}}</div>
</body>

</html>

Helpers の作成

すぐ下に「Add helpers」があるのでそこに以下をペーストします
TOC の記載を HTML に変換する JavaScript になります

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)
  );
});

TOC を使う

あとは TOC を入れたい部分にこれまで通り TOC を入れるだけです

Publish する際に作成したテンプレートを選択する

Template の部分に先程作成したテンプレートを選択します

これで記事を投稿すればちゃんと Table of Contents が反映されて記事が投稿されます

参考サイト

0 件のコメント:

コメントを投稿