Add lang directive and lang constructor option

index.d.ts

@@ -10,6 +10,7 @@ declare namespace Marpit {
     anchor?: boolean | AnchorCallback
     container?: false | Element | Element[]
     headingDivider?: false | HeadingDivider | HeadingDivider[]
+    lang?: string
     looseYAML?: boolean
     markdown?: any
     printable?: boolean

src/markdown/directives/apply.js

@@ -17,6 +17,7 @@ import builtInDirectives from './directives'
  */
 function _apply(md, opts = {}) {
   const { marpit } = md
+  const { lang } = marpit.options
 
   const dataset = opts.dataset === undefined ? true : !!opts.dataset
   const css = opts.css === undefined ? true : !!opts.css
@@ -69,6 +70,9 @@ function _apply(md, opts = {}) {
           }
 
           // Apply attribute to token
+          if (lang || marpitDirectives.lang)
+            token.attrSet('lang', lang || marpitDirectives.lang)
+
           if (marpitDirectives.class)
             token.attrJoin('class', marpitDirectives.class)
 

src/markdown/directives/directives.js

@@ -19,6 +19,8 @@
  * @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.
+ * @prop {Directive} lang Specify the language of the slide deck. It will
+ *     assign as `lang` attribute for each slide.
  */
 export const globals = Object.assign(Object.create(null), {
   headingDivider: (value) => {
@@ -41,6 +43,7 @@ export const globals = Object.assign(Object.create(null), {
   },
   style: (v) => ({ style: v }),
   theme: (v, marpit) => (marpit.themeSet.has(v) ? { theme: v } : {}),
+  lang: (v) => ({ lang: v }),
 })
 
 /**

src/marpit.js

@@ -23,6 +23,7 @@ const defaultOptions = {
   anchor: true,
   container: marpitContainer,
   headingDivider: false,
+  lang: undefined,
   looseYAML: false,
   markdown: undefined,
   printable: true,

test/markdown/directives/apply.js

@@ -102,6 +102,36 @@ describe('Marpit directives apply plugin', () => {
     })
   })
 
+  describe('Global directives', () => {
+    describe('lang directive', () => {
+      const langDir = dedent`
+        ---
+        lang: en-US
+        ---
+
+        ---
+      `
+
+      it('applies lang attribute to each section element', () => {
+        const $ = load(mdForTest().render(langDir))
+        const sections = $('section')
+
+        expect(sections.eq(0).attr('lang')).toBe('en-US')
+        expect(sections.eq(1).attr('lang')).toBe('en-US')
+      })
+
+      context('when lang directive is not defined', () => {
+        it('follows the lang option of Marpit instance', () => {
+          const $ = load(md({}).render(''))
+          expect($('section').first().attr('lang')).toBeUndefined()
+
+          const $lang = load(md({ options: { lang: 'en-US' } }).render(''))
+          expect($lang('section').first().attr('lang')).toBe('en-US')
+        })
+      })
+    })
+  })
+
   describe('Local directives', () => {
     describe('Background image', () => {
       const bgDirs = dedent`