From 769f35a4b39ecbdefd882a58134c59f73730f8a2 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sat, 12 May 2018 20:42:41 +0900
Subject: [PATCH 01/11] Recognize footer and header local directive

---
 src/markdown/directives/directives.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/markdown/directives/directives.js b/src/markdown/directives/directives.js
index 4629bce2..1b75ad80 100644
--- a/src/markdown/directives/directives.js
+++ b/src/markdown/directives/directives.js
@@ -45,6 +45,10 @@ export const globals = {
  * @prop {Directive} backgroundSize Specify background-size style. The default
  *     value while setting backgroundImage is `cover`.
  * @prop {Directive} class Specify HTML class of section element(s).
+ * @prop {Directive} footer Specify the content of slide footer. It will insert
+ *     a `<footer>` element to the last of each slide contents.
+ * @prop {Directive} header Specify the content of slide header. It will insert
+ *     a `<header>` element to the first of each slide contents.
  * @prop {Directive} pagination Show page number on the slide if you set `true`.
  */
 export const locals = {
@@ -63,6 +67,12 @@ export const locals = {
   class(value) {
     return { class: value }
   },
+  footer(value) {
+    return { footer: value }
+  },
+  header(value) {
+    return { header: value }
+  },
   paginate(value) {
     return { paginate: (value || '').toLowerCase() === 'true' }
   },

From f0ac3be674af6eb0097e6b2055fec92c63911c58 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 13 May 2018 02:47:35 +0900
Subject: [PATCH 02/11] Add Marpit marginal plugin

---
 src/markdown/directives/apply.js |  6 ++++++
 src/markdown/marginals.js        | 30 ++++++++++++++++++++++++++++++
 src/marpit.js                    |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 src/markdown/marginals.js

diff --git a/src/markdown/directives/apply.js b/src/markdown/directives/apply.js
index 7e76feb3..fd73657e 100644
--- a/src/markdown/directives/apply.js
+++ b/src/markdown/directives/apply.js
@@ -76,6 +76,12 @@ function apply(md, opts = {}) {
         if (marpitDirectives.paginate)
           token.attrSet('data-marpit-pagination', marpitSlide + 1)
 
+        if (marpitDirectives.header)
+          token.meta.marpitHeader = marpitDirectives.header
+
+        if (marpitDirectives.footer)
+          token.meta.marpitFooter = marpitDirectives.footer
+
         const styleStr = style.toString()
         if (styleStr !== '') token.attrSet('style', styleStr)
       })
diff --git a/src/markdown/marginals.js b/src/markdown/marginals.js
new file mode 100644
index 00000000..1742550e
--- /dev/null
+++ b/src/markdown/marginals.js
@@ -0,0 +1,30 @@
+/** @module */
+import split from '../helpers/split'
+import wrapTokens from '../helpers/wrap_tokens'
+
+/**
+ * Marpit marginals plugin.
+ *
+ * Add header and footer to each slide.
+ *
+ * @alias module:markdown/marginals
+ * @param {MarkdownIt} md markdown-it instance.
+ */
+function marginals(md) {
+  md.core.ruler.after('marpit_directives_apply', 'marpit_marginals', state => {
+    if (state.inlineMode) return
+
+    state.tokens = split(
+      state.tokens,
+      t => t.meta && (t.meta.marpitHeader || t.meta.marpitFooter),
+      true
+    ).reduce((arr, tokens) => {
+      if (tokens.length === 0) return arr
+
+      // TODO: Add marginals
+      return [...arr, ...tokens]
+    }, [])
+  })
+}
+
+export default marginals
diff --git a/src/marpit.js b/src/marpit.js
index 61c6b3d0..faa7480a 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 marpitInlineSVG from './markdown/inline_svg'
+import marpitMarginals from './markdown/marginals'
 import marpitParseDirectives from './markdown/directives/parse'
 import marpitParseImage from './markdown/parse_image'
 import marpitSlide from './markdown/slide'
@@ -89,6 +90,7 @@ class Marpit {
       .use(marpitSlide)
       .use(marpitParseDirectives, this)
       .use(marpitApplyDirectives)
+      .use(marpitMarginals)
       .use(marpitSlideContainer, this.slideContainers)
       .use(marpitContainerPlugin, this.containers)
       .use(marpitParseImage, { filters: this.options.filters })

From a71be60ae29cac711b8267364d94b69466e34896 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 13 May 2018 02:58:44 +0900
Subject: [PATCH 03/11] Add the basic test case of Marpit marginals plugin

---
 test/markdown/marginals.js | 56 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 test/markdown/marginals.js

diff --git a/test/markdown/marginals.js b/test/markdown/marginals.js
new file mode 100644
index 00000000..99841a26
--- /dev/null
+++ b/test/markdown/marginals.js
@@ -0,0 +1,56 @@
+import assert from 'assert'
+import cheerio from 'cheerio'
+import dedent from 'dedent'
+import MarkdownIt from 'markdown-it'
+import applyDirectives from '../../src/markdown/directives/apply'
+import parseDirectives from '../../src/markdown/directives/parse'
+import slide from '../../src/markdown/slide'
+import marginals from '../../src/markdown/marginals'
+
+describe('Marpit marginals plugin', () => {
+  const themeSet = new Map()
+  themeSet.set('test_theme', true)
+
+  const marpitStub = (props = {}) => ({
+    themeSet,
+    lastGlobalDirectives: {},
+    ...props,
+  })
+
+  const md = (marpitInstance = marpitStub()) =>
+    new MarkdownIt('commonmark')
+      .use(slide)
+      .use(parseDirectives, { themeSet: marpitInstance.themeSet })
+      .use(applyDirectives)
+      .use(marginals)
+
+  describe('Header local directive', () => {
+    const markdown = '<!-- header: text -->\n# Page 1\n\n---\n\n# Page 2'
+
+    it('appends <header> element to each slide', () => {
+      const $ = cheerio.load(md().render(markdown))
+
+      $('section').each((i, elm) => {
+        const children = $(elm).children()
+
+        assert(children.first().tagName === 'header')
+        assert(children.first().html() === 'text')
+      })
+    })
+  })
+
+  describe('Footer local directive', () => {
+    const markdown = '<!-- footer: text -->\n# Page 1\n\n---\n\n# Page 2'
+
+    it('prepends <footer> element to each slide', () => {
+      const $ = cheerio.load(md().render(markdown))
+
+      $('section').each((i, elm) => {
+        const children = $(elm).children()
+
+        assert(children.last().tagName === 'footer')
+        assert(children.last().html() === 'text')
+      })
+    })
+  })
+})

From 94a9212315381b7caf3f39352feca35a045852c7 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 13 May 2018 03:39:54 +0900
Subject: [PATCH 04/11] Implement marginals plugin

---
 src/markdown/marginals.js  | 56 +++++++++++++++++++++++++++++++-------
 test/markdown/marginals.js | 13 +++++----
 2 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/markdown/marginals.js b/src/markdown/marginals.js
index 1742550e..1aed61b1 100644
--- a/src/markdown/marginals.js
+++ b/src/markdown/marginals.js
@@ -1,11 +1,11 @@
 /** @module */
-import split from '../helpers/split'
+import Token from 'markdown-it/lib/token'
 import wrapTokens from '../helpers/wrap_tokens'
 
 /**
  * Marpit marginals plugin.
  *
- * Add header and footer to each slide.
+ * At each slide, add header and footer that are provided by directives.
  *
  * @alias module:markdown/marginals
  * @param {MarkdownIt} md markdown-it instance.
@@ -14,15 +14,51 @@ function marginals(md) {
   md.core.ruler.after('marpit_directives_apply', 'marpit_marginals', state => {
     if (state.inlineMode) return
 
-    state.tokens = split(
-      state.tokens,
-      t => t.meta && (t.meta.marpitHeader || t.meta.marpitFooter),
-      true
-    ).reduce((arr, tokens) => {
-      if (tokens.length === 0) return arr
+    const renderedInlines = new Map()
+    const getRendered = markdown => {
+      let rendered = renderedInlines.get(markdown)
 
-      // TODO: Add marginals
-      return [...arr, ...tokens]
+      if (!rendered) {
+        rendered = md.renderInline(markdown, state.env)
+        renderedInlines.set(markdown, rendered)
+      }
+
+      return rendered
+    }
+
+    const createMarginalTokens = (tag, markdown) => {
+      const token = new Token('html_block', '', 0)
+      token.content = getRendered(markdown)
+
+      return wrapTokens(`marpit_${tag}`, { tag, close: { block: true } }, [
+        token,
+      ])
+    }
+
+    let current
+
+    state.tokens = state.tokens.reduce((arr, token) => {
+      let concats = [token]
+
+      if (token.meta) {
+        if (token.meta.marpitSlideElement === 1) {
+          current = token
+
+          if (current.meta.marpitHeader)
+            concats = [
+              ...concats,
+              ...createMarginalTokens('header', current.meta.marpitHeader),
+            ]
+        } else if (token.meta.marpitSlideElement === -1) {
+          if (current.meta.marpitFooter)
+            concats = [
+              ...createMarginalTokens('footer', current.meta.marpitFooter),
+              ...concats,
+            ]
+        }
+      }
+
+      return [...arr, ...concats]
     }, [])
   })
 }
diff --git a/test/markdown/marginals.js b/test/markdown/marginals.js
index 99841a26..bda86803 100644
--- a/test/markdown/marginals.js
+++ b/test/markdown/marginals.js
@@ -1,8 +1,8 @@
 import assert from 'assert'
 import cheerio from 'cheerio'
-import dedent from 'dedent'
 import MarkdownIt from 'markdown-it'
 import applyDirectives from '../../src/markdown/directives/apply'
+import comment from '../../src/markdown/comment'
 import parseDirectives from '../../src/markdown/directives/parse'
 import slide from '../../src/markdown/slide'
 import marginals from '../../src/markdown/marginals'
@@ -19,6 +19,7 @@ describe('Marpit marginals plugin', () => {
 
   const md = (marpitInstance = marpitStub()) =>
     new MarkdownIt('commonmark')
+      .use(comment)
       .use(slide)
       .use(parseDirectives, { themeSet: marpitInstance.themeSet })
       .use(applyDirectives)
@@ -32,9 +33,10 @@ describe('Marpit marginals plugin', () => {
 
       $('section').each((i, elm) => {
         const children = $(elm).children()
+        const firstChild = children.first()
 
-        assert(children.first().tagName === 'header')
-        assert(children.first().html() === 'text')
+        assert(firstChild.get(0).tagName === 'header')
+        assert(firstChild.html() === 'text')
       })
     })
   })
@@ -47,9 +49,10 @@ describe('Marpit marginals plugin', () => {
 
       $('section').each((i, elm) => {
         const children = $(elm).children()
+        const lastChild = children.last()
 
-        assert(children.last().tagName === 'footer')
-        assert(children.last().html() === 'text')
+        assert(lastChild.get(0).tagName === 'footer')
+        assert(lastChild.html() === 'text')
       })
     })
   })

From 4846060b83285e9e2c8bb2dd7eec166c84941efc Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 13 May 2018 04:22:15 +0900
Subject: [PATCH 05/11] Fix the detection logic of slide to use token type in
 marginals plugin

---
 src/markdown/marginals.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/markdown/marginals.js b/src/markdown/marginals.js
index 1aed61b1..558dbf3b 100644
--- a/src/markdown/marginals.js
+++ b/src/markdown/marginals.js
@@ -40,22 +40,20 @@ function marginals(md) {
     state.tokens = state.tokens.reduce((arr, token) => {
       let concats = [token]
 
-      if (token.meta) {
-        if (token.meta.marpitSlideElement === 1) {
-          current = token
+      if (token.type === 'marpit_slide_open') {
+        current = token
 
-          if (current.meta.marpitHeader)
-            concats = [
-              ...concats,
-              ...createMarginalTokens('header', current.meta.marpitHeader),
-            ]
-        } else if (token.meta.marpitSlideElement === -1) {
-          if (current.meta.marpitFooter)
-            concats = [
-              ...createMarginalTokens('footer', current.meta.marpitFooter),
-              ...concats,
-            ]
-        }
+        if (current.meta && current.meta.marpitHeader)
+          concats = [
+            ...concats,
+            ...createMarginalTokens('header', current.meta.marpitHeader),
+          ]
+      } else if (token.type === 'marpit_slide_close') {
+        if (current.meta && current.meta.marpitFooter)
+          concats = [
+            ...createMarginalTokens('footer', current.meta.marpitFooter),
+            ...concats,
+          ]
       }
 
       return [...arr, ...concats]

From b57dd2863651f2947bea4d165ec801eae0b21bbf Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Mon, 14 May 2018 18:35:19 +0900
Subject: [PATCH 06/11] Rename marginals plugin into header and footer plugin

---
 src/markdown/header_and_footer.js             | 68 +++++++++++++++++++
 src/markdown/marginals.js                     | 64 -----------------
 src/marpit.js                                 |  4 +-
 .../{marginals.js => header_and_footer.js}    |  6 +-
 4 files changed, 73 insertions(+), 69 deletions(-)
 create mode 100644 src/markdown/header_and_footer.js
 delete mode 100644 src/markdown/marginals.js
 rename test/markdown/{marginals.js => header_and_footer.js} (91%)

diff --git a/src/markdown/header_and_footer.js b/src/markdown/header_and_footer.js
new file mode 100644
index 00000000..821e82e6
--- /dev/null
+++ b/src/markdown/header_and_footer.js
@@ -0,0 +1,68 @@
+/** @module */
+import Token from 'markdown-it/lib/token'
+import wrapTokens from '../helpers/wrap_tokens'
+
+/**
+ * Marpit header and footer plugin.
+ *
+ * At each slide, add header and footer that are provided by directives.
+ *
+ * @alias module:markdown/header_and_footer
+ * @param {MarkdownIt} md markdown-it instance.
+ */
+function headerAndFooter(md) {
+  md.core.ruler.after(
+    'marpit_directives_apply',
+    'marpit_header_and_footer',
+    state => {
+      if (state.inlineMode) return
+
+      const renderedInlines = new Map()
+      const getRendered = markdown => {
+        let rendered = renderedInlines.get(markdown)
+
+        if (!rendered) {
+          rendered = md.renderInline(markdown, state.env)
+          renderedInlines.set(markdown, rendered)
+        }
+
+        return rendered
+      }
+
+      const createMarginalTokens = (tag, markdown) => {
+        const token = new Token('html_block', '', 0)
+        token.content = getRendered(markdown)
+
+        return wrapTokens(`marpit_${tag}`, { tag, close: { block: true } }, [
+          token,
+        ])
+      }
+
+      let current
+
+      state.tokens = state.tokens.reduce((arr, token) => {
+        let concats = [token]
+
+        if (token.type === 'marpit_slide_open') {
+          current = token
+
+          if (current.meta && current.meta.marpitHeader)
+            concats = [
+              ...concats,
+              ...createMarginalTokens('header', current.meta.marpitHeader),
+            ]
+        } else if (token.type === 'marpit_slide_close') {
+          if (current.meta && current.meta.marpitFooter)
+            concats = [
+              ...createMarginalTokens('footer', current.meta.marpitFooter),
+              ...concats,
+            ]
+        }
+
+        return [...arr, ...concats]
+      }, [])
+    }
+  )
+}
+
+export default headerAndFooter
diff --git a/src/markdown/marginals.js b/src/markdown/marginals.js
deleted file mode 100644
index 558dbf3b..00000000
--- a/src/markdown/marginals.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/** @module */
-import Token from 'markdown-it/lib/token'
-import wrapTokens from '../helpers/wrap_tokens'
-
-/**
- * Marpit marginals plugin.
- *
- * At each slide, add header and footer that are provided by directives.
- *
- * @alias module:markdown/marginals
- * @param {MarkdownIt} md markdown-it instance.
- */
-function marginals(md) {
-  md.core.ruler.after('marpit_directives_apply', 'marpit_marginals', state => {
-    if (state.inlineMode) return
-
-    const renderedInlines = new Map()
-    const getRendered = markdown => {
-      let rendered = renderedInlines.get(markdown)
-
-      if (!rendered) {
-        rendered = md.renderInline(markdown, state.env)
-        renderedInlines.set(markdown, rendered)
-      }
-
-      return rendered
-    }
-
-    const createMarginalTokens = (tag, markdown) => {
-      const token = new Token('html_block', '', 0)
-      token.content = getRendered(markdown)
-
-      return wrapTokens(`marpit_${tag}`, { tag, close: { block: true } }, [
-        token,
-      ])
-    }
-
-    let current
-
-    state.tokens = state.tokens.reduce((arr, token) => {
-      let concats = [token]
-
-      if (token.type === 'marpit_slide_open') {
-        current = token
-
-        if (current.meta && current.meta.marpitHeader)
-          concats = [
-            ...concats,
-            ...createMarginalTokens('header', current.meta.marpitHeader),
-          ]
-      } else if (token.type === 'marpit_slide_close') {
-        if (current.meta && current.meta.marpitFooter)
-          concats = [
-            ...createMarginalTokens('footer', current.meta.marpitFooter),
-            ...concats,
-          ]
-      }
-
-      return [...arr, ...concats]
-    }, [])
-  })
-}
-
-export default marginals
diff --git a/src/marpit.js b/src/marpit.js
index faa7480a..1a821abc 100644
--- a/src/marpit.js
+++ b/src/marpit.js
@@ -6,8 +6,8 @@ import marpitApplyDirectives from './markdown/directives/apply'
 import marpitBackgroundImage from './markdown/background_image'
 import marpitComment from './markdown/comment'
 import marpitContainerPlugin from './markdown/container'
+import marpitHeaderAndFooter from './markdown/header_and_footer'
 import marpitInlineSVG from './markdown/inline_svg'
-import marpitMarginals from './markdown/marginals'
 import marpitParseDirectives from './markdown/directives/parse'
 import marpitParseImage from './markdown/parse_image'
 import marpitSlide from './markdown/slide'
@@ -90,7 +90,7 @@ class Marpit {
       .use(marpitSlide)
       .use(marpitParseDirectives, this)
       .use(marpitApplyDirectives)
-      .use(marpitMarginals)
+      .use(marpitHeaderAndFooter)
       .use(marpitSlideContainer, this.slideContainers)
       .use(marpitContainerPlugin, this.containers)
       .use(marpitParseImage, { filters: this.options.filters })
diff --git a/test/markdown/marginals.js b/test/markdown/header_and_footer.js
similarity index 91%
rename from test/markdown/marginals.js
rename to test/markdown/header_and_footer.js
index bda86803..67651227 100644
--- a/test/markdown/marginals.js
+++ b/test/markdown/header_and_footer.js
@@ -5,9 +5,9 @@ import applyDirectives from '../../src/markdown/directives/apply'
 import comment from '../../src/markdown/comment'
 import parseDirectives from '../../src/markdown/directives/parse'
 import slide from '../../src/markdown/slide'
-import marginals from '../../src/markdown/marginals'
+import headerAndFooter from '../../src/markdown/header_and_footer'
 
-describe('Marpit marginals plugin', () => {
+describe('Marpit header and footer plugin', () => {
   const themeSet = new Map()
   themeSet.set('test_theme', true)
 
@@ -23,7 +23,7 @@ describe('Marpit marginals plugin', () => {
       .use(slide)
       .use(parseDirectives, { themeSet: marpitInstance.themeSet })
       .use(applyDirectives)
-      .use(marginals)
+      .use(headerAndFooter)
 
   describe('Header local directive', () => {
     const markdown = '<!-- header: text -->\n# Page 1\n\n---\n\n# Page 2'

From 17dbc3901979f07acdc545998cbbecf02366b486 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Mon, 14 May 2018 18:44:14 +0900
Subject: [PATCH 07/11] Add test case of header/footer plugin with including
 inline markdown

---
 test/markdown/header_and_footer.js | 46 +++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/test/markdown/header_and_footer.js b/test/markdown/header_and_footer.js
index 67651227..4f242e08 100644
--- a/test/markdown/header_and_footer.js
+++ b/test/markdown/header_and_footer.js
@@ -26,10 +26,11 @@ describe('Marpit header and footer plugin', () => {
       .use(headerAndFooter)
 
   describe('Header local directive', () => {
-    const markdown = '<!-- header: text -->\n# Page 1\n\n---\n\n# Page 2'
+    const markdown = header =>
+      `<!-- header: "${header}" -->\n# Page 1\n\n---\n\n# Page 2`
 
     it('appends <header> element to each slide', () => {
-      const $ = cheerio.load(md().render(markdown))
+      const $ = cheerio.load(md().render(markdown('text')))
 
       $('section').each((i, elm) => {
         const children = $(elm).children()
@@ -39,13 +40,32 @@ describe('Marpit header and footer plugin', () => {
         assert(firstChild.html() === 'text')
       })
     })
+
+    it('renders tags when it includes inline markdown syntax', () => {
+      const mdText = '**bold** _italic_ ![image](https://example.com/image.jpg)'
+      const $ = cheerio.load(md().render(markdown(mdText)))
+
+      $('section').each((i, elm) => {
+        const header = $(elm)
+          .children()
+          .first()
+
+        const img = header.find('img')
+
+        assert(header.find('strong').length === 1)
+        assert(header.find('em').length === 1)
+        assert(img.length === 1)
+        assert(img.attr('src') === 'https://example.com/image.jpg')
+      })
+    })
   })
 
   describe('Footer local directive', () => {
-    const markdown = '<!-- footer: text -->\n# Page 1\n\n---\n\n# Page 2'
+    const markdown = footer =>
+      `<!-- footer: "${footer}" -->\n# Page 1\n\n---\n\n# Page 2`
 
     it('prepends <footer> element to each slide', () => {
-      const $ = cheerio.load(md().render(markdown))
+      const $ = cheerio.load(md().render(markdown('text')))
 
       $('section').each((i, elm) => {
         const children = $(elm).children()
@@ -55,5 +75,23 @@ describe('Marpit header and footer plugin', () => {
         assert(lastChild.html() === 'text')
       })
     })
+
+    it('renders tags when it includes inline markdown syntax', () => {
+      const mdText = '**bold** _italic_ ![image](https://example.com/image.jpg)'
+      const $ = cheerio.load(md().render(markdown(mdText)))
+
+      $('section').each((i, elm) => {
+        const footer = $(elm)
+          .children()
+          .last()
+
+        const img = footer.find('img')
+
+        assert(footer.find('strong').length === 1)
+        assert(footer.find('em').length === 1)
+        assert(img.length === 1)
+        assert(img.attr('src') === 'https://example.com/image.jpg')
+      })
+    })
   })
 })

From 9a4f0af30886e8ad7551f060e558b7b8f6ab246b Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Mon, 14 May 2018 19:31:39 +0900
Subject: [PATCH 08/11] Update README.md about header and footer directive

---
 README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8c00cb9a..18436e2e 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,57 @@ Simply you have to move a definition of `paginate` directive to an inside of a s
 It will paginate slide from a this page.
 ```
 
+#### Header and footer
+
+When you have to be shown the same content across multiple slides like a title of the slide deck, you can use `header` or `footer` local directives.
+
+```markdown
+---
+header: "Header content"
+footer: "Footer content"
+---
+
+# Page 1
+
+---
+
+## Page 2
+```
+
+In above case, it will render to HTML like this:
+
+```html
+<section>
+  <header>Header content</header>
+  <h1>Page 1</h1>
+  <footer>Footer content</footer>
+</section>
+<section>
+  <header>Header content</header>
+  <h2>Page 2</h2>
+  <footer>Footer content</footer>
+</section>
+```
+
+The specified contents will wrap by a corresponding element, and insert to a right place of each slide.
+
+If you want to place these contents in the marginals of the slide, **you have to use a theme that is supported it.** If not, you could simply see header and footer as the part of slide content.
+
+##### Styling header and footer
+
+In addition, you can format the header and footer content with inline styling through markdown syntax. You can also insert inline images.
+
+```html
+---
+header: "**bold** _italic_"
+footer: "![image](https://example.com/image.jpg)"
+---
+```
+
+> :warning: Marpit uses YAML for parsing directives, so **you should wrap with quotes** when the value includes invalid chars in YAML.
+
+> :information_source: Due to the parsing order of Markdown, you cannot use [slide background images](#slide-background) in `header` and `footer` directives.
+
 ### Slide backgrounds
 
 We provide a background image syntax to specify slide's background through Markdown. Include `bg` to the alternate text.
@@ -119,8 +170,6 @@ This feature is available regardless of `backgroundSyntax` option in Marpit cons
 <!-- _backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" -->
 ```
 
-Marpit uses YAML for parsing directives, so you should wrap by quote when the value includes space.
-
 ##### Directives
 
 | Spot directive        | Description                          | Default     |

From 5ac8badc995b6b9a095424f971bbc1eae95207c7 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Mon, 14 May 2018 19:34:56 +0900
Subject: [PATCH 09/11] [ci skip] Remove ToDo section on README.md

---
 README.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/README.md b/README.md
index 18436e2e..0da42b7f 100644
--- a/README.md
+++ b/README.md
@@ -254,10 +254,6 @@ Naturally multiple filters can apply to a image.
 ![brightness:.8 sepia:50%](https://example.com/image.jpg)
 ```
 
-### ToDo
-
-* [ ] Header and footer directive
-
 ## Markup
 
 ### HTML output

From 6823283f4394795547af78ea5a28dadd67c1aa2a Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Mon, 14 May 2018 20:07:06 +0900
Subject: [PATCH 10/11] [ci skip] Update README.md about theme's header and
 footer

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

diff --git a/README.md b/README.md
index 0da42b7f..d29cd54f 100644
--- a/README.md
+++ b/README.md
@@ -340,6 +340,38 @@ Please refer to [the default style of `section::after` in a scaffold theme](src/
 
 > :information_source: The root `section::after` has preserved a content of page number from Marpit. At present, you cannot use the root `section::after` selector for other use.
 
+#### Header and footer
+
+`header` element and `footer` element have a possible to be rendered by [local directives](#header-and-footer). _Marpit has no default style for these elements._
+
+If you want to place to marginals of slide, using `position: absolute` would be a good solution.
+
+```css
+section {
+  padding: 50px;
+}
+
+header,
+footer {
+  position: absolute;
+  left: 50px;
+  right: 50px;
+  height: 20px;
+}
+
+header {
+  top: 30px;
+}
+
+footer {
+  bottom: 30px;
+}
+```
+
+Of course, you can use the other way as needed (Flexbox, Grid, etc...).
+
+You can even hide by `display: none` when you are scared a corrupted layout caused by inserted elements. Poof!
+
 #### Theme set
 
 The `Marpit` instance has a `themeSet` member that manages usable themes in the `theme` directive of Marpit Markdown. You have to add theme CSS by using `themeSet.add(string)`.

From 351bf973a1a4f5bc68a60241bf388f4194fe1c40 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yuki.hattori@speee.jp>
Date: Mon, 14 May 2018 20:08:09 +0900
Subject: [PATCH 11/11] [ci skip] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4194589c..df6a4e2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+* Add `header` and `footer` directives ([#22](https://github.com/marp-team/marpit/pull/22))
+
 ## v0.0.5 - 2018-05-12
 
 * Add `paginate` local directive ([#17](https://github.com/marp-team/marpit/pull/17))