tak4
/
GenerateTOC
geforkt von gnusocialjp/GenerateTOC


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969
							<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>GenerateTOC</title>
    <meta name="author" content="SENOO, Ken" />
    <script>
      <![CDATA[
      function GenerateTOC() {
        /**
        ## Policy
        1. Get input HTML text
        2. Parse HTML text
        * Get section>h1-h6
        * Insert `<nav><h?>Table of Contents</h?><ol><li></li></ol></nav>` before second section
        * Set value to YYYYMMDDThhmm in section>h1-h6 id attribute
        */

        // Get HTML document as DOM
        var value = document.getElementById("input").value;
        var view  = document.getElementById("view");
        view.innerHTML = value;
        cleanup_element(view);

        // Generate TOC
        var root = document.getElementById("view");

        var first_heading = root.querySelectorAll("h1, h2, h3, h4, h5, h6")[1];
        first_heading = first_heading.tagName.toLowerCase();

        var toc = '<nav>\n';
        toc += "<"  + first_heading + ">目次";
        toc += "</" + first_heading + ">";
        nav = create_toc(root.children);
        // Remove title headings
        nav = nav.replace(/^[\s\S]*?<ol>[\s\S]*?<ol>/, "<ol>");
        nav = nav.replace(/\n<\/li>$/, "");  // Delete trailing li
        nav = nav.replace(/<\/li>\n<\/ol>$/, "");
        toc += nav;
        toc += "\n</nav>\n";

        // Insert nav to source HTML
        var nav = document.createElement("nav");
        insert = root.querySelectorAll("section")[1];
        insert.insertAdjacentHTML("beforeBegin", toc);

        // Output
        document.getElementById("output").textContent = root.innerHTML;
        // Preview  result
        document.getElementById("view").innerHTML = root.innerHTML;
        navigator.clipboard.writeText(root.innerHTML);
      }

      function create_toc(children){
        var toc = "";
        // Date prefix for YYYYMMDDThhmm format
        var date = new Date();
        var now = date.toISOString().replace(/-|T.*/g, "");
        now += "T" + ( "0"+date.getHours() ).slice(-2) + ( "0"+date.getMinutes() ).slice(-2);

        for (let node of children){
          tag_name = node.tagName.toLowerCase();
          if (tag_name.match(/h[1-6]/)){
            let id = now + "_" + node.textContent;
            id = id.replace(/\s/g, "-");

            // Remove for escape in id
            id = id.replace(/[~^`'"(){}\\|!&<>]/g, "");
            var nodeText = escape_html(node.textContent);
            toc += '\n<li><a href="#' + id + '">' + nodeText + '</a></li>';
            node.id = id;
          } else if (tag_name === "section"){
            toc += "\n<ol>";
            toc += create_toc(node.children);
            toc += "\n</ol>\n</li>";
          }
        }

        toc = toc.replace(/<\/ol>\n<\/li>\n<ol>\n/g, "");
        toc = toc.replace(/<\/li>\n<ol>/g, "\n<ol>");
        return toc;
      }

      // 改行除去処理でスキップする要素 (子孫含めスキップされる)
      const element_skip_list = {
        pre: true,
      };

      // 改行除去処理の対象要素 (子孫含め処理される)
      const element_target_flags = {
        a: true,
        em: true,
        strong: true,
        p: true,
        li: true,
        td: true,
        h1: true,
        h2: true,
        h3: true,
        h4: true,
        h5: true,
        h6: true,
      };

      // DOMツリーの各要素から不要な改行/空白を除去
      // in_target: 処理対象の要素に入るとtrueになる
      // queue: 要素を跨いだ処理の空白で使用する作業用配列
      function cleanup_element(element, in_target, queue) {
        in_target = in_target || false; // 未指定ならfalse
        queue = queue || []; // 未指定なら空配列

        // 処理対象要素から出た時にqueueを空にする
        if (!in_target) {
          queue.length = '';
        }

        // 子要素のリストを持たなければスキップ
        if (!element.childNodes) { return; }

        // 直下の子要素を処理
        let list = element.childNodes;
        for (let i = 0, length = list.length; i < length; i++) {
          let child = list[i];
          let nodename = child.nodeName.toLowerCase();

          // 特定の要素(主にpre)をスキップ
          if (element_skip_list[nodename] === true) { continue; }

          // 対象要素又はその子孫なら改行/空白を除去
          let next_in_target = (in_target || element_target_flags[nodename] === true);
          if  (next_in_target) {
            cleanup_node(child, queue);
          }

          // 子孫を処理するため再帰呼び出し
          cleanup_element(child, next_in_target, queue);

          // 子孫要素の最後の「日本語文字」以降の改行/空白を除去
          if (!in_target && next_in_target) {
            cleanup_queue(queue);
          }
        }
      }

      // テキストノードから不要な改行/空白を除去
      function cleanup_node(node, queue) {

        // 正規表現のメモ:
        // (?:[^\s\d\w]|　)←日本語 (記号含む)
        // [^\S　]←改行/空白 (\sから全角スペースを除いた物)
        // [^\S\n　]←空白 (\sから全角スペース/改行文字を除いた物)
        // [\[\]\(\)\{\}\<\>\|] ←括弧と「|」

        // テキストノード以外はスキップ
        if (node.nodeType !== document.TEXT_NODE) { return; }

        let text = node.data;

        // 前要素の末尾が日本語だった場合
        if (queue.length > 0) {

          // 改行/空白だけのテキストノードはqueueに追加 (次に日本語が出現したらまとめて除去)
          if (text === '' || /^[^\S　]*$/.test(text)) {
            queue.push(node);
            return;
          }

          // 日本語又は開き括弧以外の記号が出現したらtrue
          let jp_or_paren = /^[^\S　]*(?:[^\s\d\w\[\(\{\<\|]|　)/.test(text);

          // 前の要素の末尾が閉じ括弧ならtrue
          let last_paren = (/[^\S　]*[\]\)\}\>\|][^\S　]*$/.test(queue[0].data));

          // 日本語又は開き括弧以外の記号が出現したらqueueを使用して最後の日本語より後の改行/空白をまとめて除外
          // 閉じ括弧の後に、。が来た場合も除外
          if (jp_or_paren && (!last_paren || /^[^\S　]*[、。]/.test(text))) {
            cleanup_queue(queue);
            text = text.replace(/^[^\S　]*/, "");
          } else {
            // 上記以外ならqueueを破棄
            queue.length = 0;
          }
        }

        // 日本語と閉じ括弧以外の記号+改行+後続の空白+開き括弧以外
        text = text.replace(/((?:[^\s\d\w\]\)\}\>\|]|　))\n[^\S　]*([^\[\(\{\<\|])/g, "$1$2");

        // 閉じ括弧以外+改行+後続の空白+日本語と開き括弧以外の記号
        text = text.replace(/([^\]\)\}\>\|])\n[^\S　]*((?:[^\s\d\w\[\(\{\<\|]|　))/g, "$1$2");

        // 括弧+改行+後続の空白+、。
        text = text.replace(/([\[\]\(\)\{\}\<\>\|])\n[^\S　]*([、。])/g, "$1$2");

        if (/(?:[^\s\d\w]|　)[^\S　]*$/.test(text)) {
          // 末尾が日本語ならqueueに追加
          queue.push(node);
        } else {
          // 上記以外ならqueueを使用して最後の日本語より後の改行/空白を除去
          cleanup_queue(queue);
        }

        node.data = text;
      }

      // queueに溜まったテキストノードから末尾の改行/空白を削除
      function cleanup_queue(queue) {

          // 途中に改行文字を含むか?
          let has_break = false;
          for (let i = 1, length = queue.length; i < length; i++) { // 0番目は日本語が末尾なので1番目以降を調べる
            let text = queue[i].data;
            if (/\n/g.test(text)) {
              has_break = true;
              break;
            }
          }

          // 途中に改行を含まないなら削除しない
          if (!has_break) {
            queue.length = 0;
            return;
          }

          for (let i = 0, length = queue.length; i < length; i++) {
            let text = queue[i].data;
            text = text.replace(/[^\S　]*$/, "");
            queue[i].data = text;
          }
          queue.length = 0;
      }

function escape_html(unsafeText) {
  if(typeof unsafeText !== 'string') {
    return unsafeText;
  }
  let escaped = document.createElement('div');
  escaped.textContent = unsafeText;
  return escaped.innerHTML;
}
      ]]>
    </script>
    <style>
/** caption */
caption::before {
  counter-increment: table;
  content: "Table " counter(table) " ";
}
figure>figcaption::before {
  counter-increment: figure;
  content: "Figure " counter(heading1) "." counter(figure) " ";
}
/* subfigureの開始時だけリセット */
figure>figure:first-of-type {
  counter-reset: subfigure;
}
/* そのままやると，subfigureの番号が先に登場するのでfigureと番号が不一致 */
/* だから，subfigure内ではfigureの番号を増加させ，抜けるときに減らす */
figure>figure>figcaption::before {
  counter-increment: figure subfigure;
  counter-reset: subsubfigure;
  content: "Figure " counter(heading1) "." counter(figure) "(" counter(subfigure, lower-alpha) ") ";
}
/* 増やしたfigureの番号を減らして元に戻す */
figure>figure figcaption::after {
  content: "";
  counter-increment: figure -1;
}

figure pre~figcaption::before,
figure figcaption:first-child::before {
  counter-increment: listing;
  content: "List " counter(heading1) "." counter(listing) " ";
}
figure blockquote~figcaption::before {
  content: "—";
}

/* list */
/* listが見出し設定の後にあると見出し番号がリセットされる? */
/* ol {                                 */
/*   counter-reset: enum;               */
/*   list-style-type: none;             */
/* }                                    */
/* li::before {                         */
/*   counter-increment: enum;           */
/*   content: counters(enum, ".") ". "; */
/* }                                    */
ol {
  counter-reset: enum1;
  padding-left: 1em;
}
ol>li {
  list-style-type: none;
  padding-left: 0.5em;
  text-indent: -0.5em;
}
ol>li::before {
  counter-increment: enum1;
  content: counter(enum1) ". ";
}
ol>li>ol{
  counter-reset: enum2;
  padding-left: 1em;
  text-indent: -1em;
}
ol>li>ol>li::before {
  counter-increment: enum2;
  content: counter(enum1) "." counter(enum2) ". ";
}
ol>li>ol>li>ol{
  counter-reset: enum3;
  padding-left: 1em;
  text-indent: -1em;
}
ol>li>ol>li>ol>li::before {
  counter-increment: enum3;
  content: counter(enum1) "." counter(enum2) "." counter(enum3) ". ";
}
ol>li>ol>li>ol>li>ol{
  counter-reset: enum4;
  padding-left: 1em;
  text-indent: -1em;
}
ol>li>ol>li>ol>li>ol>li::before {
  counter-increment: enum4;
  content: counter(enum1) "." counter(enum2) "." counter(enum3) "." counter(enum4) ". ";
}
ol>li>ol>li>ol>li>ol>li>ol{
  counter-reset: enum5;
  padding-left: 1em;
  text-indent: -1em;
}
ol>li>ol>li>ol>li>ol>li>ol>li::before {
  counter-increment: enum5;
  content: counter(enum1) "." counter(enum2) "." counter(enum3) "." counter(enum4) "." counter(enum5) ". ";
}
ol>li>ol>li>ol>li>ol>li>ol>li>ol{
  counter-reset: enum6;
  padding-left: 1em;
  text-indent: -1em;
}
ol>li>ol>li>ol>li>ol>li>ol>li>ol>li::before {
  counter-increment: enum6;
  content: counter(enum1) "." counter(enum2) "." counter(enum3) "." counter(enum4) "." counter(enum5) "." counter(enum6) ". ";
}


/* title */
body>h1:first-of-type {
  text-align: center;
  font-size: xx-large;
}

/* 節番号の設定 */
body { counter-reset: heading1; }

/** article要素の見出しでカウンターをリセット */
/* article要素はそんなに入れ子にならないから最上位の見出しだけリセット */
article>h1:first-of-type,
article>h2:first-of-type,
article>h3:first-of-type,
article>h4:first-of-type,
article>h5:first-of-type,
article>h6:first-of-type {
  counter-reset: heading1;
  font-size: 2.17em;
}

section>h1:first-of-type,
section>h2:first-of-type,
section>h3:first-of-type,
section>h4:first-of-type,
section>h5:first-of-type,
section>h6:first-of-type {
  counter-increment: heading1; counter-reset: heading2 figure table listing;
  font-size: 2.0em;
}

section>h1:first-of-type::before,
section>h2:first-of-type::before,
section>h3:first-of-type::before,
section>h4:first-of-type::before,
section>h5:first-of-type::before,
section>h6:first-of-type::before {
  content: counter(heading1) " ";
}

section>section>h1:first-of-type,
section>section>h2:first-of-type,
section>section>h3:first-of-type,
section>section>h4:first-of-type,
section>section>h5:first-of-type,
section>section>h6:first-of-type {
  counter-increment: heading2; counter-reset: heading3;
  font-size: 1.83em;
}
section>section>h1:first-of-type::before,
section>section>h2:first-of-type::before,
section>section>h3:first-of-type::before,
section>section>h4:first-of-type::before,
section>section>h5:first-of-type::before,
section>section>h6:first-of-type::before {
  content: counter(heading1) "." counter(heading2) " ";
}

section>section>section>h1:first-of-type,
section>section>section>h2:first-of-type,
section>section>section>h3:first-of-type,
section>section>section>h4:first-of-type,
section>section>section>h5:first-of-type,
section>section>section>h6:first-of-type {
  counter-increment: heading3; counter-reset: heading4;
  font-size: 1.67em;
}
section>section>section>h1:first-of-type::before,
section>section>section>h2:first-of-type::before,
section>section>section>h3:first-of-type::before,
section>section>section>h4:first-of-type::before,
section>section>section>h5:first-of-type::before,
section>section>section>h6:first-of-type::before {
  content: counter(heading1) "." counter(heading2) "." counter(heading3) " ";
}

section>section>section>section>h1:first-of-type,
section>section>section>section>h2:first-of-type,
section>section>section>section>h3:first-of-type,
section>section>section>section>h4:first-of-type,
section>section>section>section>h5:first-of-type,
section>section>section>section>h6:first-of-type {
  counter-increment: heading4; counter-reset: heading5;
  font-size: 1.50em;
}
section>section>section>section>h1:first-of-type::before,
section>section>section>section>h2:first-of-type::before,
section>section>section>section>h3:first-of-type::before,
section>section>section>section>h4:first-of-type::before,
section>section>section>section>h5:first-of-type::before,
section>section>section>section>h6:first-of-type::before {
  content: counter(heading1) "." counter(heading2) "." counter(heading3) "."
           counter(heading4) " ";
}

section>section>section>section>section>h1:first-of-type,
section>section>section>section>section>h2:first-of-type,
section>section>section>section>section>h3:first-of-type,
section>section>section>section>section>h4:first-of-type,
section>section>section>section>section>h5:first-of-type,
section>section>section>section>section>h6:first-of-type {
  counter-increment: heading5; counter-reset: heading6;
  font-size: 1.33em;
}
section>section>section>section>section>h1:first-of-type::before,
section>section>section>section>section>h2:first-of-type::before,
section>section>section>section>section>h3:first-of-type::before,
section>section>section>section>section>h4:first-of-type::before,
section>section>section>section>section>h5:first-of-type::before,
section>section>section>section>section>h6:first-of-type::before {
  content: counter(heading1) "." counter(heading2) "." counter(heading3) "."
           counter(heading4) "." counter(heading5) " ";
}
/** heading6 だけカウンターが増えない？ */
section>section>section>section>section>section>h1:first-of-type,
section>section>section>section>section>section>h2:first-of-type,
section>section>section>section>section>section>h3:first-of-type,
section>section>section>section>section>section>h4:first-of-type,
section>section>section>section>section>section>h5:first-of-type,
section>section>section>section>section>section>h6:first-of-type {
  /* 使っていなくてもheading7をリセットしないとheading6が増えないっぽい */
  counter-increment: heading6; counter-reset: heading7;
  font-size: 1.17em;
}
section>section>section>section>section>section>h1:first-of-type::before,
section>section>section>section>section>section>h2:first-of-type::before,
section>section>section>section>section>section>h3:first-of-type::before,
section>section>section>section>section>section>h4:first-of-type::before,
section>section>section>section>section>section>h5:first-of-type::before,
section>section>section>section>section>section>h6:first-of-type::before {
  content: counter(heading1) "." counter(heading2) "." counter(heading3) "."
           counter(heading4) "." counter(heading5) "." counter(heading6) " ";
}


/** Table */
table {
  border-collapse: collapse;
  border: none;
  /** centering **/
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
/** Table color **/
tbody>tr:nth-of-type(even) {
  background: #ffffaa;
}
thead>tr>th {
  background: #ffcc99;
  text-align: center;
  font-weight: bold
}
/** Column margin **/
td {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
/** Table border **/
td, th {
  border-style: none;
}

thead>tr:first-of-type {
  border-top-style: solid;
  border-top-width: medium;
}
thead>tr:last-of-type {
  border-bottom-style: solid;
  border-bottom-width: thin;
}
tbody>tr:first-of-type {
  border-top-style: solid;
  border-top-width: thin;
}
tbody>tr:last-of-type {
  border-bottom-style: solid;
  border-bottom-width: medium;
}

th, td {
  word-wrap: break-word;
}

/** Cross reference */
[href^="#chap:"]::before {
  content: "第";
}
[href^="#chap:"]::after {
  content: "章";
}
[href^="#sec:"]::after, [href^="#sub"]::after {
  content: "節";
}
[href^="#par:"]::after {
  content: "段落";
}
[href^="#enu:"]::before {
  content: "項目";
}
[href^="#eq:"]::before {
  content: "式(";
}
[href^="#eq:"]::after {
  content: ")";
}
[href^="#fig:"]::before {
  content: "Figure ";
}
[href^="#tab:"]::before {
  content: "Table ";
}
[href^="#lis:"]::before {
  content: "List ";
}

/** Font */
body {
  font-family: "TeX Gyre Heros", "FreeSans", "Migu 1P", "TakaoGothic", "VL Gothic", "Yu Gothic", "Meiryo UI", sans-serif;
}
p {
  text-indent: 1em;
  word-break: break-all;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "TeX Gyre Heros", "Migu 1P", "TakaoGothic", "VL Gothic", "Yu Gothic", "Meiryo UI", sans-serif;
  font-weight: bold;
  /* orange */
  /* background-color: rgb(100%,80%,0%); */
  background-color: #e6e6ff;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
em, strong {
  color: red;
  font-weight: bold;
}
strong {background-color: yellow;}

/** PC */
kbd, code, samp, var {
  font-family: "Migu 1M", "Inconsolata", "DejaVu Sans Mono", "Consolas", "TakaoGothic", "VL Gothic", "HGGothicM", "MS Gothic",  monospace;
  border-width: thin;
  border-style: solid;
  border-color: #cccccc;
  border-radius: 5px;
}
kbd {
  background-color: #ffe6e6;
}
code {
  background-color: #e6ffe6;
}
samp {
  background-color: #e6e6e6;
}
var {
  background-color: #e6ffff;
}
pre {
  font-family: "Migu 1M", "Inconsolata", "DejaVu Sans Mono", "Consolas", "TakaoGothic", "VL Gothic", "HGGothicM", "MS Gothic",  monospace;
  background-color: #ffffe6;
  overflow: auto;
}

/** Line number for source code */
pre>code, pre>samp {
  display: block;
  border-style: none;
  position: relative;
  padding-left: 3em;
  overflow-x: auto;
}

pre>code::before, pre>samp::before {
  content: "0001000200030004000500060007000800090010001100120013001400150016001700180019002000210022002300240025002600270028002900300031003200330034003500360037003800390040004100420043004400450046004700480049005000510052005300540055005600570058005900600061006200630064006500660067006800690070007100720073007400750076007700780079008000810082008300840085008600870088008900900091009200930094009500960097009800990100";
  display: block;
  width: 2.4em;
  height: 100%;
  position: absolute;
  left: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  overflow-y: hidden;
  border-right: 1px solid;
}

/** Blockquote */
blockquote {
  background-color: #eee;
  padding: 1.0em;
  padding-left: 3em;
  position: relative;
}
blockquote::before {
  content: "“";
  font-size: 600%;
  line-height: 1em;
  font-family: serif;
  color: #999;
  position: absolute;
  left: 0;
  top: 0;
}
blockquote p {
  margin: 0;
}

/** Description element */
dt {
  font-weight: bold;
  font-family: sans-serif;
  padding-left: 0.5em;
}
dt, dd {
  line-height: 1.5em;
  word-wrap: break-word;
}

dt {
  float: left;
  width: 20%;
}
dd {
  margin-left: 22%;
}
dd::after {
  content: "";
  display: block;
  clear: both;
}

/** figure */
figure {
  text-align: center;
}

figure blockquote~figcaption {
  text-align: right;
}
figure blockquote {
  text-align: left;
}
figure pre {
  text-align: left;
}
figure>dl {
  border-radius: 0.4em;
  border: solid  thin rgb(10%,10%,10%);
  background-color: rgb(90%,90%,90%);
  text-align: left;
}
figure>dl>dt {
  display: block;
  width: 100%;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
  color: white;
  background-color: rgb(30%,30%,30%);
  box-sizing: border-box;
}
figure>dl>dd {
  padding-left: 0.5em;
  margin: auto;
}
figure>dl>dd:nth-of-type(n+2) {
  border-top-style: dashed;
  border-top-width: thin;
}
.column-2 {
  width: 45%;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 1em;
  margin-right: 1em;
}
.column-3 {
  width: 30%;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 1em;
  margin-right: 1em;
}
.column-4 {
  width: 20%;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 1em;
  margin-right: 1em;
}

/** Show update date */
[data-updated-date]::after {
  color: gray;
  font-size: 0.5em;
  content: " Update: " attr(data-updated-date);
}


/** Page style */
@page {
  margin: 2cm;
}

/** Print style */
@media print {
  /* ShowerでPDF作成するときにChromiumでtheadが二重に表示される対策 */
  thead {
    display: table-row-group;
  }

  /* Show URL */
  a[href]::after {
    content: " (" attr(href) ")";
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

    </style>
  </head>
  <body>
    <h1>GenerateTOC</h1>
    <main>
      <p>XHTML5の文章から<code>section</code>要素を使った<a href="https://www.w3.org/TR/html51/sections.html#headings-and-sections">明示的なセクション</a>見出し（<code>section&gt;h1-h6</code>）を抽出して目次を作成する。紹介記事：<a
          href="https://senooken.jp/product/20170506/">GenerateTOC: Generator for Table of Contents from HTML Headings</a>。</p>
      <nav>
        <h2>Table of Contents</h2>
        <ol>
          <li><a href="#Input/Output-Form">Input/Output Form</a></li>
          <li><a href="#Usage">Usage</a>
            <ol>
              <li><a href="#Brief">Brief</a></li>
              <li><a href="#Details">Details</a></li>
            </ol>
          </li>
          <li><a href="#Sample-Input/Output">Sample Input/Output</a></li>
        </ol>
      </nav>
      <p></p>
      <section>
        <h1 id="Input/Output-Form">Input/Output Form</h1>
        <form>
          <fieldset> <legend>Input HTML</legend> <textarea id="input"
placeholder="Input here" style="width: 100%; height: 10em;"></textarea> <button
              type="button" onclick="GenerateTOC();">Go+Copy</button> </fieldset>
        </form>
        <form>
          <fieldset> <legend>Output HTML</legend> <textarea id="output"
placeholder="Output here" style="width: 100%; height: 10em;"></textarea> </fieldset>
        </form>
        <form>
          <fieldset> <legend>Result View</legend> <output id="view"></output> </fieldset>
        </form>
      </section>
      <section>
        <h1 id="Usage">Usage</h1>
        <section>
          <h2 id="Brief">Brief</h2>
          <p> </p>
          <ol>
            <li>［Input HTML］に目次を生成したいHTMLコードを記入する。</li>
            <li>［Go+Copy］を押下する。</li>
            <li>［Output HTML］に目次とリンクの作成のために見出し要素（<code>h1-h6</code>）の<code>id</code>属性が記入されたHTMLコードが出力されてクリップボードにコピーされる。また、［Result View］に見出し追加後のHTMLコードの描画結果を表示する。</li>
          </ol>
        </section>
        <section>
          <h2 id="Details">Details</h2>
          <p>入力として，ルートに<code>section</code>要素を持つXHTMLを与える。 </p>
          <p>空要素に終端スラッシュがなかったり，XMLで認められない構文を使っているHTMLを使う場合は，事前に例えば以下のサイトでHTMLをXHTMLに変換しておく。 </p>
          <blockquote>
            <p><a href="http://www.csgnetwork.com/cvthtml2xhtml.html">HTML To XHTML Code Converter</a></p>
          </blockquote>
          <p>目次には，<code>section</code>要素を使った<strong><a href="https://www.w3.org/TR/html51/sections.html#headings-and-sections">明示的な見出し</a>のみを対象</strong>とする。<code>section</code>要素を使わずに，<code>h1-h6</code>要素を単独で使った<em>暗黙的な見出しは目次の対象外</em>となる。</p>
          <figure><figcaption>Sample of Target HTML</figcaption>
            <pre><code>&lt;section&gt;
	&lt;h1&gt;Heading 1&lt;/h1&gt;
	&lt;section&gt;
		&lt;h2&gt;Heading 2&lt;/h2&gt;
	&lt;/section&gt;
&lt;/section&gt;
</code></pre> </figure>
          <p></p>
          <figure> <figcaption>Sample of non-Target HTML</figcaption>
            <pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;<br />&lt;h2&gt;Heading 2&lt;/h2&gt; </code></pre>
</figure><p>目次の生成は，2個目の<code>section</code>要素（<code>section&gt;section</code>）の直前に，見出しへのリンクが付けられた番号付きリスト（<code>ol&gt;li</code>要素）を含む<code>nav</code>要素を挿入することで行う。 </p><figure>
<figcaption>Place of Table of Contents</figcaption>
<pre><code>&lt;section&gt;
	&lt;h1&gt;Heading 1&lt;/h1&gt;
	&lt;!-- Here is the place table of contents is inserted by nav element. --&gt;
	&lt;section&gt;
		&lt;h2&gt;Heading 2&lt;/h2&gt;
	&lt;/section&gt;
&lt;/section&gt;
</code></pre>
</figure><p></p><p>見出しへのリンクを作るために，<code>section&gt;h1-h6</code>要素の<code>id</code>属性に，実行日時（<code>YYYYMMDDThhmm</code>形式）とテキストの空白をハイフン<code>-</code>に置換した値を<strong>上書き</strong>で設定する。</p>
                          <p>Example: <code>&lt;h1&gt;Heading 1&lt;/h1&gt;</code> -&gt; <code>&lt;h1 id="20170506T04:30_Heading-1"&gt;Heading 1&lt;/h1&gt;</code></p>
                          <p>その際に，以下の文字はエスケープ処理が難しいので<code>id</code>属性からは削除する。</p>
                          <pre><code>~^`'"(){}\\|!&amp;&lt;&gt;</code></pre><p>目次の見出しは最初の目次対象の見出しと同じ<code>h1-h6</code>要素を使い，テキストは<code>Table of Contents</code>となる。</p><p>［Go+Copy］ボタンを押下して何も反応がないときは，HTMLをうまく処理できていない可能性が高い。例えば，ルートの<code>section</code>要素の終了タグを記入し忘れるなど，［Input HTML］に記入したHTMLがXHTMLとして適切かどうか確認したほうがいい。</p><pre><code></code></pre></section></section><section>
                        <h1 id="Sample-Input/Output">Sample Input/Output</h1>
                        <p> </p>
                        <ul>
                        </ul>
                        <table border="1" style="width: 100%;">
                          <caption>Sample Input and Output</caption>
                          <thead>
                            <tr>
                              <th><br />
                              </th>
                              <th>Input</th>
                              <th>Output</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Source</td>
                              <td>
                                <pre><code>&lt;section&gt;
  &lt;h1&gt;Title&lt;/h1&gt;<br />  &lt;section&gt;
    &lt;h2&gt;Heading 1~^`"'(){}\|!&amp;amp;&amp;lt;&amp;gt;[]=-+*/%;:.,?$#@_&lt;/h2&gt;
    &lt;section&gt;
      &lt;h3&gt;Heading 1-1&lt;/h3&gt;
    &lt;/section&gt;
    &lt;section&gt;
      &lt;h3&gt;Heading 1-2&lt;/h3&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h2&gt;Heading 2&lt;/h2&gt;
  &lt;/section&gt;
&lt;/section&gt;</code></pre>
            </td>
            <td>
              <pre><code>&lt;section xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;h1 id="20170505T0118_Title"&gt;Title&lt;/h1&gt;
  &lt;nav&gt;
&lt;h2&gt;Table of Contents&lt;/h2&gt;&lt;ol&gt;
&lt;li&gt;&lt;a href="#20170505T0118_Heading-1[]=-+*/%;:.,?$#@_"&gt;Heading 1~^`"'(){}\|!&amp;amp;&amp;lt;&amp;gt;[]=-+*/%;:.,?$#@_&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#20170505T0118_Heading-1-1"&gt;Heading 1-1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#20170505T0118_Heading-1-2"&gt;Heading 1-2&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#20170505T0118_Heading-2"&gt;Heading 2&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;/nav&gt;
&lt;section&gt;
    &lt;h2 id="20170505T0118_Heading-1[]=-+*/%;:.,?$#@_"&gt;Heading 1~^`"'(){}\|!&amp;amp;&amp;lt;&amp;gt;[]=-+*/%;:.,?$#@_&lt;/h2&gt;
    &lt;section&gt;
      &lt;h3 id="20170505T0118_Heading-1-1"&gt;Heading 1-1&lt;/h3&gt;
    &lt;/section&gt;
    &lt;section&gt;
      &lt;h3 id="20170505T0118_Heading-1-2"&gt;Heading 1-2&lt;/h3&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h2 id="20170505T0118_Heading-2"&gt;Heading 2&lt;/h2&gt;
  &lt;/section&gt;
&lt;/section&gt;</code></pre>
            </td>
          </tr>
          <tr>
            <td>View</td>
            <td>
              <section>
                <h1>Title</h1>
                <section>
                  <h2>Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</h2>
                  <section>
                    <h3>Heading 1-1</h3>
                  </section>
                  <section>
                    <h3>Heading 1-2</h3>
                  </section>
                </section>
                <section>
                  <h2>Heading 2</h2>
                </section>
              </section>
            </td>
            <td>
              <section xmlns="http://www.w3.org/1999/xhtml">
                <h1 id="20170505T0118_Title">Title</h1>
                <nav>
                  <h2>Table of Contents</h2>
                  <ol><li><a href="#20170505T0118_Heading-[]=-+*/%;:.,?$#@_">Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</a>
                      <ol><li><a href="#20170505T0118_Heading-1-1">Heading 1-1</a></li><li><a
href="#20170505T0118_Heading-1-2">Heading 1-2</a></li></ol>
                    </li><li><a href="#20170505T0118_Heading-2">Heading 2</a></li></ol>
                </nav>
                <section>
                  <h2 id="20170505T0118_Heading-[]=-+*/%;:.,?$#@_">Heading 1~^`"'(){}\|!&amp;&lt;&gt;[]=-+*/%;:.,?$#@_</h2>
                  <section>
                    <h3 id="20170505T0118_Heading-1-1">Heading 1-1</h3>
                  </section>
                  <section>
                    <h3 id="20170505T0118_Heading-1-2">Heading 1-2</h3>
                  </section>
                </section>
                <section>
                  <h2 id="20170505T0118_Heading-2">Heading 2</h2>
                </section>
              </section>
            </td>
          </tr>
        </tbody>
      </table>
      <p></p></section>
                      
    </main>
    <footer>
      <p> <small>Author: SENOO, Ken (<a href="https://twitter.com/senopen">@senopen</a>). License: CC0. Created date: <time>2017-05-06.</time></small></p>
    </footer>
</body>
</html>