How to do inlined code highlighting

[novusnota]

Is there a way to do the highlighting of inline code blocks, denoted by a single pair of backticks `` ? Couldn't find the answer here or in Expressive Code repo, so maybe someone did implement it for their docs.

For the general idea, see how Nextra, which uses Shiki for rendering code blocks and inline code, does it: https://nextra.site/docs/guide/syntax-highlighting#inlined-code

[HiDeoo]

Starlight uses Expressive Code for syntax highlighting of code blocks and to also extend formatting possibilities. For syntax highlighting of inline code expressions to be supported in Starlight, Expressive Code would need to support it. Based on this feature request, it looks like it's not something that's currently planned but you may want to check this issue for more details.

[novusnota]

Thanks for the info, I'll look into enhancing Expressive Code with inline code highlighting in the future. But for now I'm ok with my adhoc single-file rehype plugin solution below :)

[novusnota]

For the time being, I came up with an adhoc single-file rehype plugin that uses Shiki (like Expressive Code does) and highlights all inline code which uses following syntax: some code{:lang-name}. The {:lang-name} (for example, console.log(){:js}) is also seen in Nextra docs and Rehype Pretty Code (didn't take it because it would conflict with Expressive Code).

Snippet: inline-code-highlighting.js

Here's the snippet:

/**
 * @import {Root} from 'hast'
 */

import { visit } from 'unist-util-visit';
import { toString } from 'hast-util-to-string';
import {
  bundledLanguages,
  createHighlighter,
  createWasmOnigEngine,
} from 'shiki';
import fs from 'node:fs';

// Import custom grammars
const grammar_ohm = JSON.parse(fs.readFileSync(new URL('grammars/grammar-ohm.json', import.meta.url), 'utf-8'));

/**
 * Highlight inline code tags with Shiki
 *
 * @returns Transform.
 */
export default function rehypeInlineCodeHighlighting() {
  /**
   * @param {Root} tree
   * @return {undefined}
   */
  return async function(tree) {
    /** @type {{node: import('hast').Element, lang: string, code: string}[]} */
    const nodesToProcess = [];
    const theme = 'one-dark-pro'; // NOTE: change to the one you'd prefer

    visit(tree, 'element', function(node, _num, parent) {
      if (node.tagName === 'code'
        && node.children.length === 1
        && node.children[0].type === "text"
        && node.children[0].value.match(/\{:\s*[a-zA-Z0-9_\-]+\s*\}\s*$/) !== null
        && parent !== undefined
        && parent.tagName !== 'pre') {
        // Obtain the string value
        const value = toString(node);

        // Match-out the inner language string
        const lang = value.match(/\{:\s*([a-zA-Z0-9_\-]+)\s*\}\s*$/)[1];
        const code = value.match(/(.*?)\s*\{:\s*[a-zA-Z0-9_\-]+\s*\}\s*$/)[1];

        // Save them for future processing
        nodesToProcess.push({ node, lang, code });
      }
    });

    // Prepare Shiki
    const hl = await createHighlighter({
      themes: [theme],
      langs: [
        // To bundle all the languages:
        // ...Object.keys(bundledLanguages),
        
        // Or just the select few
        bundledLanguages.javascript,
        bundledLanguages.typescript,
        bundledLanguages.json,
        bundledLanguages.markdown,
        bundledLanguages.bash,
        bundledLanguages.shell,
        bundledLanguages.bat,
        bundledLanguages.batch,
        bundledLanguages.powershell,
        
        // Plus the custom ones
        grammar_ohm,
      ],
      // To be sure of the regex engine
      engine: await createWasmOnigEngine(import('shiki/wasm')),
    });

    // Apply highlighting to each target node
    for (let i = 0; i < nodesToProcess.length; i += 1) {
      const res = hl.codeToHast(nodesToProcess[i].code.trim(), {
        lang: nodesToProcess[i].lang,
        theme: theme,
        structure: 'inline',
      });
      nodesToProcess[i].node.children = res.children;
    }
    
    hl.dispose();
  }
}

Assuming that you'll have unist-util-visit and hast-util-to-string installed, you can just place the file above to the root of your Starlight project, and then utilize it in astro.config.mjs:

// Adds syntax highlighting for inline code blocks
import rehypeInlineCodeHighlighting from './inline-code-highlighting';

export default defineConfig({
  // ...
  markdown: {
    // ...
    rehypePlugins: [rehypeInlineCodeHighlighting],
    // ...
  },
  // ...
  integrations: [
    starlight({ /* ... */ }),
  ],
});

The current limitation is that there would be only one inline code highlighting theme used in both light and dark Starlight themes. If someone has any suggestions on how to implement both, please share!