Start code span highlighting implementation

Author: andrewbranch

src/createCodeBlockRegistry.js renamed to src/createCodeNodeRegistry.js

@@ -6,10 +6,10 @@ const { declaration } = require('./renderers/css');
 
 /**
  * @template TKey
- * @param {CodeBlockRegistryOptions=} options
- * @returns {CodeBlockRegistry<TKey>}
+ * @param {CodeNodeRegistryOptions=} options
+ * @returns {CodeNodeRegistry<TKey>}
  */
-function createCodeBlockRegistry({ prefixAllClassNames } = {}) {
+function createCodeNodeRegistry({ prefixAllClassNames } = {}) {
   /** @type {Map<TKey, RegisteredCodeBlockData & { index: number }>} */
   const nodeMap = new Map();
   /** @type {ConditionalTheme[]} */
@@ -81,7 +81,7 @@ function createCodeBlockRegistry({ prefixAllClassNames } = {}) {
     forEachCodeBlock: nodeMap.forEach.bind(nodeMap),
     getAllPossibleThemes: () => themes.map(theme => ({ theme, settings: themeColors.get(theme.identifier).settings })),
     getTokenStylesForTheme: themeIdentifier => {
-      /** @type {ReturnType<CodeBlockRegistry['getTokenStylesForTheme']>} */
+      /** @type {ReturnType<CodeNodeRegistry['getTokenStylesForTheme']>} */
       const result = [];
       const colors = themeColors.get(themeIdentifier);
       const classNameMap = themeTokenClassNameMap && themeTokenClassNameMap.get(themeIdentifier);
@@ -202,4 +202,4 @@ function getColorFromColorMap(colorMap, canonicalClassName) {
   return colorMap[index];
 }
 
-module.exports = createCodeBlockRegistry;
+module.exports = createCodeNodeRegistry;

src/getPossibleThemes.js

@@ -7,38 +7,25 @@ const {
 } = require('./themeUtils');
 
 /**
- * @param {ThemeOption} themeOption
+ * @template {CodeBlockData | CodeSpanData} T
+ * @param {ThemeOption<T>} themeOption
  * @param {ThemeCache} themeCache
  * @param {string | undefined} contextDirectory
- * @param {MarkdownNode} markdownNode
- * @param {MDASTNode} codeFenceNode
- * @param {string} languageName
- * @param {object} meta
+ * @param {T} codeNodeData
  * @returns {Promise<ConditionalTheme[]>}
  */
 async function getPossibleThemes(
   themeOption,
   themeCache,
   contextDirectory,
-  markdownNode,
-  codeFenceNode,
-  languageName,
-  meta
+  codeNodeData
 ) {
   if (typeof themeOption === 'function') {
     return getPossibleThemes(
-      themeOption({
-        markdownNode,
-        codeFenceNode,
-        language: languageName,
-        parsedOptions: meta
-      }),
+      themeOption(codeNodeData),
       themeCache,
       contextDirectory,
-      markdownNode,
-      codeFenceNode,
-      languageName,
-      meta
+      codeNodeData
     );
   }
 
@@ -53,10 +40,7 @@ async function getPossibleThemes(
       themeOption.default,
       themeCache,
       contextDirectory,
-      markdownNode,
-      codeFenceNode,
-      languageName,
-      meta
+      codeNodeData
     );
   }
   if (themeOption.dark) {

src/graphql/getCodeBlockDataFromRegistry.js

@@ -6,7 +6,7 @@ const { createTokenElement, createLineElement, createCodeBlockElement } = requir
 
 /**
  * @template TKey
- * @param {CodeBlockRegistry<TKey>} registry
+ * @param {CodeNodeRegistry<TKey>} registry
  * @param {TKey} key
  * @param {RegisteredCodeBlockData} codeBlock
  * @param {() => string} getWrapperClassName

src/graphql/highlight.js

@@ -40,7 +40,7 @@ async function highlight(args, pluginOptions, { cache, createNodeId }) {
   const grammarCache = await cache.get('grammars');
   const possibleThemes = await getThemes(theme, args, themeCache);
   const scope = getScope(args.language, grammarCache, languageAliases);
-  /** @type {CodeBlockRegistry<typeof registryKey>} */
+  /** @type {CodeNodeRegistry<typeof registryKey>} */
   const codeBlockRegistry = createCodeBlockRegistry({ prefixAllClassNames: true });
   const meta = parseCodeFenceHeader(args.language, args.meta);
 

src/graphql/schema.d.ts

@@ -48,6 +48,16 @@ declare namespace grvsc {
             additionalThemes: GRVSCTheme[];
             tokenizedLines?: GRVSCTokenizedLine[];
         }
+        interface GRVSCCodeSpan extends Node {
+            index: number;
+            html: string;
+            text: string;
+            className: string;
+            language?: string;
+            defaultTheme: GRVSCTheme;
+            additionalThemes: GRVSCTheme[];
+            tokens: GRVSCToken[];
+        }
         interface GRVSCStylesheet extends Node {
             css: string;
         }

src/graphql/schema.graphql

@@ -51,6 +51,16 @@ type GRVSCCodeBlock implements Node {
   additionalThemes: [GRVSCTheme!]!
   tokenizedLines: [GRVSCTokenizedLine!]
 }
+type GRVSCCodeSpan implements Node {
+  index: Int!
+  html: String!
+  text: String!
+  className: String!
+  language: String
+  defaultTheme: GRVSCTheme!
+  additionalThemes: [GRVSCTheme!]!
+  tokens: [GRVSCToken!]!
+}
 type GRVSCStylesheet implements Node {
   css: String!
 }

src/index.js

@@ -5,12 +5,13 @@ const logger = require('loglevel');
 const visit = require('unist-util-visit');
 const setup = require('./setup');
 const createGetRegistry = require('./createGetRegistry');
-const registerCodeBlock = require('./registerCodeBlock');
 const getPossibleThemes = require('./getPossibleThemes');
-const createCodeBlockRegistry = require('./createCodeBlockRegistry');
-const parseCodeFenceHeader = require('./parseCodeFenceHeader');
+const createCodeNodeRegistry = require('./createCodeNodeRegistry');
+const parseCodeFenceInfo = require('./parseCodeFenceInfo');
+const parseCodeSpanInfo = require('./parseCodeSpanInfo');
 const createSchemaCustomization = require('./graphql/createSchemaCustomization');
 const getCodeBlockGraphQLDataFromRegistry = require('./graphql/getCodeBlockDataFromRegistry');
+const { registerCodeBlock, registerCodeSpan } = require('./registerCodeNode');
 const { createHash } = require('crypto');
 const { setChildNodes } = require('./cacheUtils');
 const { getScope } = require('./storeUtils');
@@ -38,6 +39,7 @@ function createPlugin() {
       replaceColor,
       logLevel,
       getLineTransformers,
+      inlineCode,
       ...rest
     } = await once(() => setup(options, cache), 'setup');
 
@@ -51,16 +53,17 @@ function createPlugin() {
         injectStyles,
         replaceColor,
         logLevel,
+        inlineCode,
         ...rest
       },
       cache
     );
 
     // 1. Gather all code fence nodes from Markdown AST.
 
-    /** @type {MDASTNode[]} */
+    /** @type {(MDASTNode<'code'> | MDASTNode<'inlineCode'>)[]} */
     const nodes = [];
-    visit(markdownAST, 'code', node => {
+    visit(markdownAST, ({ type }) => type === 'code' || type === 'inlineCode', node => {
       nodes.push(node);
     });
 
@@ -70,13 +73,20 @@ function createPlugin() {
 
     /** @type {grvsc.gql.GRVSCCodeBlock[]} */
     const graphQLNodes = [];
-    /** @type {CodeBlockRegistry<MDASTNode>} */
-    const codeBlockRegistry = createCodeBlockRegistry();
+    /** @type {CodeNodeRegistry<MDASTNode>} */
+    const codeNodeRegistry = createCodeNodeRegistry();
     for (const node of nodes) {
       /** @type {string} */
       const text = node.value || (node.children && node.children[0] && node.children[0].value);
       if (!text) continue;
-      const { languageName, meta } = parseCodeFenceHeader(node.lang ? node.lang.toLowerCase() : '', node.meta);
+      const { languageName, meta, text: parsedText = text } = node.type === 'code'
+        ? parseCodeFenceInfo(node.lang ? node.lang.toLowerCase() : '', node.meta)
+        : parseCodeSpanInfo(text, inlineCode.marker);
+
+      if (node.type === 'inlineCode' && !languageName) {
+        continue;
+      }
+
       const grammarCache = await cache.get('grammars');
       const scope = getScope(languageName, grammarCache, languageAliases);
       if (!scope && languageName) {
@@ -87,39 +97,55 @@ function createPlugin() {
         );
       }
 
+      const nodeData = /** @type {CodeBlockData | CodeSpanData} */ ({
+        node,
+        markdownNode,
+        language: languageName
+      });
+
       const possibleThemes = await getPossibleThemes(
-        theme,
+        node.type === 'inlineCode' ? inlineCode.theme || theme : theme,
         await cache.get('themes'),
         // Node could be sourced from something other than a File node
         markdownNode.fileAbsolutePath ? path.dirname(markdownNode.fileAbsolutePath) : undefined,
-        markdownNode,
-        node,
-        languageName,
-        meta
+        nodeData
       );
 
-      await registerCodeBlock(
-        codeBlockRegistry,
-        node,
-        possibleThemes,
-        () => getRegistry(cache, scope),
-        lineTransformers,
-        scope,
-        text,
-        languageName,
-        meta,
-        cache
-      );
+      if (node.type === 'inlineCode') {
+        await registerCodeSpan(
+          codeNodeRegistry,
+          node,
+          possibleThemes,
+          () => getRegistry(cache, scope),
+          scope,
+          parsedText,
+          languageName,
+          cache
+        );
+      } else {
+        await registerCodeBlock(
+          codeNodeRegistry,
+          node,
+          possibleThemes,
+          () => getRegistry(cache, scope),
+          lineTransformers,
+          scope,
+          parsedText,
+          languageName,
+          meta,
+          cache
+        );
+      }
     }
 
     // 3. For each code block registered, convert its tokenization and theme data
     //    to a GraphQL-compatible representation, including HTML renderings. At the same
     //    time, change the original code fence Markdown node to an HTML node and set
     //    its value to the HTML rendering contained in the GraphQL node.
 
-    codeBlockRegistry.forEachCodeBlock((codeBlock, node) => {
+    codeNodeRegistry.forEachCodeBlock((codeBlock, node) => {
       const graphQLNode = getCodeBlockGraphQLDataFromRegistry(
-        codeBlockRegistry,
+        codeNodeRegistry,
         node,
         codeBlock,
         getWrapperClassName,
@@ -148,6 +174,7 @@ function createPlugin() {
           ? wrapperClassName({
               language: codeBlock.languageName,
               markdownNode,
+              node,
               codeFenceNode: node,
               parsedOptions: codeBlock.meta
             })
@@ -159,8 +186,8 @@ function createPlugin() {
     //    then append that CSS to the Markdown AST in an HTML node.
 
     const styleElement = createStyleElement(
-      codeBlockRegistry.getAllPossibleThemes(),
-      codeBlockRegistry.getTokenStylesForTheme,
+      codeNodeRegistry.getAllPossibleThemes(),
+      codeNodeRegistry.getTokenStylesForTheme,
       replaceColor,
       injectStyles ? styles : undefined
     );

src/parseCodeFenceHeader.js renamed to src/parseCodeFenceInfo.js

@@ -17,7 +17,7 @@ function test(input, pattern) {
  * @param {string} lang
  * @param {string=} metaString
  */
-function parseCodeFenceHeader(lang, metaString) {
+function parseCodeFenceInfo(lang, metaString) {
   let pos = 0;
   let meta = {};
   let languageName = '';
@@ -170,4 +170,4 @@ function parseCodeFenceHeader(lang, metaString) {
   }
 }
 
-module.exports = parseCodeFenceHeader;
+module.exports = parseCodeFenceInfo;

src/parseCodeSpanInfo.js

@@ -0,0 +1,14 @@
+/**
+ * @param {string} text
+ * @param {string} delimiter
+ * @returns {{ languageName: string | undefined, meta: undefined, text: string }}
+ */
+function parseCodeSpanInfo(text, delimiter) {
+  const index = text.indexOf(delimiter);
+  if (index <= 0) return { languageName: undefined, meta: undefined, text };
+  const languageName = text.slice(0, index).trim().toLowerCase();
+  if (!languageName) return { languageName: undefined, meta: undefined, text };
+  return { languageName, meta: undefined, text: text.slice(index + delimiter.length) };
+}
+
+module.exports = parseCodeSpanInfo;

src/registerCodeBlock.js renamed to src/registerCodeNode.js

@@ -4,7 +4,7 @@ const { getGrammar } = require('./storeUtils');
 
 /**
  * @template TKey
- * @param {CodeBlockRegistry<TKey>} codeBlockRegistry
+ * @param {CodeNodeRegistry<TKey>} codeBlockRegistry
  * @param {TKey} registryKey
  * @param {ConditionalTheme[]} possibleThemes
  * @param {() => Promise<[import('vscode-textmate').Registry, () => void]>} getTextMateRegistry
@@ -57,4 +57,46 @@ async function registerCodeBlock(
   }
 }
 
-module.exports = registerCodeBlock;
+/**
+ * @template TKey
+ * @param {CodeNodeRegistry<TKey>} codeBlockRegistry
+ * @param {TKey} registryKey
+ * @param {ConditionalTheme[]} possibleThemes
+ * @param {() => Promise<[import('vscode-textmate').Registry, () => void]>} getTextMateRegistry
+ * @param {string} scope
+ * @param {string} text
+ * @param {string | undefined} languageName
+ * @param {GatsbyCache} cache
+ */
+async function registerCodeSpan(
+  codeBlockRegistry,
+  registryKey,
+  possibleThemes,
+  getTextMateRegistry,
+  scope,
+  text,
+  languageName,
+  cache
+) {
+  const grammarCache = await cache.get('grammars');
+  const [registry, unlockRegistry] = await getTextMateRegistry();
+  try {
+    /** @type {Line[]} */
+    const lines = [{ text, data: {}, attrs: {} }];
+    const { tokenTypes, languageId } = getGrammar(scope, grammarCache);
+    const grammar = await registry.loadGrammarWithConfiguration(scope, languageId, { tokenTypes });
+    codeBlockRegistry.register(registryKey, {
+      lines,
+      text,
+      meta: {},
+      languageName,
+      possibleThemes,
+      isTokenized: true,
+      tokenizationResults: possibleThemes.map(theme => tokenizeWithTheme(lines, theme, grammar, registry))
+    });
+  } finally {
+    unlockRegistry();
+  }
+}
+
+module.exports = { registerCodeBlock, registerCodeSpan };