From 1a7c7ee843d4833a1660714b2998b4420f5feaf7 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Sun, 15 Oct 2023 02:59:31 +0900 Subject: [PATCH 1/4] Add lang directive and lang constructor option --- index.d.ts | 1 + src/markdown/directives/apply.js | 4 ++++ src/markdown/directives/directives.js | 3 +++ src/marpit.js | 1 + test/markdown/directives/apply.js | 30 +++++++++++++++++++++++++++ 5 files changed, 39 insertions(+) diff --git a/index.d.ts b/index.d.ts index b8dedc0..26769cf 100644 --- a/index.d.ts +++ b/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 diff --git a/src/markdown/directives/apply.js b/src/markdown/directives/apply.js index e6f224d..61b3a80 100644 --- a/src/markdown/directives/apply.js +++ b/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) diff --git a/src/markdown/directives/directives.js b/src/markdown/directives/directives.js index f85e370..3f14719 100644 --- a/src/markdown/directives/directives.js +++ b/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 }), }) /** diff --git a/src/marpit.js b/src/marpit.js index c563510..7dbe90c 100644 --- a/src/marpit.js +++ b/src/marpit.js @@ -23,6 +23,7 @@ const defaultOptions = { anchor: true, container: marpitContainer, headingDivider: false, + lang: undefined, looseYAML: false, markdown: undefined, printable: true, diff --git a/test/markdown/directives/apply.js b/test/markdown/directives/apply.js index 872c81b..595bc5d 100644 --- a/test/markdown/directives/apply.js +++ b/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` From e38d67602447bad97b14059d7ab7d3893268a907 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Sun, 15 Oct 2023 03:10:42 +0900 Subject: [PATCH 2/4] Prefer lang global directive than constructor option --- src/markdown/directives/apply.js | 4 ++-- src/marpit.js | 2 ++ test/markdown/directives/apply.js | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/markdown/directives/apply.js b/src/markdown/directives/apply.js index 61b3a80..1ce81cd 100644 --- a/src/markdown/directives/apply.js +++ b/src/markdown/directives/apply.js @@ -70,8 +70,8 @@ function _apply(md, opts = {}) { } // Apply attribute to token - if (lang || marpitDirectives.lang) - token.attrSet('lang', lang || marpitDirectives.lang) + if (marpitDirectives.lang || lang) + token.attrSet('lang', marpitDirectives.lang || lang) if (marpitDirectives.class) token.attrJoin('class', marpitDirectives.class) diff --git a/src/marpit.js b/src/marpit.js index 7dbe90c..14a0529 100644 --- a/src/marpit.js +++ b/src/marpit.js @@ -72,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 diff --git a/test/markdown/directives/apply.js b/test/markdown/directives/apply.js index 595bc5d..92a84d6 100644 --- a/test/markdown/directives/apply.js +++ b/test/markdown/directives/apply.js @@ -120,6 +120,11 @@ describe('Marpit directives apply plugin', () => { 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('')) From 6d28a8560bed174a5adc03607cbe30f8127d1988 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Sun, 15 Oct 2023 03:17:40 +0900 Subject: [PATCH 3/4] Update directives docs --- docs/directives.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/directives.md b/docs/directives.md index 7948c7f..6c73477 100644 --- a/docs/directives.md +++ b/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 From da664a68932477e72928b7c97f51aa7ec7ac5ff3 Mon Sep 17 00:00:00 2001 From: Yuki Hattori Date: Sun, 15 Oct 2023 20:03:45 +0900 Subject: [PATCH 4/4] [ci skip] Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f50696d..be2236d 100644 --- a/CHANGELOG.md +++ b/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))