From e1e708f808e8e9d8fc2b0d75a363e5f9d2026c14 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Fri, 29 Jun 2018 21:21:35 +0900
Subject: [PATCH 01/14] [PLANNING] Add docs about heading divider

---
 README.md     | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/marpit.js |  2 ++
 2 files changed, 58 insertions(+)

diff --git a/README.md b/README.md
index f1bfac8e..566969ba 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,62 @@ footer: "![image](https://example.com/image.jpg)"
 
 > :information_source: Due to the parsing order of Markdown, you cannot use [slide background images](#slide-background) in `header` and `footer` directives.
 
+#### [PLANNING] Heading divider
+
+This feature is similar to [Pandoc](https://pandoc.org/)'s [`--slide-level` option](https://pandoc.org/MANUAL.html#structuring-the-slide-show) and [Deckset 2](https://www.deckset.com/2/)'s "Slide Dividers" option.
+
+By using `headingDivider` global directive, you can instruct to divide slide pages automatically at before of headings whose larger than or equal to specified level.
+
+For example, the below 2 markdowns have the same output.
+
+<table>
+<thead>
+<tr>
+<th style="text-align:center;">Regular syntax</th>
+<th style="text-align:center;">Heading divider</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+```markdown
+# 1st page
+
+The content of 1st page
+
+---
+
+## 2nd page
+
+### The content of 2nd page
+
+Hello, world!
+```
+
+</td><td>
+
+```markdown
+<!-- headingDivider: 2 -->
+
+# 1st page
+
+The content of 1st page
+
+## 2nd page
+
+### The content of 2nd page
+
+Hello, world!
+```
+
+</td>
+</tr>
+</tbody>
+</table>
+
+It is useful when you want to create a slide deck from a plain Markdown. Even if you opened an above example of `headingDivider` in general Markdown editor, it keeps a beautiful rendering without the obtrusive horizontal rulers.
+
 ### Slide backgrounds
 
 We provide a background image syntax to specify slide's background through Markdown. Include `bg` to the alternate text.
diff --git a/src/marpit.js b/src/marpit.js
index 93f6d302..dc1866c7 100644
--- a/src/marpit.js
+++ b/src/marpit.js
@@ -45,6 +45,8 @@ class Marpit {
    *     element(s) wrapping whole slide deck.
    * @param {boolean} [opts.filters=true] Support filter syntax for markdown
    *     image. It can apply to inline image and the advanced backgrounds.
+   * @param {false|number} [opts.headingDivider=false] Start a new slide page at
+   *     before of heading whose larger than or equal to specified level.
    * @param {boolean} [opts.inlineStyle=true] Recognize `<style>` elements to
    *     append additional styles to theme. When it is `true`, Marpit will parse
    *     style regardless markdown-it's `html` option.

From ede92d998f30d6f76c7cd46e981dcfb9e54d39ad Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Thu, 5 Jul 2018 17:48:50 +0900
Subject: [PATCH 02/14] Add a skelton of Marpit heading divider plugin

---
 src/markdown/heading_divider.js | 20 ++++++++++++++++++++
 src/marpit.js                   |  9 +++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/markdown/heading_divider.js

diff --git a/src/markdown/heading_divider.js b/src/markdown/heading_divider.js
new file mode 100644
index 00000000..9183feb5
--- /dev/null
+++ b/src/markdown/heading_divider.js
@@ -0,0 +1,20 @@
+/** @module */
+
+/**
+ * Marpit heading divider plugin.
+ *
+ * Start a new slide page at before of headings.
+ *
+ * @alias module:markdown/heading_divider
+ * @param {MarkdownIt} md markdown-it instance.
+ * @param {Marpit} marpit Marpit instance.
+ */
+function headingDivider(md, marpit) {
+  md.core.ruler.before('marpit_slide', 'marpit_heading_divider', state => {
+    if (state.inlineMode || marpit.options.headingDivider === false) return
+
+    // TODO: Prepend hidden ruler token at before headings
+  })
+}
+
+export default headingDivider
diff --git a/src/marpit.js b/src/marpit.js
index dc1866c7..8b2938d1 100644
--- a/src/marpit.js
+++ b/src/marpit.js
@@ -7,6 +7,7 @@ import marpitBackgroundImage from './markdown/background_image'
 import marpitComment from './markdown/comment'
 import marpitContainerPlugin from './markdown/container'
 import marpitHeaderAndFooter from './markdown/header_and_footer'
+import marpitHeadingDivider from './markdown/heading_divider'
 import marpitInlineSVG from './markdown/inline_svg'
 import marpitParseDirectives from './markdown/directives/parse'
 import marpitParseImage from './markdown/parse_image'
@@ -21,6 +22,7 @@ const defaultOptions = {
   backgroundSyntax: true,
   container: marpitContainer,
   filters: true,
+  headingDivider: false,
   inlineStyle: true,
   markdown: 'commonmark',
   printable: true,
@@ -45,8 +47,10 @@ class Marpit {
    *     element(s) wrapping whole slide deck.
    * @param {boolean} [opts.filters=true] Support filter syntax for markdown
    *     image. It can apply to inline image and the advanced backgrounds.
-   * @param {false|number} [opts.headingDivider=false] Start a new slide page at
-   *     before of heading whose larger than or equal to specified level.
+   * @param {false|number|number[]} [opts.headingDivider=false] Start a new
+   *     slide page at before of headings. it would apply to headings whose
+   *     larger than or equal to the specified level if a number is given, or
+   *     ONLY specified levels if a number array.
    * @param {boolean} [opts.inlineStyle=true] Recognize `<style>` elements to
    *     append additional styles to theme. When it is `true`, Marpit will parse
    *     style regardless markdown-it's `html` option.
@@ -98,6 +102,7 @@ class Marpit {
       .use(marpitParseDirectives, this)
       .use(marpitApplyDirectives)
       .use(marpitHeaderAndFooter)
+      .use(marpitHeadingDivider, this)
       .use(marpitSlideContainer, this.slideContainers)
       .use(marpitContainerPlugin, this.containers)
       .use(marpitParseImage, { filters: this.options.filters })

From 933b98309183d826a15d74856fdbfe976533b364 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Thu, 5 Jul 2018 17:49:05 +0900
Subject: [PATCH 03/14] Minor update about README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 566969ba..9676d9e1 100644
--- a/README.md
+++ b/README.md
@@ -175,7 +175,7 @@ Hello, world!
 </tbody>
 </table>
 
-It is useful when you want to create a slide deck from a plain Markdown. Even if you opened an above example of `headingDivider` in general Markdown editor, it keeps a beautiful rendering without the obtrusive horizontal rulers.
+It is useful when you want to create a slide deck from a plain Markdown. Even if you opened an example about `headingDivider` in general Markdown editor, it keeps a beautiful rendering without horizontal rulers.
 
 ### Slide backgrounds
 

From bf3a6e9831e221472104d1f279ce42442740fc72 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Thu, 5 Jul 2018 17:58:02 +0900
Subject: [PATCH 04/14] Add MarpitHeadingDivider type definition for
 MarpitOptions

---
 index.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index 95edf7d4..ce54b8a5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -3,6 +3,7 @@ declare module '@marp-team/marpit' {
     backgroundSyntax?: boolean
     container?: Element | Element[]
     filters?: boolean
+    headingDivider?: false | MarpitHeadingDivider | MarpitHeadingDivider[]
     inlineStyle?: boolean
     markdown?: string | object | [string, object]
     printable?: boolean
@@ -10,6 +11,8 @@ declare module '@marp-team/marpit' {
     inlineSVG?: boolean
   }
 
+  type MarpitHeadingDivider = 1 | 2 | 3 | 4 | 5 | 6
+
   type MarpitRenderResult = {
     html: string
     css: string

From 634f981a4f5d5d0d51a4cfac9286d826cabc2cfb Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Tue, 10 Jul 2018 19:04:11 +0900
Subject: [PATCH 05/14] [WIP] Add basic implementation and test of Marpit
 heading divider plugin

---
 src/markdown/heading_divider.js  | 24 +++++++++++++++++--
 test/markdown/heading_divider.js | 41 ++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 test/markdown/heading_divider.js

diff --git a/src/markdown/heading_divider.js b/src/markdown/heading_divider.js
index 9183feb5..afc6291c 100644
--- a/src/markdown/heading_divider.js
+++ b/src/markdown/heading_divider.js
@@ -1,4 +1,5 @@
 /** @module */
+import split from '../helpers/split'
 
 /**
  * Marpit heading divider plugin.
@@ -11,9 +12,28 @@
  */
 function headingDivider(md, marpit) {
   md.core.ruler.before('marpit_slide', 'marpit_heading_divider', state => {
-    if (state.inlineMode || marpit.options.headingDivider === false) return
+    let target = marpit.options.headingDivider
 
-    // TODO: Prepend hidden ruler token at before headings
+    if (state.inlineMode || target === false) return
+
+    if (Number.isInteger(target) && target >= 1 && target <= 6)
+      target = [...Array(headingDivider).keys()].map(i => i + 1)
+
+    if (!Array.isArray(target))
+      throw new Error('Invalid headingDivider option.')
+
+    const splitTag = target.map(i => `h${i}`)
+
+    state.tokens = split(
+      state.tokens,
+      t => t.type === 'heading_open' && splitTag.includes(t.tag),
+      true
+    ).reduce((arr, slideTokens) => {
+      // TODO: Prepend hidden ruler token at before headings
+      const isHeading = slideTokens[0] && slideTokens[0].type === 'heading_open'
+
+      return [...arr, ...slideTokens]
+    }, [])
   })
 }
 
diff --git a/test/markdown/heading_divider.js b/test/markdown/heading_divider.js
new file mode 100644
index 00000000..b1fc05a0
--- /dev/null
+++ b/test/markdown/heading_divider.js
@@ -0,0 +1,41 @@
+import assert from 'assert'
+import MarkdownIt from 'markdown-it'
+import headingDivider from '../../src/markdown/heading_divider'
+
+describe('Marpit heading divider plugin', () => {
+  const marpitStub = headingDividerOption => ({
+    options: { headingDivider: headingDividerOption },
+  })
+
+  const md = marpitInstance =>
+    new MarkdownIt('commonmark')
+      .use(pluginMd => pluginMd.core.ruler.push('marpit_slide', () => {}))
+      .use(headingDivider, marpitInstance)
+
+  const markdownText = '# 1st\n## 2nd\n### 3rd\n#### 4th'
+
+  context('with headingDivider option as false', () => {
+    const markdown = md(marpitStub(false))
+
+    it('does not add any horizontal ruler tokens', () => {
+      const tokens = markdown.parse(markdownText)
+      assert(tokens.filter(t => t.type === 'hr').length === 0)
+    })
+  })
+
+  context('with headingDivider option as array contained "3"', () => {
+    const markdown = md(marpitStub([3]))
+
+    it('adds hidden horizontal ruler to before 3rd level heading', () => {
+      const tokens = markdown.parse(markdownText)
+      const filtered = tokens.filter(
+        (t, idx) =>
+          t.type === 'hr' || (idx > 0 && tokens[idx - 1].type === 'hr')
+      )
+
+      assert(tokens.filter(t => t.type === 'hr').length === 1)
+      assert(filtered[1].type === 'heading_open')
+      assert(filtered[1].tag === 'h3')
+    })
+  })
+})

From a25d5513e52ab84a63874c889021bb215c3c5c78 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Wed, 11 Jul 2018 01:17:52 +0900
Subject: [PATCH 06/14] Implement heading divider and add test cases

---
 src/markdown/heading_divider.js  | 32 ++++++++-----
 test/markdown/heading_divider.js | 77 ++++++++++++++++++++++++++++----
 2 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/src/markdown/heading_divider.js b/src/markdown/heading_divider.js
index afc6291c..7bbd6a65 100644
--- a/src/markdown/heading_divider.js
+++ b/src/markdown/heading_divider.js
@@ -1,10 +1,12 @@
 /** @module */
+import Token from 'markdown-it/lib/token'
 import split from '../helpers/split'
 
 /**
  * Marpit heading divider plugin.
  *
- * Start a new slide page at before of headings.
+ * Start a new slide page at before of headings by prepending hidden `<hr>`
+ * elements.
  *
  * @alias module:markdown/heading_divider
  * @param {MarkdownIt} md markdown-it instance.
@@ -17,23 +19,31 @@ function headingDivider(md, marpit) {
     if (state.inlineMode || target === false) return
 
     if (Number.isInteger(target) && target >= 1 && target <= 6)
-      target = [...Array(headingDivider).keys()].map(i => i + 1)
+      target = [...Array(target).keys()].map(i => i + 1)
 
     if (!Array.isArray(target))
       throw new Error('Invalid headingDivider option.')
 
     const splitTag = target.map(i => `h${i}`)
+    const splitFunc = t => t.type === 'heading_open' && splitTag.includes(t.tag)
 
-    state.tokens = split(
-      state.tokens,
-      t => t.type === 'heading_open' && splitTag.includes(t.tag),
-      true
-    ).reduce((arr, slideTokens) => {
-      // TODO: Prepend hidden ruler token at before headings
-      const isHeading = slideTokens[0] && slideTokens[0].type === 'heading_open'
+    state.tokens = split(state.tokens, splitFunc, true).reduce(
+      (arr, slideTokens) => {
+        const [firstToken] = slideTokens
 
-      return [...arr, ...slideTokens]
-    }, [])
+        if (
+          !(firstToken && splitFunc(firstToken)) ||
+          arr.filter(t => !t.hidden).length === 0
+        )
+          return [...arr, ...slideTokens]
+
+        const token = new Token('hr', '', 0)
+        token.hidden = true
+
+        return [...arr, token, ...slideTokens]
+      },
+      []
+    )
   })
 }
 
diff --git a/test/markdown/heading_divider.js b/test/markdown/heading_divider.js
index b1fc05a0..80bae791 100644
--- a/test/markdown/heading_divider.js
+++ b/test/markdown/heading_divider.js
@@ -1,6 +1,8 @@
 import assert from 'assert'
+import cheerio from 'cheerio'
 import MarkdownIt from 'markdown-it'
 import headingDivider from '../../src/markdown/heading_divider'
+import slide from '../../src/markdown/slide'
 
 describe('Marpit heading divider plugin', () => {
   const marpitStub = headingDividerOption => ({
@@ -14,6 +16,11 @@ describe('Marpit heading divider plugin', () => {
 
   const markdownText = '# 1st\n## 2nd\n### 3rd\n#### 4th'
 
+  const pickHrAndHeading = tokens =>
+    tokens.filter(
+      (t, idx) => t.type === 'hr' || (idx > 0 && tokens[idx - 1].type === 'hr')
+    )
+
   context('with headingDivider option as false', () => {
     const markdown = md(marpitStub(false))
 
@@ -23,19 +30,71 @@ describe('Marpit heading divider plugin', () => {
     })
   })
 
-  context('with headingDivider option as array contained "3"', () => {
-    const markdown = md(marpitStub([3]))
+  context('with headingDivider option as 3', () => {
+    const markdown = md(marpitStub(3))
 
-    it('adds hidden horizontal ruler to before 3rd level heading', () => {
+    it('adds hidden hr token to before until 3rd level headings except first', () => {
       const tokens = markdown.parse(markdownText)
-      const filtered = tokens.filter(
-        (t, idx) =>
-          t.type === 'hr' || (idx > 0 && tokens[idx - 1].type === 'hr')
-      )
+      assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+      const hrAndHeadings = pickHrAndHeading(tokens)
+      assert(hrAndHeadings[0].type === 'hr')
+      assert(hrAndHeadings[0].hidden)
+      assert(hrAndHeadings[1].type === 'heading_open')
+      assert(hrAndHeadings[1].tag === 'h2')
+      assert(hrAndHeadings[2].type === 'hr')
+      assert(hrAndHeadings[2].hidden)
+      assert(hrAndHeadings[3].type === 'heading_open')
+      assert(hrAndHeadings[3].tag === 'h3')
+    })
+  })
 
+  context('with headingDivider option as array contained 3', () => {
+    const markdown = md(marpitStub([3]))
+
+    it('adds hidden hr token to before 3rd level heading', () => {
+      const tokens = markdown.parse(markdownText)
       assert(tokens.filter(t => t.type === 'hr').length === 1)
-      assert(filtered[1].type === 'heading_open')
-      assert(filtered[1].tag === 'h3')
+
+      const hrAndHeadings = pickHrAndHeading(tokens)
+      assert(hrAndHeadings[0].type === 'hr')
+      assert(hrAndHeadings[0].hidden)
+      assert(hrAndHeadings[1].type === 'heading_open')
+      assert(hrAndHeadings[1].tag === 'h3')
     })
   })
+
+  context('with headingDivider option as array contained 2 and 4', () => {
+    const markdown = md(marpitStub([2, 4]))
+
+    it('adds hidden hr token to before 2nd and 4th level heading', () => {
+      const tokens = markdown.parse(markdownText)
+      assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+      const hrAndHeadings = pickHrAndHeading(tokens)
+      assert(hrAndHeadings[0].type === 'hr')
+      assert(hrAndHeadings[0].hidden)
+      assert(hrAndHeadings[1].type === 'heading_open')
+      assert(hrAndHeadings[1].tag === 'h2')
+      assert(hrAndHeadings[2].type === 'hr')
+      assert(hrAndHeadings[2].hidden)
+      assert(hrAndHeadings[3].type === 'heading_open')
+      assert(hrAndHeadings[3].tag === 'h4')
+    })
+  })
+
+  context('with headingDivider option as 4 and slide plugin', () => {
+    const mdWithSlide = instance =>
+      new MarkdownIt('commonmark').use(slide).use(headingDivider, instance)
+
+    it('renders four <section> elements', () => {
+      const $ = cheerio.load(mdWithSlide(marpitStub(4)).render(markdownText))
+      assert($('section').length === 4)
+    })
+  })
+
+  context('with invalid headingDivider option', () => {
+    const markdown = md(marpitStub('invalid'))
+    it('throws error', () => assert.throws(() => markdown.parse(markdownText)))
+  })
 })

From b5fb020de16caebb201f6f351649708e31490c8c Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Wed, 11 Jul 2018 02:20:26 +0900
Subject: [PATCH 07/14] Add headingDivider global directive

---
 src/markdown/directives/directives.js | 13 +++++++++++++
 src/markdown/heading_divider.js       |  9 +++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/markdown/directives/directives.js b/src/markdown/directives/directives.js
index 68f028c8..639ce750 100644
--- a/src/markdown/directives/directives.js
+++ b/src/markdown/directives/directives.js
@@ -19,10 +19,23 @@
  * You can use prefix `$` as the name of a directive for the clarity (or
  * compatibility with the old version of Marp).
  *
+ * @prop {Directive} headingDivider Specify heading divider option.
  * @prop {Directive} style Specify the CSS style to apply additionally.
  * @prop {Directive} theme Specify theme of the slide deck.
  */
 export const globals = {
+  headingDivider(value) {
+    const headings = [1, 2, 3, 4, 5, 6]
+    const converted = Number.isNaN(value) ? value : Number.parseInt(value, 10)
+
+    if (Array.isArray(converted))
+      return { headingDivider: headings.filter(v => converted.includes(v)) }
+
+    if (headings.includes(converted) || converted === false)
+      return { headingDivider: converted }
+
+    return {}
+  },
   style(value) {
     return { style: value }
   },
diff --git a/src/markdown/heading_divider.js b/src/markdown/heading_divider.js
index 7bbd6a65..a5e3cfc0 100644
--- a/src/markdown/heading_divider.js
+++ b/src/markdown/heading_divider.js
@@ -16,6 +16,15 @@ function headingDivider(md, marpit) {
   md.core.ruler.before('marpit_slide', 'marpit_heading_divider', state => {
     let target = marpit.options.headingDivider
 
+    if (
+      marpit.lastGlobalDirectives &&
+      Object.prototype.hasOwnProperty.call(
+        marpit.lastGlobalDirectives,
+        'headingDivider'
+      )
+    )
+      target = marpit.lastGlobalDirectives.headingDivider
+
     if (state.inlineMode || target === false) return
 
     if (Number.isInteger(target) && target >= 1 && target <= 6)

From 4f4ce21211cc04f992bbb4dc221d4a70223006f0 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 21 Jul 2018 15:13:14 +0900
Subject: [PATCH 08/14] Parse directives by multi-pass

---
 src/markdown/directives/parse.js | 57 ++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/markdown/directives/parse.js b/src/markdown/directives/parse.js
index d6d6724e..977ca394 100644
--- a/src/markdown/directives/parse.js
+++ b/src/markdown/directives/parse.js
@@ -44,27 +44,52 @@ function parse(md, marpit, opts = {}) {
     })
   }
 
-  md.core.ruler.after('marpit_slide', 'marpit_directives_parse', state => {
+  // Parse global directives
+  md.core.ruler.after('block', 'marpit_directives_global_parse', state => {
     if (state.inlineMode) return
 
-    const slides = []
-    const cursor = { slide: undefined, global: {}, local: {}, spot: {} }
-
+    let globalDirectives = {}
     const applyDirectives = text => {
       const parsed = parseYAMLObject(text)
       if (parsed === false) return
 
       Object.keys(parsed).forEach(key => {
-        const v = parsed[key]
-
-        // Global directives (Support prefix "$" for clarity/compatibility)
         const globalKey = key.startsWith('$') ? key.slice(1) : key
+
         if (globals[globalKey])
-          cursor.global = { ...cursor.global, ...globals[globalKey](v, marpit) }
+          globalDirectives = {
+            ...globalDirectives,
+            ...globals[globalKey](parsed[key], marpit),
+          }
+      })
+    }
 
-        // Local directives
+    if (frontMatter && frontMatterText) applyDirectives(frontMatterText)
+
+    state.tokens.forEach(token => {
+      if (token.type === 'marpit_comment') applyDirectives(token.content)
+    })
+
+    marpit.lastGlobalDirectives = { ...globalDirectives }
+  })
+
+  // Parse local directives and apply meta to slide
+  md.core.ruler.after('marpit_slide', 'marpit_directives_parse', state => {
+    if (state.inlineMode) return
+
+    const slides = []
+    const cursor = { slide: undefined, local: {}, spot: {} }
+
+    const applyDirectives = text => {
+      const parsed = parseYAMLObject(text)
+      if (parsed === false) return
+
+      Object.keys(parsed).forEach(key => {
         if (locals[key])
-          cursor.local = { ...cursor.local, ...locals[key](v, marpit) }
+          cursor.local = {
+            ...cursor.local,
+            ...locals[key](parsed[key], marpit),
+          }
 
         // Spot directives
         // (Apply local directive to only current slide by prefix "_")
@@ -72,15 +97,16 @@ function parse(md, marpit, opts = {}) {
           const spotKey = key.slice(1)
 
           if (locals[spotKey])
-            cursor.spot = { ...cursor.spot, ...locals[spotKey](v, marpit) }
+            cursor.spot = {
+              ...cursor.spot,
+              ...locals[spotKey](parsed[key], marpit),
+            }
         }
       })
     }
 
-    // At first, parse and apply YAML to cursor if assigned front-matter.
     if (frontMatter && frontMatterText) applyDirectives(frontMatterText)
 
-    // Walk tokens to parse slides and comments.
     state.tokens.forEach(token => {
       if (token.meta && token.meta.marpitSlideElement === 1) {
         // Initialize Marpit directives meta
@@ -106,12 +132,9 @@ function parse(md, marpit, opts = {}) {
     slides.forEach(token => {
       token.meta.marpitDirectives = {
         ...token.meta.marpitDirectives,
-        ...cursor.global,
+        ...marpit.lastGlobalDirectives,
       }
     })
-
-    // Store last parsed global directives to Marpit instance
-    marpit.lastGlobalDirectives = { ...cursor.global }
   })
 }
 

From 1a6fd910d92b74dc863b50a262770d5a683b29d3 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 21 Jul 2018 16:29:35 +0900
Subject: [PATCH 09/14] Add test cases of headingDivider global directive

It includes change to allow invalid value without throwing error.
---
 src/markdown/directives/directives.js |  16 +-
 src/markdown/heading_divider.js       |   3 +-
 test/markdown/heading_divider.js      | 209 ++++++++++++++++++--------
 3 files changed, 156 insertions(+), 72 deletions(-)

diff --git a/src/markdown/directives/directives.js b/src/markdown/directives/directives.js
index 639ce750..5ef8324d 100644
--- a/src/markdown/directives/directives.js
+++ b/src/markdown/directives/directives.js
@@ -26,13 +26,19 @@
 export const globals = {
   headingDivider(value) {
     const headings = [1, 2, 3, 4, 5, 6]
-    const converted = Number.isNaN(value) ? value : Number.parseInt(value, 10)
+    const toInt = v =>
+      Array.isArray(v) || Number.isNaN(v) ? v : Number.parseInt(v, 10)
+    const converted = toInt(value)
 
-    if (Array.isArray(converted))
-      return { headingDivider: headings.filter(v => converted.includes(v)) }
+    if (Array.isArray(converted)) {
+      const convertedArr = converted.map(toInt)
+      return {
+        headingDivider: headings.filter(v => convertedArr.includes(v)),
+      }
+    }
 
-    if (headings.includes(converted) || converted === false)
-      return { headingDivider: converted }
+    if (value === 'false') return { headingDivider: false }
+    if (headings.includes(converted)) return { headingDivider: converted }
 
     return {}
   },
diff --git a/src/markdown/heading_divider.js b/src/markdown/heading_divider.js
index a5e3cfc0..0ea1ef63 100644
--- a/src/markdown/heading_divider.js
+++ b/src/markdown/heading_divider.js
@@ -30,8 +30,7 @@ function headingDivider(md, marpit) {
     if (Number.isInteger(target) && target >= 1 && target <= 6)
       target = [...Array(target).keys()].map(i => i + 1)
 
-    if (!Array.isArray(target))
-      throw new Error('Invalid headingDivider option.')
+    if (!Array.isArray(target)) return
 
     const splitTag = target.map(i => `h${i}`)
     const splitFunc = t => t.type === 'heading_open' && splitTag.includes(t.tag)
diff --git a/test/markdown/heading_divider.js b/test/markdown/heading_divider.js
index 80bae791..243d68ea 100644
--- a/test/markdown/heading_divider.js
+++ b/test/markdown/heading_divider.js
@@ -1,7 +1,9 @@
 import assert from 'assert'
 import cheerio from 'cheerio'
 import MarkdownIt from 'markdown-it'
+import comment from '../../src/markdown/comment'
 import headingDivider from '../../src/markdown/heading_divider'
+import parseDirectives from '../../src/markdown/directives/parse'
 import slide from '../../src/markdown/slide'
 
 describe('Marpit heading divider plugin', () => {
@@ -9,11 +11,6 @@ describe('Marpit heading divider plugin', () => {
     options: { headingDivider: headingDividerOption },
   })
 
-  const md = marpitInstance =>
-    new MarkdownIt('commonmark')
-      .use(pluginMd => pluginMd.core.ruler.push('marpit_slide', () => {}))
-      .use(headingDivider, marpitInstance)
-
   const markdownText = '# 1st\n## 2nd\n### 3rd\n#### 4th'
 
   const pickHrAndHeading = tokens =>
@@ -21,80 +18,162 @@ describe('Marpit heading divider plugin', () => {
       (t, idx) => t.type === 'hr' || (idx > 0 && tokens[idx - 1].type === 'hr')
     )
 
-  context('with headingDivider option as false', () => {
-    const markdown = md(marpitStub(false))
+  describe('Constructor option', () => {
+    const md = marpitInstance =>
+      new MarkdownIt('commonmark')
+        .use(pluginMd => pluginMd.core.ruler.push('marpit_slide', () => {}))
+        .use(headingDivider, marpitInstance)
+
+    context('with headingDivider option as false', () => {
+      const markdown = md(marpitStub(false))
 
-    it('does not add any horizontal ruler tokens', () => {
-      const tokens = markdown.parse(markdownText)
-      assert(tokens.filter(t => t.type === 'hr').length === 0)
+      it('does not add any horizontal ruler tokens', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 0)
+      })
     })
-  })
 
-  context('with headingDivider option as 3', () => {
-    const markdown = md(marpitStub(3))
-
-    it('adds hidden hr token to before until 3rd level headings except first', () => {
-      const tokens = markdown.parse(markdownText)
-      assert(tokens.filter(t => t.type === 'hr').length === 2)
-
-      const hrAndHeadings = pickHrAndHeading(tokens)
-      assert(hrAndHeadings[0].type === 'hr')
-      assert(hrAndHeadings[0].hidden)
-      assert(hrAndHeadings[1].type === 'heading_open')
-      assert(hrAndHeadings[1].tag === 'h2')
-      assert(hrAndHeadings[2].type === 'hr')
-      assert(hrAndHeadings[2].hidden)
-      assert(hrAndHeadings[3].type === 'heading_open')
-      assert(hrAndHeadings[3].tag === 'h3')
+    context('with headingDivider option as 3', () => {
+      const markdown = md(marpitStub(3))
+
+      it('adds hidden hr token to before until 3rd level headings except first', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+        const hrAndHeadings = pickHrAndHeading(tokens)
+        assert(hrAndHeadings[0].type === 'hr')
+        assert(hrAndHeadings[0].hidden)
+        assert(hrAndHeadings[1].type === 'heading_open')
+        assert(hrAndHeadings[1].tag === 'h2')
+        assert(hrAndHeadings[2].type === 'hr')
+        assert(hrAndHeadings[2].hidden)
+        assert(hrAndHeadings[3].type === 'heading_open')
+        assert(hrAndHeadings[3].tag === 'h3')
+      })
     })
-  })
 
-  context('with headingDivider option as array contained 3', () => {
-    const markdown = md(marpitStub([3]))
+    context('with headingDivider option as array contained 3', () => {
+      const markdown = md(marpitStub([3]))
 
-    it('adds hidden hr token to before 3rd level heading', () => {
-      const tokens = markdown.parse(markdownText)
-      assert(tokens.filter(t => t.type === 'hr').length === 1)
+      it('adds hidden hr token to before 3rd level heading', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 1)
 
-      const hrAndHeadings = pickHrAndHeading(tokens)
-      assert(hrAndHeadings[0].type === 'hr')
-      assert(hrAndHeadings[0].hidden)
-      assert(hrAndHeadings[1].type === 'heading_open')
-      assert(hrAndHeadings[1].tag === 'h3')
+        const hrAndHeadings = pickHrAndHeading(tokens)
+        assert(hrAndHeadings[0].type === 'hr')
+        assert(hrAndHeadings[0].hidden)
+        assert(hrAndHeadings[1].type === 'heading_open')
+        assert(hrAndHeadings[1].tag === 'h3')
+      })
     })
-  })
 
-  context('with headingDivider option as array contained 2 and 4', () => {
-    const markdown = md(marpitStub([2, 4]))
-
-    it('adds hidden hr token to before 2nd and 4th level heading', () => {
-      const tokens = markdown.parse(markdownText)
-      assert(tokens.filter(t => t.type === 'hr').length === 2)
-
-      const hrAndHeadings = pickHrAndHeading(tokens)
-      assert(hrAndHeadings[0].type === 'hr')
-      assert(hrAndHeadings[0].hidden)
-      assert(hrAndHeadings[1].type === 'heading_open')
-      assert(hrAndHeadings[1].tag === 'h2')
-      assert(hrAndHeadings[2].type === 'hr')
-      assert(hrAndHeadings[2].hidden)
-      assert(hrAndHeadings[3].type === 'heading_open')
-      assert(hrAndHeadings[3].tag === 'h4')
+    context('with headingDivider option as array contained 2 and 4', () => {
+      const markdown = md(marpitStub([2, 4]))
+
+      it('adds hidden hr token to before 2nd and 4th level heading', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+        const hrAndHeadings = pickHrAndHeading(tokens)
+        assert(hrAndHeadings[0].type === 'hr')
+        assert(hrAndHeadings[0].hidden)
+        assert(hrAndHeadings[1].type === 'heading_open')
+        assert(hrAndHeadings[1].tag === 'h2')
+        assert(hrAndHeadings[2].type === 'hr')
+        assert(hrAndHeadings[2].hidden)
+        assert(hrAndHeadings[3].type === 'heading_open')
+        assert(hrAndHeadings[3].tag === 'h4')
+      })
+    })
+
+    context('with headingDivider option as 4 and slide plugin', () => {
+      const mdWithSlide = instance =>
+        new MarkdownIt('commonmark').use(slide).use(headingDivider, instance)
+
+      it('renders four <section> elements', () => {
+        const $ = cheerio.load(mdWithSlide(marpitStub(4)).render(markdownText))
+        assert($('section').length === 4)
+      })
     })
-  })
 
-  context('with headingDivider option as 4 and slide plugin', () => {
-    const mdWithSlide = instance =>
-      new MarkdownIt('commonmark').use(slide).use(headingDivider, instance)
+    context('with invalid headingDivider option', () => {
+      const markdown = md(marpitStub('invalid'))
 
-    it('renders four <section> elements', () => {
-      const $ = cheerio.load(mdWithSlide(marpitStub(4)).render(markdownText))
-      assert($('section').length === 4)
+      it('does not add any horizontal ruler tokens', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 0)
+      })
     })
   })
 
-  context('with invalid headingDivider option', () => {
-    const markdown = md(marpitStub('invalid'))
-    it('throws error', () => assert.throws(() => markdown.parse(markdownText)))
+  describe('Global directive', () => {
+    const md = (marpitInstance = { options: {} }) =>
+      new MarkdownIt('commonmark')
+        .use(comment)
+        .use(pluginMd => pluginMd.core.ruler.push('marpit_slide', () => {}))
+        .use(parseDirectives, marpitInstance)
+        .use(headingDivider, marpitInstance)
+
+    const markdownTextWithDirective = level =>
+      `---\nheadingDivider: ${level}\n---\n\n${markdownText}`
+
+    const markdownTextWithComment = level =>
+      `${markdownText}\n<!-- headingDivider: ${level} -->`
+
+    context('with headingDivider directive as 3', () => {
+      const markdown = md()
+      const text = markdownTextWithDirective(3)
+
+      it('adds hidden hr token to before until 3rd level headings except first', () => {
+        const tokens = markdown.parse(text)
+        assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+        const hrAndHeadings = pickHrAndHeading(tokens)
+        assert(hrAndHeadings[0].type === 'hr')
+        assert(hrAndHeadings[0].hidden)
+        assert(hrAndHeadings[1].type === 'heading_open')
+        assert(hrAndHeadings[1].tag === 'h2')
+        assert(hrAndHeadings[2].type === 'hr')
+        assert(hrAndHeadings[2].hidden)
+        assert(hrAndHeadings[3].type === 'heading_open')
+        assert(hrAndHeadings[3].tag === 'h3')
+      })
+    })
+
+    context(
+      'with headingDivider directive with comment as array contained 2 and 4',
+      () => {
+        const markdown = md()
+        const text = markdownTextWithComment('[2,4]')
+
+        it('adds hidden hr token to before 2nd and 4th level heading', () => {
+          const tokens = markdown.parse(text)
+          assert(tokens.filter(t => t.type === 'hr').length === 2)
+
+          const hrAndHeadings = pickHrAndHeading(tokens)
+          assert(hrAndHeadings[0].type === 'hr')
+          assert(hrAndHeadings[0].hidden)
+          assert(hrAndHeadings[1].type === 'heading_open')
+          assert(hrAndHeadings[1].tag === 'h2')
+          assert(hrAndHeadings[2].type === 'hr')
+          assert(hrAndHeadings[2].hidden)
+          assert(hrAndHeadings[3].type === 'heading_open')
+          assert(hrAndHeadings[3].tag === 'h4')
+        })
+      }
+    )
+
+    context('with headingDivider option and directive', () => {
+      const markdown = md(marpitStub(4))
+      const text = markdownTextWithDirective('false')
+
+      it('overrides headingDivider option by directive', () => {
+        const tokens = markdown.parse(markdownText)
+        assert(tokens.filter(t => t.type === 'hr').length === 3)
+
+        const tokensWithOverride = markdown.parse(text)
+        assert(tokensWithOverride.filter(t => t.type === 'hr').length === 0)
+      })
+    })
   })
 })

From 86df093f50caaa494ed6466090224012461f7c0e Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 21 Jul 2018 16:30:19 +0900
Subject: [PATCH 10/14] Remove planning tag of heading divider from README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 9676d9e1..40521dfe 100644
--- a/README.md
+++ b/README.md
@@ -121,7 +121,7 @@ footer: "![image](https://example.com/image.jpg)"
 
 > :information_source: Due to the parsing order of Markdown, you cannot use [slide background images](#slide-background) in `header` and `footer` directives.
 
-#### [PLANNING] Heading divider
+#### Heading divider
 
 This feature is similar to [Pandoc](https://pandoc.org/)'s [`--slide-level` option](https://pandoc.org/MANUAL.html#structuring-the-slide-show) and [Deckset 2](https://www.deckset.com/2/)'s "Slide Dividers" option.
 

From 36f62b5cdf052217b746fd03e0359e9fd5830bd7 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 21 Jul 2018 16:31:03 +0900
Subject: [PATCH 11/14] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a6a97ae..2f1b2123 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## [Unreleased]
 
 - Add the basic TypeScript definition ([#40](https://github.com/marp-team/marpit/pull/40))
+- Support heading divider ([#41](https://github.com/marp-team/marpit/pull/41))
 
 ## v0.0.8 - 2018-06-28
 

From 3fff390ce0b10c8cc3f602a772067913b9ee1572 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 21 Jul 2018 16:42:30 +0900
Subject: [PATCH 12/14] Add test case about invalid heading divider directive

---
 test/markdown/heading_divider.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/test/markdown/heading_divider.js b/test/markdown/heading_divider.js
index 243d68ea..f115e437 100644
--- a/test/markdown/heading_divider.js
+++ b/test/markdown/heading_divider.js
@@ -163,16 +163,20 @@ describe('Marpit heading divider plugin', () => {
       }
     )
 
-    context('with headingDivider option and directive', () => {
+    context('with headingDivider constructor option', () => {
       const markdown = md(marpitStub(4))
-      const text = markdownTextWithDirective('false')
 
       it('overrides headingDivider option by directive', () => {
         const tokens = markdown.parse(markdownText)
         assert(tokens.filter(t => t.type === 'hr').length === 3)
 
-        const tokensWithOverride = markdown.parse(text)
-        assert(tokensWithOverride.filter(t => t.type === 'hr').length === 0)
+        const overridden = markdown.parse(markdownTextWithDirective('false'))
+        assert(overridden.filter(t => t.type === 'hr').length === 0)
+      })
+
+      it('ignores invalid headingDivider directive', () => {
+        const overridden = markdown.parse(markdownTextWithDirective('invalid'))
+        assert(overridden.filter(t => t.type === 'hr').length === 3)
       })
     })
   })

From 6e803e8523987f16c08e651c841ac90d0fa207df Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 22 Jul 2018 15:00:01 +0900
Subject: [PATCH 13/14] Improve performance to parse YAML for directives

---
 src/helpers/parse_yaml.js        | 21 +++++++++++
 src/markdown/comment.js          |  6 ++++
 src/markdown/directives/parse.js | 60 ++++++++++++--------------------
 3 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 src/helpers/parse_yaml.js

diff --git a/src/helpers/parse_yaml.js b/src/helpers/parse_yaml.js
new file mode 100644
index 00000000..666fec66
--- /dev/null
+++ b/src/helpers/parse_yaml.js
@@ -0,0 +1,21 @@
+/** @module */
+import YAML, { FAILSAFE_SCHEMA } from 'js-yaml'
+
+/**
+ * Parse text as YAML by using js-yaml's FAILSAFE_SCHEMA.
+ *
+ * @alias module:helpers/parse_yaml
+ * @param {String} text Target text.
+ */
+function parseYAML(text) {
+  try {
+    const obj = YAML.safeLoad(text, { schema: FAILSAFE_SCHEMA })
+    if (obj === null || typeof obj !== 'object') return false
+
+    return obj
+  } catch (e) {
+    return false
+  }
+}
+
+export default parseYAML
diff --git a/src/markdown/comment.js b/src/markdown/comment.js
index f0e665d7..9e1d9d50 100644
--- a/src/markdown/comment.js
+++ b/src/markdown/comment.js
@@ -1,4 +1,6 @@
 /** @module */
+import parseYAML from '../helpers/parse_yaml'
+
 const commentMatcher = /<!--+\s*([\s\S]*?)\s*--+>/
 const commentMatcherOpening = /^<!--/
 const commentMatcherClosing = /-->/
@@ -58,6 +60,10 @@ function comment(md) {
       const matchedContent = commentMatcher.exec(token.markup)
       token.content = matchedContent ? matchedContent[1].trim() : ''
 
+      // Parse YAML
+      const yaml = parseYAML(token.content)
+      token.meta = { marpitParsedYAML: yaml === false ? {} : yaml }
+
       return true
     }
   )
diff --git a/src/markdown/directives/parse.js b/src/markdown/directives/parse.js
index 977ca394..3a9933bd 100644
--- a/src/markdown/directives/parse.js
+++ b/src/markdown/directives/parse.js
@@ -1,20 +1,8 @@
 /** @module */
 import MarkdownItFrontMatter from 'markdown-it-front-matter'
-import YAML, { FAILSAFE_SCHEMA } from 'js-yaml'
+import parseYAML from '../../helpers/parse_yaml'
 import { globals, locals } from './directives'
 
-// Parse text as YAML by using js-yaml's FAILSAFE_SCHEMA.
-function parseYAMLObject(text) {
-  try {
-    const obj = YAML.safeLoad(text, { schema: FAILSAFE_SCHEMA })
-    if (obj === null || typeof obj !== 'object') return false
-
-    return obj
-  } catch (e) {
-    return false
-  }
-}
-
 /**
  * Parse Marpit directives and store result to the slide token meta.
  *
@@ -32,15 +20,18 @@ function parseYAMLObject(text) {
 function parse(md, marpit, opts = {}) {
   // Front-matter support
   const frontMatter = opts.frontMatter === undefined ? true : !!opts.frontMatter
-  let frontMatterText
+  let frontMatterObject = {}
 
   if (frontMatter) {
     md.core.ruler.before('block', 'marpit_directives_front_matter', state => {
-      frontMatterText = undefined
+      frontMatterObject = {}
       if (!state.inlineMode) marpit.lastGlobalDirectives = {}
     })
     md.use(MarkdownItFrontMatter, fm => {
-      frontMatterText = fm
+      frontMatterObject.text = fm
+
+      const yaml = parseYAML(fm)
+      if (yaml !== false) frontMatterObject.yaml = yaml
     })
   }
 
@@ -49,25 +40,23 @@ function parse(md, marpit, opts = {}) {
     if (state.inlineMode) return
 
     let globalDirectives = {}
-    const applyDirectives = text => {
-      const parsed = parseYAMLObject(text)
-      if (parsed === false) return
-
-      Object.keys(parsed).forEach(key => {
+    const applyDirectives = yaml => {
+      Object.keys(yaml).forEach(key => {
         const globalKey = key.startsWith('$') ? key.slice(1) : key
 
         if (globals[globalKey])
           globalDirectives = {
             ...globalDirectives,
-            ...globals[globalKey](parsed[key], marpit),
+            ...globals[globalKey](yaml[key], marpit),
           }
       })
     }
 
-    if (frontMatter && frontMatterText) applyDirectives(frontMatterText)
+    if (frontMatterObject.yaml) applyDirectives(frontMatterObject.yaml)
 
     state.tokens.forEach(token => {
-      if (token.type === 'marpit_comment') applyDirectives(token.content)
+      if (token.type === 'marpit_comment' && token.meta.marpitParsedYAML)
+        applyDirectives(token.meta.marpitParsedYAML)
     })
 
     marpit.lastGlobalDirectives = { ...globalDirectives }
@@ -80,16 +69,10 @@ function parse(md, marpit, opts = {}) {
     const slides = []
     const cursor = { slide: undefined, local: {}, spot: {} }
 
-    const applyDirectives = text => {
-      const parsed = parseYAMLObject(text)
-      if (parsed === false) return
-
-      Object.keys(parsed).forEach(key => {
+    const applyDirectives = yaml => {
+      Object.keys(yaml).forEach(key => {
         if (locals[key])
-          cursor.local = {
-            ...cursor.local,
-            ...locals[key](parsed[key], marpit),
-          }
+          cursor.local = { ...cursor.local, ...locals[key](yaml[key], marpit) }
 
         // Spot directives
         // (Apply local directive to only current slide by prefix "_")
@@ -99,13 +82,13 @@ function parse(md, marpit, opts = {}) {
           if (locals[spotKey])
             cursor.spot = {
               ...cursor.spot,
-              ...locals[spotKey](parsed[key], marpit),
+              ...locals[spotKey](yaml[key], marpit),
             }
         }
       })
     }
 
-    if (frontMatter && frontMatterText) applyDirectives(frontMatterText)
+    if (frontMatterObject.yaml) applyDirectives(frontMatterObject.yaml)
 
     state.tokens.forEach(token => {
       if (token.meta && token.meta.marpitSlideElement === 1) {
@@ -123,8 +106,11 @@ function parse(md, marpit, opts = {}) {
         }
 
         cursor.spot = {}
-      } else if (token.type === 'marpit_comment') {
-        applyDirectives(token.content)
+      } else if (
+        token.type === 'marpit_comment' &&
+        token.meta.marpitParsedYAML
+      ) {
+        applyDirectives(token.meta.marpitParsedYAML)
       }
     })
 

From 8721fdb93310436dda31c24d0fd445c8744f504f Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 22 Jul 2018 15:09:05 +0900
Subject: [PATCH 14/14] Update heading divider example on README.md

---
 README.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/README.md b/README.md
index 40521dfe..8ef5fec2 100644
--- a/README.md
+++ b/README.md
@@ -152,6 +152,12 @@ The content of 1st page
 ### The content of 2nd page
 
 Hello, world!
+
+---
+
+# 3rd page
+
+😃
 ```
 
 </td><td>
@@ -168,6 +174,10 @@ The content of 1st page
 ### The content of 2nd page
 
 Hello, world!
+
+# 3rd page
+
+😃
 ```
 
 </td>