XHTML5の文章からsection
要素を使った明示的なセクション見出し(section>h1-h6
)を抽出して目次を作成する。紹介記事:GenerateTOC: Generator for Table of Contents from HTML Headings。
Input/Output Form
Usage
Brief
- [Input HTML]に目次を生成したいHTMLコードを記入する。
- [Convert]を押下する。
- [Output HTML]に目次とリンクの作成のために見出し要素(
h1-h6
)のid
属性が記入されたHTMLコードが出力される。また,[Result View]に見出し追加後のHTMLコードの描画結果を表示する。
Details
入力として,ルートにsection
要素を持つXHTMLを与える。
空要素に終端スラッシュがなかったり,XMLで認められない構文を使っているHTMLを使う場合は,事前に例えば以下のサイトでHTMLをXHTMLに変換しておく。
目次には,section
要素を使った明示的な見出しのみを対象とする。section
要素を使わずに,h1-h6
要素を単独で使った暗黙的な見出しは目次の対象外となる。
<section>
<h1>Heading 1</h1>
<section>
<h2>Heading 2</h2>
</section>
</section>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
目次の生成は,2個目のsection
要素(section>section
)の直前に,見出しへのリンクが付けられた番号付きリスト(ol>li
要素)を含むnav
要素を挿入することで行う。
<section>
<h1>Heading 1</h1>
<!-- Here is the place table of contents is inserted by nav element. -->
<section>
<h2>Heading 2</h2>
</section>
</section>
見出しへのリンクを作るために,section>h1-h6
要素のid
属性に,実行日時(YYYYMMDDThhmm
形式)とテキストの空白をハイフン-
に置換した値を上書きで設定する。
Example: <h1>Heading 1</h1>
-> <h1 id="20170506T04:30_Heading-1">Heading 1</h1>
その際に,以下の文字はエスケープ処理が難しいのでid
属性からは削除する。
~^`'"(){}\\|!&<>
目次の見出しは最初の目次対象の見出しと同じh1-h6
要素を使い,テキストはTable of Contents
となる。
[Convert]ボタンを押下して何も反応がないときは,HTMLをうまく処理できていない可能性が高い。例えば,ルートのsection
要素の終了タグを記入し忘れるなど,[Input HTML]に記入したHTMLがXHTMLとして適切かどうか確認したほうがいい。
Sample Input/Output
Input | Output | |
---|---|---|
Source |
|
|
View |
TitleHeading 1~^`"'(){}\|!&<>[]=-+*/%;:.,?$#@_Heading 1-1Heading 1-2Heading 2 |
TitleHeading 1~^`"'(){}\|!&<>[]=-+*/%;:.,?$#@_Heading 1-1Heading 1-2Heading 2 |