feat: refactor rehype-starry-night plugin

package.json

@@ -19,22 +19,22 @@
 	"homepage": "https://github.com/Microflash/rehype-starry-night#readme",
 	"author": "Naiyer Asif (https://www.naiyerasif.com)",
 	"type": "module",
-	"main": "src/index.js",
+	"main": "src/rehype-starry-night/index.js",
 	"exports": {
-		".": "./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",
+		".": "./src/rehype-starry-night/index.js",
+		"./header-caption-extension": "./src/rehype-starry-night/hast-util-starry-night-header-caption-extension.js",
+		"./header-language-extension": "./src/rehype-starry-night/hast-util-starry-night-header-language-extension.js",
 		"./remark-inline-code-lang": "./src/remark-inline-code-lang/index.js",
-		"./rehype-starry-night-inline": "./src/rehype-starry-night-inline/index.js"
+		"./rehype-starry-night-inline": "./src/rehype-starry-night-inline/index.js",
+		"./css": "./src/index.css"
 	},
 	"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/rehype-starry-night/index.js",
+		"src/rehype-starry-night/hast-util-starry-night-gutter.js",
+		"src/rehype-starry-night/hast-util-starry-night-header.js",
+		"src/rehype-starry-night/hast-util-starry-night-header-caption-extension.js",
+		"src/rehype-starry-night/hast-util-starry-night-header-language-extension.js",
 		"src/remark-inline-code-lang/index.js",
 		"src/rehype-starry-night-inline/index.js"
 	],
@@ -50,6 +50,7 @@
 		"unist-util-visit": "^5.0.0"
 	},
 	"devDependencies": {
+		"cheerio": "1.0.0-rc.12",
 		"rehype-stringify": "^10.0.0",
 		"remark-directive": "^3.0.0",
 		"remark-parse": "^11.0.0",

src/index.css

@@ -101,7 +101,7 @@
 	min-height: 1em;
 }
 
-code[data-code-lang] {
+code.hl-inline {
 	--hlBackgroundColorInline: var(--highlight-background-color-inline, hsl(208, 21%, 14%));
 
 	font-family: var(--highlight-font-mono);

src/hast-util-starry-night-header-caption-extension.js → src/rehype-starry-night/hast-util-starry-night-header-caption-extension.js

@@ -1,16 +1,16 @@
-export default function starryNightHeaderCaptionExtension({ metadata }, children) {
-	const caption = metadata["caption"]
+export default function starryNightHeaderCaptionExtension({ metadata, classNamePrefix }, children) {
+	const caption = metadata["caption"];
 	if (caption) {
 		children.push({
 			type: "element",
 			tagName: "div",
-			properties: { className: ["highlight-caption"] },
+			properties: { className: [`${classNamePrefix}-caption`] },
 			children: [
 				{
 					type: "text",
 					value: caption
 				}
 			]
-		})
+		});
 	}
 }

src/hast-util-starry-night-header-language-extension.js → src/rehype-starry-night/hast-util-starry-night-header-language-extension.js

@@ -1,15 +1,15 @@
-export default function starryNightHeaderLanguageExtension({ language }, children) {
+export default function starryNightHeaderLanguageExtension({ language, classNamePrefix }, children) {
 	if (language) {
 		children.push({
 			type: "element",
 			tagName: "div",
-			properties: { className: ["highlight-language"] },
+			properties: { className: [`${classNamePrefix}-language`] },
 			children: [
 				{
 					type: "text",
 					value: language
 				}
 			]
-		})
+		});
 	}
 }

src/hast-util-starry-night-header.js → src/rehype-starry-night/hast-util-starry-night-header.js

@@ -1,13 +1,13 @@
 export default function starryNightHeader(headerOptions) {
-	const children = []
-	const extensions = headerOptions.extensions
+	const children = [];
+	const { extensions, classNamePrefix } = headerOptions;
 
-	extensions.forEach(extension => extension(headerOptions, children))
+	extensions.forEach(extension => extension(headerOptions, children));
 
 	return {
 		type: "element",
 		tagName: "div",
-		properties: { className: ["highlight-header"] },
+		properties: { className: [`${classNamePrefix}-header`] },
 		children
-	}
+	};
 }

src/index.js → src/rehype-starry-night/index.js

@@ -1,3 +1,4 @@
+import defu from "defu";
 import { createStarryNight, all } from "@wooorm/starry-night";
 import { visit } from "unist-util-visit";
 import { toString } from "hast-util-to-string";
@@ -9,6 +10,9 @@ import starryNightGutter, { search } from "./hast-util-starry-night-gutter.js";
 
 const fenceparser = new FenceParser();
 const prefix = "language-";
+const defaults = {
+	classNamePrefix: "hl"
+};
 
 function extractMetadata(node) {
 	let metadata;
@@ -22,7 +26,15 @@ function extractMetadata(node) {
 }
 
 export default function rehypeStarryNight(userOptions = {}) {
-	const { aliases = {}, grammars = all, headerExtensions = [ starryNightHeaderLanguageExtension, starryNightHeaderCaptionExtension ] } = userOptions;
+	const {
+		aliases = {},
+		grammars = all,
+		headerExtensions = [
+			starryNightHeaderLanguageExtension,
+			starryNightHeaderCaptionExtension
+		],
+		classNamePrefix
+	} = defu(userOptions, defaults);
 	const starryNightPromise = createStarryNight(grammars);
 
 	return async function (tree) {
@@ -68,14 +80,15 @@ export default function rehypeStarryNight(userOptions = {}) {
 				id: btoa(Math.random()).replace(/=/g, "").substring(0, 12),
 				language: languageFragment,
 				metadata: metadata,
-				extensions: headerExtensions
+				extensions: headerExtensions,
+				classNamePrefix
 			};
 
 			parent.children.splice(index, 1, {
 				type: "element",
 				tagName: "div",
 				properties: {
-					className: ["highlight", "highlight-" + languageId]
+					className: [classNamePrefix, `${classNamePrefix}-${languageId}`]
 				},
 				children: [
 					starryNightHeader(headerOptions),