@bebeal/rehype-color-chips 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # @bebeal/rehype-color-chips
2
+
3
+ Rehype plugin that converts color codes into visual color chips in MDX documents
4
+
5
+ <img width="901" alt="Image" src="https://github.com/user-attachments/assets/cf6a0766-50d1-424e-a1d2-95c551346900" />
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ yarn add @bebeal/rehype-color-chips
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```tsx
16
+ import { rehypeColorChips } from '@bebeal/rehype-color-chips'
17
+
18
+ // In your MDX config
19
+ {
20
+ rehypePlugins: [rehypeColorChips]
21
+ }
22
+ ```
23
+
24
+ ## Usage in MDX
25
+
26
+ ```mdx
27
+ # Colors
28
+
29
+ Red: #f00
30
+
31
+ Green: #0f0
32
+
33
+ Blue: #00f
34
+ ```
35
+
36
+ Turns into:
37
+
38
+ <img width="186" alt="Image" src="https://github.com/user-attachments/assets/eb086dd7-c0d0-4793-addc-94a91ca60905" />
39
+
@@ -0,0 +1,3 @@
1
+ import { Plugin } from 'unified';
2
+ declare const rehypeColorChips: Plugin;
3
+ export default rehypeColorChips;
@@ -0,0 +1,99 @@
1
+ import { visit } from 'unist-util-visit';
2
+ // Simple regex for colors
3
+ const colorRegex = /#([0-9A-Fa-f]{3})\b|#([0-9A-Fa-f]{4})\b|#([0-9A-Fa-f]{6})\b|#([0-9A-Fa-f]{8})\b|rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)|rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*(0|1|0?\.\d+)\s*\)/g;
4
+ // Regex for escaped colors (with "\:" prefix)
5
+ const escapePrefix = "\:";
6
+ const createColorChip = (color) => ({
7
+ type: 'element',
8
+ tagName: 'span',
9
+ properties: {
10
+ style: [
11
+ 'display:inline-flex',
12
+ 'align-items:center',
13
+ 'justify-content:center',
14
+ 'white-space:nowrap',
15
+ 'font-size:inherit',
16
+ 'line-height:inherit',
17
+ 'font-family:monospace'
18
+ ].join(';')
19
+ },
20
+ children: [
21
+ {
22
+ type: 'element',
23
+ tagName: 'span',
24
+ properties: {
25
+ style: [
26
+ 'display:inline-block',
27
+ 'width:0.6em',
28
+ 'height:0.6em',
29
+ `background-color:${color}`,
30
+ 'border:0.5px solid currentColor',
31
+ 'box-shadow:inset 0 0 0 0.5px rgba(0,0,0,0.2)',
32
+ 'border-radius:0.125em',
33
+ 'margin-right:1px',
34
+ ].join(';')
35
+ },
36
+ children: []
37
+ },
38
+ {
39
+ type: 'text',
40
+ value: color
41
+ }
42
+ ]
43
+ });
44
+ const rehypeColorChips = () => {
45
+ return (tree) => {
46
+ // First pass: replace "\:" prefixes with a unique placeholder
47
+ const escapedColors = new Map();
48
+ let counter = 0;
49
+ visit(tree, 'text', (node) => {
50
+ if (!node.value)
51
+ return;
52
+ // Replace escaped colors with placeholders
53
+ node.value = node.value.replace(new RegExp(escapePrefix + '(' + colorRegex.source + ')', 'g'), (_, color) => {
54
+ const placeholder = `__ESCAPED_COLOR_${counter++}__`;
55
+ escapedColors.set(placeholder, color);
56
+ return placeholder;
57
+ });
58
+ });
59
+ // Second pass: process normal colors
60
+ visit(tree, 'text', (node, index, parent) => {
61
+ if (!parent || index === null || !node.value)
62
+ return;
63
+ const matches = Array.from(node.value.matchAll(colorRegex));
64
+ if (matches.length === 0)
65
+ return;
66
+ const result = [];
67
+ let lastIndex = 0;
68
+ matches.forEach((match) => {
69
+ const color = match[0];
70
+ const startIndex = match.index;
71
+ if (startIndex > lastIndex) {
72
+ result.push({
73
+ type: 'text',
74
+ value: node.value.slice(lastIndex, startIndex)
75
+ });
76
+ }
77
+ result.push(createColorChip(color));
78
+ lastIndex = startIndex + color.length;
79
+ });
80
+ if (lastIndex < node.value.length) {
81
+ result.push({
82
+ type: 'text',
83
+ value: node.value.slice(lastIndex)
84
+ });
85
+ }
86
+ parent.children.splice(index, 1, ...result);
87
+ return index + result.length;
88
+ });
89
+ // Third pass: restore escaped colors
90
+ visit(tree, 'text', (node) => {
91
+ if (!node.value)
92
+ return;
93
+ for (const [placeholder, color] of escapedColors.entries()) {
94
+ node.value = node.value.replace(placeholder, color);
95
+ }
96
+ });
97
+ };
98
+ };
99
+ export default rehypeColorChips;
@@ -0,0 +1 @@
1
+ {"fileNames":["../node_modules/typescript/lib/lib.es5.d.ts","../node_modules/typescript/lib/lib.es2015.d.ts","../node_modules/typescript/lib/lib.es2016.d.ts","../node_modules/typescript/lib/lib.es2017.d.ts","../node_modules/typescript/lib/lib.es2018.d.ts","../node_modules/typescript/lib/lib.es2019.d.ts","../node_modules/typescript/lib/lib.es2020.d.ts","../node_modules/typescript/lib/lib.dom.d.ts","../node_modules/typescript/lib/lib.dom.iterable.d.ts","../node_modules/typescript/lib/lib.dom.asynciterable.d.ts","../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../node_modules/typescript/lib/lib.scripthost.d.ts","../node_modules/typescript/lib/lib.es2015.core.d.ts","../node_modules/typescript/lib/lib.es2015.collection.d.ts","../node_modules/typescript/lib/lib.es2015.generator.d.ts","../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../node_modules/typescript/lib/lib.es2015.promise.d.ts","../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../node_modules/typescript/lib/lib.es2016.intl.d.ts","../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../node_modules/typescript/lib/lib.es2017.date.d.ts","../node_modules/typescript/lib/lib.es2017.object.d.ts","../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../node_modules/typescript/lib/lib.es2017.string.d.ts","../node_modules/typescript/lib/lib.es2017.intl.d.ts","../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../node_modules/typescript/lib/lib.es2018.intl.d.ts","../node_modules/typescript/lib/lib.es2018.promise.d.ts","../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../node_modules/typescript/lib/lib.es2019.array.d.ts","../node_modules/typescript/lib/lib.es2019.object.d.ts","../node_modules/typescript/lib/lib.es2019.string.d.ts","../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../node_modules/typescript/lib/lib.es2019.intl.d.ts","../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../node_modules/typescript/lib/lib.es2020.date.d.ts","../node_modules/typescript/lib/lib.es2020.promise.d.ts","../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../node_modules/typescript/lib/lib.es2020.string.d.ts","../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../node_modules/typescript/lib/lib.es2020.intl.d.ts","../node_modules/typescript/lib/lib.es2020.number.d.ts","../node_modules/typescript/lib/lib.decorators.d.ts","../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../node_modules/typescript/lib/lib.es2020.full.d.ts","../node_modules/@types/react/global.d.ts","../node_modules/csstype/index.d.ts","../node_modules/@types/react/index.d.ts","../node_modules/@types/react/jsx-runtime.d.ts","../node_modules/@types/unist/index.d.ts","../node_modules/@types/hast/index.d.ts","../node_modules/vfile-message/lib/index.d.ts","../node_modules/vfile-message/index.d.ts","../node_modules/vfile/lib/index.d.ts","../node_modules/vfile/index.d.ts","../node_modules/unified/lib/callable-instance.d.ts","../node_modules/trough/lib/index.d.ts","../node_modules/trough/index.d.ts","../node_modules/unified/lib/index.d.ts","../node_modules/unified/index.d.ts","../node_modules/unist-util-is/lib/index.d.ts","../node_modules/unist-util-is/index.d.ts","../node_modules/unist-util-visit-parents/lib/index.d.ts","../node_modules/unist-util-visit-parents/index.d.ts","../node_modules/unist-util-visit/lib/index.d.ts","../node_modules/unist-util-visit/index.d.ts","../src/index.ts","../node_modules/@types/mdx/types.d.ts","../node_modules/@types/mdx/index.d.ts"],"fileIdsList":[[56],[74,75],[52,53],[54],[63],[61,65],[56,61,62,64,66],[67],[68,69],[56,68],[68,70,71],[56,68,70],[58],[59,60],[56,59,61],[55,56,57,66,72]],"fileInfos":[{"version":"e41c290ef7dd7dab3493e6cbe5909e0148edf4a8dad0271be08edec368a0f7b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"4fd3f3422b2d2a3dfd5cdd0f387b3a8ec45f006c6ea896a4cb41264c2100bb2c","affectsGlobalScope":true,"impliedFormat":1},{"version":"69e65d976bf166ce4a9e6f6c18f94d2424bf116e90837ace179610dbccad9b42","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7a3c8b952931daebdfc7a2897c53c0a1c73624593fa070e46bd537e64dcd20a","affectsGlobalScope":true,"impliedFormat":1},{"version":"80e18897e5884b6723488d4f5652167e7bb5024f946743134ecc4aa4ee731f89","affectsGlobalScope":true,"impliedFormat":1},{"version":"cd034f499c6cdca722b60c04b5b1b78e058487a7085a8e0d6fb50809947ee573","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"62bb211266ee48b2d0edf0d8d1b191f0c24fc379a82bd4c1692a082c540bc6b1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"936e80ad36a2ee83fc3caf008e7c4c5afe45b3cf3d5c24408f039c1d47bdc1df","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"fef8cfad2e2dc5f5b3d97a6f4f2e92848eb1b88e897bb7318cef0e2820bceaab","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"f1e2a172204962276504466a6393426d2ca9c54894b1ad0a6c9dad867a65f876","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"1305d1e76ca44e30fb8b2b8075fa522b83f60c0bcf5d4326a9d2cf79b53724f8","impliedFormat":1},{"version":"36a2e4c9a67439aca5f91bb304611d5ae6e20d420503e96c230cf8fcdc948d94","affectsGlobalScope":true,"impliedFormat":1},{"version":"8a8eb4ebffd85e589a1cc7c178e291626c359543403d58c9cd22b81fab5b1fb9","impliedFormat":1},{"version":"af5eabf1ad1627f116f661b0232c0fa57e7918123c2d191776f77e84c7e71f44","impliedFormat":1},{"version":"42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","impliedFormat":1},{"version":"89121c1bf2990f5219bfd802a3e7fc557de447c62058d6af68d6b6348d64499a","impliedFormat":1},{"version":"79b4369233a12c6fa4a07301ecb7085802c98f3a77cf9ab97eee27e1656f82e6","impliedFormat":1},{"version":"5c5d901a999dfe64746ef4244618ae0628ac8afdb07975e3d5ed66e33c767ed0","impliedFormat":99},{"version":"85d08536e6cd9787f82261674e7d566421a84d286679db1503432a6ccf9e9625","impliedFormat":99},{"version":"5702b3c2f5d248290ed99419d77ca1cc3e6c29db5847172377659c50e6303768","impliedFormat":99},{"version":"9764b2eb5b4fc0b8951468fb3dbd6cd922d7752343ef5fbf1a7cd3dfcd54a75e","impliedFormat":99},{"version":"1fc2d3fe8f31c52c802c4dee6c0157c5a1d1f6be44ece83c49174e316cf931ad","impliedFormat":99},{"version":"dc4aae103a0c812121d9db1f7a5ea98231801ed405bf577d1c9c46a893177e36","impliedFormat":99},{"version":"106d3f40907ba68d2ad8ce143a68358bad476e1cc4a5c710c11c7dbaac878308","impliedFormat":99},{"version":"42ad582d92b058b88570d5be95393cf0a6c09a29ba9aa44609465b41d39d2534","impliedFormat":99},{"version":"36e051a1e0d2f2a808dbb164d846be09b5d98e8b782b37922a3b75f57ee66698","impliedFormat":99},{"version":"60b93ce0381b11434394616a5db9762950a0501d748998c6932150bb249e0394","impliedFormat":99},{"version":"a4ead38d64e1720c52f26457738484a61cd50be51abfd2bfc234c951fb79d20c","impliedFormat":99},{"version":"1a82e5569808c2987a9d6882e5b910beacb0165b6d18656540170038d6b8661e","impliedFormat":99},{"version":"6b243d0f6cf1786f6e3b10a99db080a977cc27e6f49bcff2b6264cf0339063d5","impliedFormat":99},{"version":"ef12df927e5deeaa09efeaf9f79336fa33745a4b3d745a8a35f43ea587bbcf40","impliedFormat":99},{"version":"083609ca47c047c6802bd40e974346a9509ef28367bb07769dbcead77cc7359f","impliedFormat":99},{"version":"46af05e1ce703a9b0d2e62d5c43fb72cb40c079b8313ad45fd221363e03bca3f","signature":"62c3cf9df805e7af019ebe1388b7139d98808d2274bff408f89a3ace9349ee36"},{"version":"f8a6bb79327f4a6afc63d28624654522fc80f7536efa7a617ef48200b7a5f673","impliedFormat":1},{"version":"8e0733c50eaac49b4e84954106acc144ec1a8019922d6afcde3762523a3634af","impliedFormat":1}],"root":[73],"options":{"composite":true,"declaration":true,"esModuleInterop":true,"jsx":4,"module":99,"outDir":"./","skipLibCheck":true,"strict":true,"target":7},"referencedMap":[[57,1],[75,2],[54,3],[55,4],[64,5],[66,6],[65,7],[68,8],[67,1],[70,9],[69,10],[72,11],[71,12],[59,13],[58,1],[61,14],[60,15],[73,16]],"latestChangedDtsFile":"./src/index.d.ts","version":"5.7.3"}
package/package.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "@bebeal/rehype-color-chips",
3
+ "version": "1.0.0",
4
+ "author": "Benjamin Noah Beal",
5
+ "description": "Rehype plugin to convert color codes into visual color chips in MDX",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/bebeal/rehype-color-chips.git"
10
+ },
11
+ "type": "module",
12
+ "main": "dist/src/index.js",
13
+ "types": "dist/src/index.d.ts",
14
+ "files": [
15
+ "dist"
16
+ ],
17
+ "publishConfig": {
18
+ "access": "public"
19
+ },
20
+ "keywords": [
21
+ "rehype",
22
+ "mdx",
23
+ "color",
24
+ "plugin",
25
+ "syntax-highlighting"
26
+ ],
27
+ "scripts": {
28
+ "build": "tsc -p tsconfig.build.json",
29
+ "demo": "vite",
30
+ "prepublishOnly": "npm run build"
31
+ },
32
+ "peerDependencies": {
33
+ "react": "^18.0.0 || ^19.0.0"
34
+ },
35
+ "devDependencies": {
36
+ "@types/mdx": "^2.0.13",
37
+ "@types/react": "^19.1.1",
38
+ "@types/react-dom": "^19.1.2",
39
+ "@vitejs/plugin-react": "^4.3.4",
40
+ "typescript": "^5.0.0",
41
+ "vite": "^6.2.6"
42
+ },
43
+ "dependencies": {
44
+ "@mdx-js/react": "^3.1.0",
45
+ "@mdx-js/rollup": "^3.1.0",
46
+ "react": "^19.1.0",
47
+ "react-dom": "^19.1.0"
48
+ }
49
+ }