Repository: marp-team/marp-vscode (ts)

Issue:
Add support for `lang` directive
Hi Marp team!

I'm interested to use the [hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) CSS property as follow:

```yaml
theme: gaia
style: |
    p {
        hyphens: auto;
    }
```

In order for this to work, I need to set the [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute.

`marp-cli` defines the argument `lang` in its [options](https://github.com/marp-team/marp-cli#options). When using the command-line tool as `npx @marp-team/marp-cli@latest --lang en --pdf --output README.pdf README.md`, the hyphens are correctly rendered.

I would like to add support for the `lang` directive in `marp-vscode` so the language of the document can be set:

```yaml
theme: gaia
lang: en
style: |
    p {
        hyphens: auto;
    }
```

From my understanding of the codebase, the starting point would be https://github.com/marp-team/marp-vscode/blob/d9af184ed12b65bb28c0f328e250955d548ac1d1/src/directives/definitions.ts by adding a new directive such as:

```ts
  // Marp CLI metadata options
  createDirectiveInfo({
    name: 'lang',
    description: 'Set lang of the slide deck.',
    allowed: directiveAlwaysAllowed,
    providedBy: DirectiveProvidedBy.MarpCLI,
    type: DirectiveType.Global,
    details: 'https://github.com/marp-team/marp-cli#metadata', // Need to update the metadata as well
  }),
```

Would this feature be useful for `marp-vscode`? I would be glad to implement this feature if you are interested.

Pull request:
Add IntelliSense definition for `lang` global directive
Updated Marpit framework, Marp Core, and Marp CLI are supporting `lang` global directive for setting the language of Markdown document. We added IntelliSense support for `lang` global directive.

![](https://github.com/marp-team/marp-vscode/assets/3993388/800430d9-c6e9-4fef-9d6b-7269469f7238)

By changing the `lang` directive, Markdown author can check out slight changes in a preview pane.

|`lang`|Screenshot|
|:---:|:---:|
|**`en`**|![en](https://github.com/marp-team/marp-vscode/assets/3993388/8c4de0b8-4667-484b-a109-8db578f2aefd)|
|**`de`**|![de](https://github.com/marp-team/marp-vscode/assets/3993388/ffe3c59b-91e5-461b-b598-93608c05dcef)|
|**`zh`**|![zh](https://github.com/marp-team/marp-vscode/assets/3993388/b0bbc702-eb04-40cb-94b2-886e959e33cd)|
|**`ja`**|![ja](https://github.com/marp-team/marp-vscode/assets/3993388/84900582-9264-40a9-af63-5850ffbc4c8d)|

Closes #430.

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3232429..9b5f3ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,10 @@
 - Upgrade Marp CLI to [v3.4.0](https://github.com/marp-team/marp-cli/releases/tag/v3.4.0) ([#444](https://github.com/marp-team/marp-vscode/pull/444))
 - Upgrade dependent packages to the latest version ([#445](https://github.com/marp-team/marp-vscode/pull/445))
 
+### Added
+
+- IntelliSense definition for `lang` global directive ([#430](https://github.com/marp-team/marp-vscode/issues/430), [#446](https://github.com/marp-team/marp-vscode/pull/446))
+
 ### Fixed
 
 - Disappeared inline elements with `position: relative` that are the direct children of the slide ([#442](https://github.com/marp-team/marp-vscode/issues/442), [#443](https://github.com/marp-team/marp-vscode/pull/443))
diff --git a/jest.config.js b/jest.config.js
index be3ce52..35d6c97 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -42,6 +42,7 @@ module.exports = {
   coveragePathIgnorePatterns: ['/node_modules/', '.*\\.d\\.ts'],
   coverageThreshold: { global: { lines: 95 } },
   preset: 'ts-jest/presets/js-with-babel',
+  prettierPath: null,
   setupFiles: ['<rootDir>/jest.setup.js'],
   testEnvironment: 'node',
   transformIgnorePatterns: [`/node_modules/(?!${esModules.join('|')})`],
diff --git a/src/directives/definitions.ts b/src/directives/definitions.ts
index 933d54e..8d8d864 100644
--- a/src/directives/definitions.ts
+++ b/src/directives/definitions.ts
@@ -97,6 +97,13 @@ export const builtinDirectives = [
     details: 'https://marpit.marp.app/directives?id=theme',
     completable: true,
   }),
+  createDirectiveInfo({
+    name: 'lang',
+    description: 'Set the `lang` attribute of the entire slide deck.',
+    allowed: directiveAlwaysAllowed,
+    providedBy: DirectiveProvidedBy.Marpit,
+    type: DirectiveType.Global,
+  }),
   createDirectiveInfo({
     name: 'style',
     description: dedent(`


Test patch:
diff --git a/src/language/completions.test.ts b/src/language/completions.test.ts
index fd46832..c4ac87b 100644
--- a/src/language/completions.test.ts
+++ b/src/language/completions.test.ts
@@ -112,32 +112,33 @@ describe('Auto completions', () => {
         const labels = list.items.map((item) => item.label).sort()
 
         expect(labels).toMatchInlineSnapshot(`
-          [
-            "author",
-            "backgroundColor",
-            "backgroundImage",
-            "backgroundPosition",
-            "backgroundRepeat",
-            "backgroundSize",
-            "class",
-            "color",
-            "description",
-            "footer",
-            "header",
-            "headingDivider",
-            "image",
-            "keywords",
-            "marp",
-            "math",
-            "paginate",
-            "size",
-            "style",
-            "theme",
-            "title",
-            "transition",
-            "url",
-          ]
-        `)
+[
+  "author",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "class",
+  "color",
+  "description",
+  "footer",
+  "header",
+  "headingDivider",
+  "image",
+  "keywords",
+  "lang",
+  "marp",
+  "math",
+  "paginate",
+  "size",
+  "style",
+  "theme",
+  "title",
+  "transition",
+  "url",
+]
+`)
 
         // The insert text has semicolon
         expect(list.items[0].insertText).toBe(`${list.items[0].label}: `)
@@ -155,31 +156,32 @@ describe('Auto completions', () => {
         const labels = list.items.map((item) => item.label).sort()
 
         expect(labels).toMatchInlineSnapshot(`
-          [
-            "author",
-            "backgroundColor",
-            "backgroundImage",
-            "backgroundPosition",
-            "backgroundRepeat",
-            "backgroundSize",
-            "class",
-            "color",
-            "description",
-            "footer",
-            "header",
-            "headingDivider",
-            "image",
-            "keywords",
-            "math",
-            "paginate",
-            "size",
-            "style",
-            "theme",
-            "title",
-            "transition",
-            "url",
-          ]
-        `)
+[
+  "author",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "class",
+  "color",
+  "description",
+  "footer",
+  "header",
+  "headingDivider",
+  "image",
+  "keywords",
+  "lang",
+  "math",
+  "paginate",
+  "size",
+  "style",
+  "theme",
+  "title",
+  "transition",
+  "url",
+]
+`)
         expect(labels).not.toContain('marp')
       })