feat: support highlighting inline code

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microflash/rehype-starry-night",
-	"version": "3.2.0",
+	"version": "3.5.0",
 	"description": "rehype plugin to highlight codeblocks with Starry Night ",
 	"license": "MIT",
 	"keywords": [
@@ -24,15 +24,19 @@
 		".": "./src/index.js",
 		"./css": "./src/index.css",
 		"./header-caption-extension": "./src/hast-util-starry-night-header-caption-extension.js",
-		"./header-language-extension": "./src/hast-util-starry-night-header-language-extension.js"
+		"./header-language-extension": "./src/hast-util-starry-night-header-language-extension.js",
+		"./remark-code-directive": "./src/remark-code-directive.js",
+		"./rehype-starry-night-inline": "./src/rehype-starry-night-inline.js"
 	},
 	"files": [
 		"src/index.js",
 		"src/hast-util-starry-night-gutter.js",
 		"src/hast-util-starry-night-header.js",
 		"src/hast-util-starry-night-header-caption-extension.js",
 		"src/hast-util-starry-night-header-language-extension.js",
-		"src/index.css"
+		"src/index.css",
+		"src/remark-code-directive.js",
+		"src/rehype-starry-night-inline.js"
 	],
 	"scripts": {
 		"test": "ava"
@@ -41,12 +45,14 @@
 		"@microflash/fenceparser": "^2.6.2",
 		"@wooorm/starry-night": "^3.2.0",
 		"hast-util-to-string": "^3.0.0",
+		"hastscript": "^8.0.0",
 		"unist-util-visit": "^5.0.0"
 	},
 	"devDependencies": {
 		"ava": "^6.0.1",
 		"cheerio": "1.0.0-rc.12",
 		"rehype-stringify": "^10.0.0",
+		"remark-directive": "^3.0.0",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.0.0",
 		"unified": "^11.0.4"

src/rehype-starry-night-inline.js

@@ -0,0 +1,29 @@
+import { createStarryNight, all } from "@wooorm/starry-night";
+import { visit } from "unist-util-visit";
+import { toString } from "hast-util-to-string";
+
+export default function rehypeStarryNightInline(userOptions = {}) {
+	const { aliases = {}, grammars = all } = userOptions;
+	const starryNightPromise = createStarryNight(grammars);
+
+	return async function (tree) {
+		const starryNight = await starryNightPromise;
+
+		visit(tree, "element", (node, index, parent) => {
+			const annotatedInlineCode = node.tagName === "code" && ("dataCodeLang" in node.properties);
+
+			if (!parent || index === null || node.tagName !== "code" || !annotatedInlineCode) {
+				return;
+			}
+
+			const language = node.properties["dataCodeLang"];
+			const languageId = aliases[language] || language;
+			const scope = starryNight.flagToScope(languageId);
+
+			if (scope) {
+				const fragment = starryNight.highlight(toString(node), scope);
+				node.children = fragment.children;
+			}
+		});
+	};
+}

src/remark-code-directive.js

@@ -0,0 +1,24 @@
+import { visit } from "unist-util-visit";
+import { h } from "hastscript";
+
+export default function remarkCodeDirective() {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (
+				node.type === "textDirective" ||
+				node.type === "leafDirective"
+			) {
+				if (!node.attributes["syntax"]) {
+					return false;
+				}
+
+				const { syntax, ...attribs } = node.attributes;
+				const data = node.data || (node.data = {});
+
+				const tagName = "code";
+				data.hName = tagName;
+				data.hProperties = h(tagName, { "data-code-lang": syntax, ...attribs }).properties;
+			}
+		});
+	};
+}

test/fixtures.js

@@ -144,5 +144,11 @@ output: `<div class="highlight highlight-nux"><div class="highlight-header"><div
 `,
 output: `<div class="highlight highlight-html"><div class="highlight-header"><button class="highlight-copy">Copy to clipboard</button></div><pre><code tabindex="0"><span class="line">&lt;<span class="pl-ent">mark</span>&gt;highlighted&lt;/<span class="pl-ent">mark</span>&gt;</span>
 </code></pre></div>`
+	},
+	{
+		title: "inline code",
+		input: `You can print to console like this: :code[console.log("Hello, world!");]{syntax=js}. This prints \`Hello, world!\``,
+		output: `<p>You can print to console like this: <code data-code-lang="js"><span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-s"><span class="pl-pds">"</span>Hello, world!<span class="pl-pds">"</span></span>);</code>. This prints <code>Hello, world!</code></p>`,
+		inline: true
 	}
 ]