Fix highlight-directive-comments language matching

Author: andrewbranch

src/graphql/highlight.js

@@ -25,13 +25,16 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
     ...rest
   } = await plugin.once(() => setup(pluginOptions, cache));
 
-  const lineTransformers = getLineTransformers({
-    theme,
-    languageAliases,
-    getLineClassName,
-    wrapperClassName,
-    ...rest
-  });
+  const lineTransformers = await getLineTransformers(
+    {
+      theme,
+      languageAliases,
+      getLineClassName,
+      wrapperClassName,
+      ...rest
+    },
+    cache
+  );
 
   const themeCache = await cache.get('themes');
   const grammarCache = await cache.get('grammars');

src/index.js

@@ -41,17 +41,20 @@ function createPlugin() {
       ...rest
     } = await once(() => setup(options, cache), 'setup');
 
-    const lineTransformers = getLineTransformers({
-      theme,
-      wrapperClassName,
-      languageAliases,
-      extensions,
-      getLineClassName,
-      injectStyles,
-      replaceColor,
-      logLevel,
-      ...rest
-    });
+    const lineTransformers = await getLineTransformers(
+      {
+        theme,
+        wrapperClassName,
+        languageAliases,
+        extensions,
+        getLineClassName,
+        injectStyles,
+        replaceColor,
+        logLevel,
+        ...rest
+      },
+      cache
+    );
 
     // 1. Gather all code fence nodes from Markdown AST.
 

src/transformers/highlightDirectiveLineTransformer.js

@@ -1,23 +1,45 @@
 // @ts-check
 const { highlightLine } = require('./transformerUtils');
+const { getScope } = require('../storeUtils');
 
 /**
  * @param {string} language
- * @param {object} languageCommentMap
+ * @param {string} scope
+ * @param {Record<string, (message: string) => string>} languageCommentMap
  * @return {(commentMessage: string) => string} curried function taking a string argument and
  *   prefixing/wrapping that with a language's comment syntax
  */
-const getCommentForLanguage = (language, languageCommentMap) => message => {
+const getCommentForLanguage = (language, scope, languageCommentMap) => message => {
   // example: languageCommentMap = {js: str => `// ${str}`}
-  if (languageCommentMap[language]) return languageCommentMap[language](message);
-  if (['js', 'ts', 'php', 'swift', 'c#', 'go', 'java', 'jsonc'].includes(language)) return `// ${message}`;
-  if (['python', 'ruby', 'shell', 'perl', 'coffee', 'yaml'].includes(language)) return `# ${message}`;
-  if (['css', 'c', 'cpp', 'objc', 'less'].includes(language)) return `/* ${message} */`;
-  if (['html', 'xml', 'markdown'].includes(language)) return `<!-- ${message} -->`;
-  if (['clojure'].includes(language)) return `; ${message}`;
-  if (['sql'].includes(language)) return `-- ${message}`;
-  if (['fortran'].includes(language)) return `! ${message}`;
-  return `// ${message}`;
+  if (languageCommentMap[language]) {
+    return languageCommentMap[language](message);
+  }
+
+  switch (scope) {
+    case 'source.python':
+    case 'source.ruby':
+    case 'source.shell':
+    case 'source.perl':
+    case 'source.coffee':
+    case 'source.yaml':
+      return `# ${message}`;
+    case 'source.css':
+    case 'source.c':
+    case 'source.cpp':
+    case 'source.objc':
+    case 'source.css.less':
+      return `/* ${message} */`;
+    case 'text.html.derivative':
+    case 'text.xml':
+    case 'text.html.markdown':
+      return `<!-- ${message} -->`;
+    case 'source.clojure':
+      return `; ${message}`;
+    case 'source.sql':
+      return `-- ${message}`;
+    default:
+      return `// ${message}`;
+  }
 };
 
 /**
@@ -30,12 +52,15 @@ const textIsHighlightDirective = (text, commentWrapper) => directive =>
   ['// ' + directive, commentWrapper(directive)].includes(text.trim());
 
 /**
- * @param {object} languageCommentMap user-defined object mapping language keys to commenting functions
+ * @param {Record<string, (message: string) => string>} languageCommentMap user-defined object mapping language keys to commenting functions
+ * @param {Record<string, string>} languageAliases
+ * @param {*} grammarCache
  */
-function createHighlightDirectiveLineTransformer(languageCommentMap) {
+function createHighlightDirectiveLineTransformer(languageCommentMap, languageAliases, grammarCache) {
   /** @type {LineTransformer<HighlightCommentTransfomerState>} */
   const transformer = ({ line, language, state }) => {
-    const commentWrapper = getCommentForLanguage(language, languageCommentMap);
+    const scope = getScope(language, grammarCache, languageAliases);
+    const commentWrapper = getCommentForLanguage(language, scope, languageCommentMap);
     const isDirective = textIsHighlightDirective(line.text, commentWrapper);
     if (isDirective('highlight-start')) {
       return { state: { inHighlightRange: true } }; // no `line` - drop this line from output

src/transformers/index.js

@@ -4,17 +4,30 @@ const { createHighlightDirectiveLineTransformer } = require('./highlightDirectiv
 const getTransformedLines = require('./getTransformedLines');
 
 /**
- * @returns {LineTransformer[]}
+ * @param {PluginOptions} pluginOptions
+ * @param {GatsbyCache} cache
+ * @returns {Promise<LineTransformer[]>}
  */
-function getDefaultLineTransformers() {
-  return [createHighlightDirectiveLineTransformer({}), highlightMetaTransformer];
+async function getDefaultLineTransformers(pluginOptions, cache) {
+  return [
+    createHighlightDirectiveLineTransformer({}, pluginOptions.languageAliases, await cache.get('grammars')),
+    highlightMetaTransformer
+  ];
 }
 
 /**
  * @param {...LineTransformer} transformers
  */
 function addLineTransformers(...transformers) {
-  return () => [...transformers, ...getDefaultLineTransformers()];
+  return getLineTransformers;
+
+  /**
+   * @param {PluginOptions} pluginOptions
+   * @param {GatsbyCache} cache
+   */
+  async function getLineTransformers(pluginOptions, cache) {
+    return [...transformers, ...(await getDefaultLineTransformers(pluginOptions, cache))];
+  }
 }
 
 module.exports = { getDefaultLineTransformers, addLineTransformers, getTransformedLines };

src/types.d.ts

@@ -63,7 +63,7 @@ interface PluginOptions {
   replaceColor?: (colorValue: string, theme: string) => string;
   logLevel?: 'trace' | 'debug' | 'info' | 'warn' | 'error';
   host?: Host;
-  getLineTransformers?: (pluginOptions: PluginOptions) => LineTransformer[];
+  getLineTransformers?: (pluginOptions: PluginOptions, cache: GatsbyCache) => LineTransformer[] | Promise<LineTransformer[]>;
 }
 
 interface GatsbyCache {

test/integration/baselines/highlight-directive-comments.html

@@ -1,9 +1,9 @@
 <pre class="grvsc-container default-dark" data-language="ts" data-index="0"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk4">const</span><span class="mtk1"> </span><span class="mtk12">x</span><span class="mtk1"> = </span><span class="mtk7">0</span><span class="mtk1">;</span></span>
 <span class="grvsc-line grvsc-line-highlighted"><span class="mtk4">const</span><span class="mtk1"> </span><span class="mtk12">y</span><span class="mtk1"> = </span><span class="mtk7">1</span><span class="mtk1">; </span></span>
 <span class="grvsc-line"><span class="mtk4">const</span><span class="mtk1"> </span><span class="mtk12">z</span><span class="mtk1"> = </span><span class="mtk7">2</span><span class="mtk1">;</span></span></code></pre>
-<pre class="grvsc-container default-dark" data-language="shell" data-index="1"><code class="grvsc-code"><span class="grvsc-line">npm install</span>
-<span class="grvsc-line grvsc-line-highlighted">npm run build </span>
-<span class="grvsc-line">npm start</span></code></pre>
+<pre class="grvsc-container default-dark" data-language="sh" data-index="1"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk1">npm install</span></span>
+<span class="grvsc-line grvsc-line-highlighted"><span class="mtk1">npm run build </span></span>
+<span class="grvsc-line"><span class="mtk1">npm start</span></span></code></pre>
 <pre class="grvsc-container default-dark" data-language="js" data-index="2"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk3">// This is where the interesting part is</span></span>
 <span class="grvsc-line grvsc-line-highlighted"><span class="mtk4">function</span><span class="mtk1"> </span><span class="mtk11">somethingSuperInteresting</span><span class="mtk1">() {</span></span>
 <span class="grvsc-line grvsc-line-highlighted"><span class="mtk1">  </span><span class="mtk10">console</span><span class="mtk1">.</span><span class="mtk11">log</span><span class="mtk1">(</span><span class="mtk4">this</span><span class="mtk1">);</span></span>

test/integration/cases/highlight-directive-comments/test.md

@@ -4,7 +4,7 @@ const y = 1; // highlight-line
 const z = 2;
 ```
 
-```shell
+```sh
 npm install
 npm run build # highlight-line
 npm start