Merge pull request #104 from marp-team/dollar-prefixed-global-directives

Add dollarPrefixForGlobalDirectives option

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - Add `minifyCSS` option ([#103](https://github.com/marp-team/marp-core/pull/103))
+- Add `dollarPrefixForGlobalDirectives` option _(not for users)_ ([#104](https://github.com/marp-team/marp-core/pull/104))
 
 ### Changed
 

src/dollar/dollar.ts

@@ -0,0 +1,11 @@
+import marpitPlugin from '@marp-team/marpit/lib/markdown/marpit_plugin'
+import { Marp } from '../marp'
+
+// TODO: Remove dollar prefix support after making be known deprecation to user of GUI tools like Marp for VS Code
+export const markdown = marpitPlugin(({ marpit: marp }: { marpit: Marp }) => {
+  if (!marp.options.dollarPrefixForGlobalDirectives) return
+
+  marp.customDirectives.global.$theme = v => ({ theme: v })
+  marp.customDirectives.global.$style = v => ({ style: v })
+  marp.customDirectives.global.$headingDivider = v => ({ headingDivider: v })
+})

src/marp.ts

@@ -6,6 +6,7 @@ import postcssMinifySelectors from 'postcss-minify-selectors'
 import postcssNormalizeWhitespace from 'postcss-normalize-whitespace'
 import { version } from 'katex/package.json'
 import browser from './browser'
+import * as dollarPlugin from './dollar/dollar'
 import * as emojiPlugin from './emoji/emoji'
 import * as fittingPlugin from './fitting/fitting'
 import * as htmlPlugin from './html/html'
@@ -27,6 +28,9 @@ export interface MarpOptions extends MarpitOptions {
   markdown?: object
   math?: mathPlugin.MathOptions
   minifyCSS?: boolean
+
+  /** @deprecated Dollar prefix for global directives is removed feature in Marpit framework, and Marp Core does not recommend too. Please use only for keeping compatibility in limited cases. */
+  dollarPrefixForGlobalDirectives?: boolean
 }
 
 const marpObservedSymbol = Symbol('marpObserved')
@@ -47,12 +51,13 @@ export class Marp extends Marpit {
   }
 
   constructor(opts: MarpOptions = {}) {
-    super(<MarpOptions>{
+    super({
       inlineSVG: true,
       looseYAML: true,
       math: true,
       minifyCSS: true,
       html: Marp.html,
+      dollarPrefixForGlobalDirectives: false,
       ...opts,
       markdown: [
         'commonmark',
@@ -70,7 +75,7 @@ export class Marp extends Marpit {
         unicode: 'twemoji',
         ...(opts.emoji || {}),
       },
-    })
+    } as MarpOptions)
 
     this.markdown.enable(['table', 'linkify'])
 
@@ -93,6 +98,7 @@ export class Marp extends Marpit {
       .use(mathPlugin.markdown, flag => (this.renderedMath = flag))
       .use(fittingPlugin.markdown)
       .use(sizePlugin.markdown)
+      .use(dollarPlugin.markdown)
   }
 
   highlighter(code: string, lang: string): string {

test/marp.ts

@@ -596,6 +596,52 @@ describe('Marp', () => {
     })
   })
 
+  describe('dollarPrefixForGlobalDirectives option', () => {
+    it('cannot use dollar prefix for global directives by default', () => {
+      const instance = marp({ minifyCSS: false })
+
+      // $theme
+      expect(instance.render('<!-- $theme: gaia -->').css).not.toContain(
+        '@theme gaia'
+      )
+
+      // $style
+      expect(
+        instance.render('<!-- $style: "h6 { color: orange }" -->').css
+      ).not.toContain('color: orange')
+
+      // $headingDivider
+      expect(
+        instance.render('<!-- $headingDivider: 1 -->\n\n# 1\n# 2', {
+          htmlAsArray: true,
+        }).html
+      ).toHaveLength(1)
+    })
+
+    context('with true', () => {
+      it('can use dollar prefix as aliases for global directives', () => {
+        const instance = marp({
+          dollarPrefixForGlobalDirectives: true,
+          minifyCSS: false,
+        })
+
+        expect(instance.render('<!-- $theme: gaia -->').css).toContain(
+          '@theme gaia'
+        )
+
+        expect(
+          instance.render('<!-- $style: "h6 { color: orange }" -->').css
+        ).toContain('color: orange')
+
+        expect(
+          instance.render('<!-- $headingDivider: 1 -->\n\n# 1\n# 2', {
+            htmlAsArray: true,
+          }).html
+        ).toHaveLength(2)
+      })
+    })
+  })
+
   describe('size global directive', () => {
     it('defines size custom global directive', () =>
       expect(marp().customDirectives.global.size).toBeTruthy())