Merge pull request #18 from marp-team/fix-frontmatter-misdetection

Fix misdetection of front-matter in code block

CHANGELOG.md

@@ -10,6 +10,10 @@
 
 - Simplify Marp integration by using independent instance ([#17](https://github.com/marp-team/marp-vscode/pull/17))
 
+### Fixed
+
+- Fix misdetection of front-matter in code block ([#18](https://github.com/marp-team/marp-vscode/pull/18))
+
 ## v0.0.6 - 2019-03-19
 
 ### Added

src/extension.test.ts

@@ -39,19 +39,24 @@ describe('#extendMarkdownIt', () => {
   const marpMd = (md: string) => `---\nmarp: true\n---\n\n${md}`
 
   describe('Marp Core', () => {
-    const markdown = '# Hello :wave:\n\n<!-- header: Hi -->'
+    const baseMd = '# Hello :wave:\n\n<!-- header: Hi -->'
 
-    it('uses default engine without marp front-matter', () => {
-      const html = extendMarkdownIt(new markdownIt()).render(markdown)
+    it('uses default engine when not enabled marp front-matter', () => {
+      const confusingMd =
+        '---\nmarp: false\n---\n\n```markdown\n---\nmarp: true\n---\n```'
 
-      expect(html).not.toContain('<div id="marp-vscode">')
-      expect(html).not.toContain('<style id="marp-vscode-style">')
-      expect(html).not.toContain('svg')
-      expect(html).not.toContain('img')
+      for (const markdown of [baseMd, confusingMd]) {
+        const html = extendMarkdownIt(new markdownIt()).render(markdown)
+
+        expect(html).not.toContain('<div id="marp-vscode">')
+        expect(html).not.toContain('<style id="marp-vscode-style">')
+        expect(html).not.toContain('svg')
+        expect(html).not.toContain('img')
+      }
     })
 
-    it('uses Marp engine with marp front-matter', () => {
-      const html = extendMarkdownIt(new markdownIt()).render(marpMd(markdown))
+    it('uses Marp engine when enabled marp front-matter', () => {
+      const html = extendMarkdownIt(new markdownIt()).render(marpMd(baseMd))
 
       expect(html).toContain('<div id="marp-vscode">')
       expect(html).toContain('<style id="marp-vscode-style">')

src/extension.ts

@@ -1,24 +1,25 @@
 import { Marp } from '@marp-team/marp-core'
-import { ExtensionContext, workspace } from 'vscode'
+import { workspace } from 'vscode'
 
-const frontMatterRegex = /^---\s*([^]*)?(?:-{3}|\.{3})\s*/
+const frontMatterRegex = /^-{3,}\s*([^]*?)^\s*-{3}/m
 const marpDirectiveRegex = /^marp\s*:\s*true\s*$/m
 const marpConfiguration = () => workspace.getConfiguration('markdown.marp')
 const marpVscode = Symbol('marp-vscode')
 
+const detectMarpFromFrontMatter = (markdown: string): boolean => {
+  const m = markdown.match(frontMatterRegex)
+  return !!(m && m.index === 0 && marpDirectiveRegex.exec(m[0].trim()))
+}
+
 export function extendMarkdownIt(md: any) {
   const { parse, renderer } = md
   const { render } = renderer
 
   md[marpVscode] = false
   md.parse = (markdown: string, env: any) => {
-    // Detect `marp: true` front-matter option
-    const fmMatch = frontMatterRegex.exec(markdown)
-    const enabled = !!(fmMatch && marpDirectiveRegex.exec(fmMatch[1].trim()))
-
     // Generate tokens by Marp if enabled
     md[marpVscode] =
-      enabled &&
+      detectMarpFromFrontMatter(markdown) &&
       new Marp({
         container: { tag: 'div', id: 'marp-vscode' },
         html: marpConfiguration().get<boolean>('enableHtml') || undefined,