Repository: marp-team/marp-vscode
Pull request #266 (2021-07-24 23:22:17)

Add IntelliSense for `math` global directive
![](https://user-images.githubusercontent.com/3993388/126883172-36d0571f-4836-4c50-833a-57d1da89c311.png)



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eda78e1..7f6236b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,12 +2,19 @@
 
 ## [Unreleased]
 
+### Added
+
+- IntelliSense and auto-completion for [`math` global directive](https://github.com/marp-team/marp-core#math-global-directive) ([#266](https://github.com/marp-team/marp-vscode/pull/266))
+
 ### Fixed
 
 - VS Code 1.58 does not open Workspace Trust from a notification of export command ([#259](https://github.com/marp-team/marp-vscode/issues/259), [#260](https://github.com/marp-team/marp-vscode/pull/260))
 
 ### Changed
 
+- Upgrade Marp Core to [v2.1.0](https://github.com/marp-team/marp-core/releases/tag/v2.1.0) ([#265](https://github.com/marp-team/marp-vscode/pull/265))
+  - [`math` global directive](https://github.com/marp-team/marp-core#math-global-directive) for switching math typesetting library in current Markdown
+- Upgrade Marp CLI to [v1.2.0](https://github.com/marp-team/marp-cli/releases/tag/v1.2.0) ([#265](https://github.com/marp-team/marp-vscode/pull/265))
 - Upgrade dependent packages to the latest ([#265](https://github.com/marp-team/marp-vscode/pull/265))
 
 ## v1.1.0 - 2021-07-08
diff --git a/src/directives/definitions.ts b/src/directives/definitions.ts
index c7ce6fa..15fc672 100644
--- a/src/directives/definitions.ts
+++ b/src/directives/definitions.ts
@@ -256,6 +256,21 @@ export const builtinDirectives = [
   }),
 
   // Marp Core extension
+  createDirectiveInfo({
+    name: 'math',
+    description: dedent(`
+      Choose a library to render math typesetting in the current Markdown.
+
+      - \`katex\`: Use [KaTeX](https://katex.org/). It is generally known as faster parsing than MathJax.
+      - \`mathjax\`: Use [MathJax](https://www.mathjax.org/). It has more stable rendering and better syntax support.
+
+      Marp may change the default library of the ecosystem in the future. To prevent breaking existing slides, recommend to declare used library whenever to use math typesetting.
+    `),
+    allowed: directiveAlwaysAllowed,
+    providedBy: DirectiveProvidedBy.MarpCore,
+    type: DirectiveType.Global,
+    details: 'https://github.com/marp-team/marp-core#math-global-directive',
+  }),
   createDirectiveInfo({
     name: 'size',
     description: dedent(`
diff --git a/src/language/completions.ts b/src/language/completions.ts
index 7d4fa5a..5f2c71b 100644
--- a/src/language/completions.ts
+++ b/src/language/completions.ts
@@ -82,6 +82,7 @@ class CompletionProvider {
     return (
       this.completionThemes() ||
       this.completionBoolean() ||
+      this.completionMath() ||
       this.completionDirectives()
     )
   }
@@ -122,6 +123,29 @@ class CompletionProvider {
     }
   }
 
+  private completionMath() {
+    if (this.isCursorOnDirective('math')) {
+      return new CompletionList([
+        {
+          detail: 'KaTeX',
+          documentation: new MarkdownString(
+            'Use [KaTeX](https://katex.org/). It is generally known as faster parsing than MathJax.'
+          ),
+          kind: CompletionItemKind.EnumMember,
+          label: 'katex',
+        },
+        {
+          detail: 'MathJax',
+          documentation: new MarkdownString(
+            'Use [MathJax](https://www.mathjax.org/). It has more stable rendering and better syntax support.'
+          ),
+          kind: CompletionItemKind.EnumMember,
+          label: 'mathjax',
+        },
+      ])
+    }
+  }
+
   private completionDirectives() {
     // Determine how to completion directive key from the focused word
     let range: Range | undefined


Test patch:
diff --git a/src/language/completions.test.ts b/src/language/completions.test.ts
index ebf3360..cca7a9c 100644
--- a/src/language/completions.test.ts
+++ b/src/language/completions.test.ts
@@ -109,28 +109,29 @@ describe('Auto completions', () => {
         const labels = list.items.map((item) => item.label).sort()
 
         expect(labels).toMatchInlineSnapshot(`
-          Array [
-            "backgroundColor",
-            "backgroundImage",
-            "backgroundPosition",
-            "backgroundRepeat",
-            "backgroundSize",
-            "class",
-            "color",
-            "description",
-            "footer",
-            "header",
-            "headingDivider",
-            "image",
-            "marp",
-            "paginate",
-            "size",
-            "style",
-            "theme",
-            "title",
-            "url",
-          ]
-        `)
+Array [
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "class",
+  "color",
+  "description",
+  "footer",
+  "header",
+  "headingDivider",
+  "image",
+  "marp",
+  "math",
+  "paginate",
+  "size",
+  "style",
+  "theme",
+  "title",
+  "url",
+]
+`)
 
         // The insert text has semicolon
         expect(list.items[0].insertText).toBe(`${list.items[0].label}: `)
@@ -148,27 +149,28 @@ describe('Auto completions', () => {
         const labels = list.items.map((item) => item.label).sort()
 
         expect(labels).toMatchInlineSnapshot(`
-          Array [
-            "backgroundColor",
-            "backgroundImage",
-            "backgroundPosition",
-            "backgroundRepeat",
-            "backgroundSize",
-            "class",
-            "color",
-            "description",
-            "footer",
-            "header",
-            "headingDivider",
-            "image",
-            "paginate",
-            "size",
-            "style",
-            "theme",
-            "title",
-            "url",
-          ]
-        `)
+Array [
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "class",
+  "color",
+  "description",
+  "footer",
+  "header",
+  "headingDivider",
+  "image",
+  "math",
+  "paginate",
+  "size",
+  "style",
+  "theme",
+  "title",
+  "url",
+]
+`)
         expect(labels).not.toContain('marp')
       })
 
@@ -283,5 +285,26 @@ describe('Auto completions', () => {
         `)
       })
     })
+
+    describe('Math suggestion', () => {
+      it('suggests math library when the cursor is on math directive', async () => {
+        const doc = setDocument('---\nmarp: true\nmath: \n---')
+        const list = (await provideCompletionItems()(
+          doc,
+          new Position(2, 6),
+          {} as any,
+          {} as any
+        )) as CompletionList
+
+        const labels = list.items.map((item) => item.label).sort()
+
+        expect(labels).toMatchInlineSnapshot(`
+Array [
+  "katex",
+  "mathjax",
+]
+`)
+      })
+    })
   })
 })