Merge pull request #58 from mdluo/master

Change `wrapperClassName` to accept both string and function

Author: andrewbranch

README.md

@@ -57,7 +57,7 @@ Add to your `gatsby-config.js` (all options are optional; defaults shown here):
         // All options are optional. Defaults shown here.
         options: {
           colorTheme: 'Dark+ (default dark)', // Read on for list of included themes. Also accepts object and function forms.
-          wrapperClassName: '',   // Additional class put on 'pre' tag
+          wrapperClassName: '',   // Additional class put on 'pre' tag. Also accepts function to set the class dynamically.
           injectStyles: true,     // Injects (minimal) additional CSS for layout and scrolling
           extensions: [],         // Extensions to download from the marketplace to provide more languages and themes
           extensionDataDirectory: // Absolute path to the directory where extensions will be downloaded. Defaults to inside node_modules.
@@ -335,7 +335,7 @@ Line numbers and ranges aren’t the only things you can pass as options on your
     <Amazing><Stuff /></Amazing>
     ```
 
-`gatsby-remark-vscode` doesn’t inherently understand these things, but it parses the input and allows you to access it in the `colorTheme` and `getLineClassName` functions:
+`gatsby-remark-vscode` doesn’t inherently understand these things, but it parses the input and allows you to access it in the `colorTheme`, `wrapperClassName` and `getLineClassName` functions:
 
 ```js
 {
@@ -350,7 +350,8 @@ Line numbers and ranges aren’t the only things you can pass as options on your
     //   nested: { objects: 'yep' }
     // }
     return parsedOptions.theme || 'Dark+ (default dark)';
-  }
+  },
+  wrapperClassName: ({ parsedOptions, language, markdownNode, codeFenceNode }) => '';
 }
 ```
 

src/index.js

@@ -177,7 +177,17 @@ function createPlugin() {
           );
         }
 
-        const className = joinClassNames(wrapperClassName, themeClassNames, 'vscode-highlight');
+        const wrapperClassNameValue =
+          typeof wrapperClassName === 'function'
+            ? wrapperClassName({
+                language: languageName,
+                markdownNode,
+                codeFenceNode: node,
+                parsedOptions: options
+              })
+            : wrapperClassName;
+
+        const className = joinClassNames(wrapperClassNameValue, themeClassNames, 'vscode-highlight');
         node.type = 'html';
         node.value = renderHTML(
           pre(

src/types.d.ts

@@ -41,7 +41,7 @@ type ColorThemeOption = string | ColorThemeSettings | ((data: CodeFenceData) =>
 
 interface PluginOptions {
   colorTheme?: ColorThemeOption;
-  wrapperClassName?: string;
+  wrapperClassName?: string | ((data: CodeFenceData) => string);
   languageAliases?: Record<string, string>;
   extensions?: ExtensionDemand[];
   getLineClassName?: (line: LineData) => string;

test/integration/cases/code-fence-meta.expected.html

@@ -1,4 +1,5 @@
-<pre class="default-dark vscode-highlight" data-language="js"><code class="vscode-highlight-code"><span class="vscode-highlight-line vscode-highlight-line-highlighted"><span class="mtk3">// should be highlighted</span></span></code></pre>
+<pre class="test-wrapper default-dark vscode-highlight" data-language="js"><code class="vscode-highlight-code"><span class="vscode-highlight-line vscode-highlight-line-highlighted"><span class="mtk3">// should be highlighted</span></span></code></pre>
+<pre class="test-wrapper js-test default-dark vscode-highlight" data-language="js"><code class="vscode-highlight-code"><span class="vscode-highlight-line"><span class="mtk3">// should be highlighted</span></span></code></pre>
 <style class="vscode-highlight-styles">
   :root {
   --vscode-highlight-padding-v: 1rem;

test/integration/cases/code-fence-meta.js

@@ -0,0 +1,9 @@
+module.exports = {
+  wrapperClassName: ({ language, parsedOptions }) => {
+    const { wrapperClass } = parsedOptions;
+    if (wrapperClass) {
+      return `test-wrapper ${language}-${wrapperClass}`;
+    }
+    return 'test-wrapper';
+  },
+};

test/integration/cases/code-fence-meta.md

@@ -1,3 +1,7 @@
 ```js {1}
 // should be highlighted
+```
+
+```js {wrapperClass: 'test'}
+// should be highlighted
 ```