spec: Prevent auto-generation of section elements by headings inside explicit parent element

[MurakamiShinyu]

関連する仕様提案

• 151

• 153

明示的な親要素がある場合の見出しでは親要素の自動生成をせず、属性の移動・コピーをしないようにする。

例：

<section id="sec01" class="sec-lorem">

### Lorem {#h01 .h-lorem}

Lorem ipsum dolor sit amet.

</section>

現在のvfmで出力されるHTML：

<section id="sec01" class="sec-lorem">
  <section id="h01" class="level3 h-lorem">
    <h3 class="h-lorem">Lorem</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</section>

現状はこのように、明示的に section 要素があっても、もうひとつ余分な section 要素が出力されてしまう。これはあまり望ましいHTML出力ではない。

そこでこのような、HTMLブロックでの開始タグの後に見出しがある場合は、section要素の自動生成をしないようにする。また、spec: Fenced blocks内の見出しでも同様とする。

この仕様変更をおこなった場合の出力されるHTML：

<section id="sec01" class="sec-lorem">
  <h3 id="h01" class="h-lorem">Lorem</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</section>

section以外の要素を使う例：

<nav id="TOC" class="toc" role="doc-toc">

# Table of Contents {.toc-title}

1. [Chapter 1](#chap01)
2. [Chapter 2](#chap02)
3. [Chapter 3](#chap03)

</nav>

現在のvfmで出力されるHTML：

<nav id="TOC" class="toc" role="doc-toc">
  <section class="level1 toc-title" id="table-of-contents">
    <h1 class="toc-title">Table of Contents</h1>
    <ol>
      <li><a href="#chap01">Chapter 1</a></li>
      <li><a href="#chap02">Chapter 2</a></li>
      <li><a href="#chap03">Chapter 3</a></li>
    </ol>
  </section>
</nav>

この仕様変更をおこなった場合の出力されるHTML：

<nav id="TOC" class="toc" role="doc-toc">
  <h1 id="table-of-contents" class="toc-title">Table of Contents</h1>
  <ol>
    <li><a href="#chap01">Chapter 1</a></li>
    <li><a href="#chap02">Chapter 2</a></li>
    <li><a href="#chap03">Chapter 3</a></li>
  </ol>
</nav>

[MurakamiShinyu]

Fenced blocksを使う例

::: {#sec01 .sec-lorem}

### Lorem {#h01 .h-lorem}

Lorem ipsum dolor sit amet.

:::

↓出力されるHTMLは次のようになるだろう：

<section id="sec01" class="sec-lorem">
  <h3 id="h01" class="h-lorem">Lorem</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</section>

NOTE:

• この例でのFenced blockの開始行 ::: {#sec01 .sec-lorem} は、次のように書いても同様
  • ::: section {#sec01 .sec-lorem} -- HTML要素名 section を明示的に書いた場合
  • ::: sec-lorem {#sec01} -- ::: のあとにHTML要素名以外の名前を書いた場合はクラス名の指定になる

section以外の要素を使う例：

::: nav {#TOC .toc role="doc-toc"}

# Table of Contents {.toc-title}

1. [Chapter 1](#chap01)
2. [Chapter 2](#chap02)
3. [Chapter 3](#chap03)

:::

↓出力されるHTMLは次のようになるだろう：

<nav id="TOC" class="toc" role="doc-toc">
  <h1 id="table-of-contents" class="toc-title">Table of Contents</h1>
  <ol>
    <li><a href="#chap01">Chapter 1</a></li>
    <li><a href="#chap02">Chapter 2</a></li>
    <li><a href="#chap03">Chapter 3</a></li>
  </ol>
</nav>

Fenced blocks仕様の議論は：

• https://github.com/vivliostyle/vfm/issues/5
  • HTML 要素名を明示的に指定可能にする拡張案