Merge pull request #376 from marp-team/lang-directive

Add `lang` global directive and constructor option

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- `lang` global directive and constructor option ([#376](https://github.com/marp-team/marpit/pull/376))
+
 ### Changed
 
 - Upgrade dependent packages to the latest version ([#375](https://github.com/marp-team/marpit/pull/375))

docs/directives.md

@@ -80,11 +80,12 @@ The second page would not apply setting of directives.
 
 ## Global directives
 
-| Name             | Description                      |
-| :--------------- | :------------------------------- |
-| `theme`          | Specify theme of the slide deck. |
-| `style`          | Specify CSS for tweaking theme.  |
-| `headingDivider` | Specify heading divider option.  |
+| Name             | Description                                                                                                            |
+| :--------------- | :--------------------------------------------------------------------------------------------------------------------- |
+| `headingDivider` | Specify heading divider option.                                                                                        |
+| `lang`           | Set the value of [`lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang) for each slide |
+| `style`          | Specify CSS for tweaking theme.                                                                                        |
+| `theme`          | Specify theme of the slide deck.                                                                                       |
 
 ### Theme
 

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 (marpitDirectives.lang || lang)
+            token.attrSet('lang', marpitDirectives.lang || 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,
@@ -71,6 +72,8 @@ class Marpit {
    *     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 {string} [opts.lang] Set the default `lang` attribute of each slide.
+   *     It can override by `lang` global directive in the Markdown.
    * @param {boolean} [opts.looseYAML=false] Allow loose YAML parsing in
    *     built-in directives, and custom directives defined in current instance.
    * @param {MarkdownIt|string|Object|Array} [opts.markdown] An instance of

test/markdown/directives/apply.js

@@ -102,6 +102,41 @@ 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')
+      })
+
+      it('can override the language that is setting by `lang` constructor option', () => {
+        const $lang = load(md({ options: { lang: 'fr' } }).render(langDir))
+        expect($lang('section').first().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`