minitoc

見出しを検索して目次を生成するシンプルな JavaScript ライブラリ。

How To Use

CDN を読み込み minitoc.init() で実行します。

<script src="https://cdn.jsdelivr.net/npm/minitoc@0.1.1/dist/minitoc.js"></script>
<script>minitoc.init()</script>

<!-- 目次を出力したい場所に data-toc 属性を付与します -->
<div data-toc></div>

<!-- 見出しを検索したい場所に data-toc-container 属性を付与します -->
<div data-toc-container>
  <h2>テストh2</h2>
  <h3>テストh3</h3>
  <p>テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章</p>
  ...
</div>

Methods

Method	Result
minitoc.init()	見出しを検索して目次を出力

Options

// Example
minitoc.init({
  tocSelector: "[data-toc]", // 目次を出力するセレクター
  containerSelector: "[data-toc-container]", // 見出しを検索するセレクター
  headingSelector: "h1, h2, h3", // 検索対象の見出し
})

Respect

• jgallen23/toc: jQuery Table of Contents Plugin
• tscanlin/tocbot: Build a table of contents from headings in an HTML document.

License

• MIT

Credit

• Author: Qrac
• Organization: QRANOKO