From d2b85ef9a8dabc0c2887c633a47b93a39ef568ef Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 28 Apr 2026 00:01:01 +0200 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20update=20upstream=20?= =?UTF-8?q?dependency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4b3a013..146f301 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "react-dom": "*" }, "dependencies": { - "code-colors": "^2.4.0" + "code-colors": "^2.5.0" }, "devDependencies": { "@babel/preset-env": "^7.25.7", diff --git a/yarn.lock b/yarn.lock index 0ccce03..eee90f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2219,10 +2219,10 @@ clean-css@^5.2.2: dependencies: source-map "~0.6.0" -code-colors@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/code-colors/-/code-colors-2.4.0.tgz#993955bca93ce08bdfd2ecc20e17772a40eba5fb" - integrity sha512-6FhZx+bFu0iMwwwVsAfuY9SSmHhMze53Ybjd+sd20v2ocRZzRd2+Uo1dH2Rh9x86qc9wbLCOq6cPXYAi9KVMKw== +code-colors@^2.5.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/code-colors/-/code-colors-2.5.0.tgz#132b0380f43cadb3429b485b993767c89ca92147" + integrity sha512-61KEODKoBlS9yWvLTVQjnoFv4HjNSQ41qoJ44K+dz4P7fivwaYJ3GrNi50k6tygi2gVCPkda9CvCC7qVEyLOEw== dependencies: prismjs "^1.30.0" thingies "^2.5.0" From 029f093693cea651877dfed3306ed0836f5af612 Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 28 Apr 2026 00:04:39 +0200 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20simplify=20and=20cle?= =?UTF-8?q?an=20up=20theme=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style.ts | 62 ---------------------------------------------------- 1 file changed, 62 deletions(-) diff --git a/src/style.ts b/src/style.ts index f2fce22..f17ed83 100644 --- a/src/style.ts +++ b/src/style.ts @@ -30,7 +30,6 @@ export interface ColorPalette { col6?: string; negative?: string; positive?: string; - selection: string; string?: string; keyword?: string; builtin?: string; @@ -78,24 +77,6 @@ export const palette: ColorPalette = { negative: theme.color.sem.negative[2], // positive: theme.color.sem.positive[1], positive: "#718C00", - selection: "hsl(230, 1%, 90%)", -}; - -const redSquiggly: CssLikeObject = { - marb: "-2px", - bdb: "2px dotted rgba(255,0,0,.6)", - d: "inline-block", - pos: "relative", - "&:after": { - d: "block", - content: '""', - w: "100%", - h: "4px", - bdb: "2px dotted rgba(255,0,0,.6)", - pos: "absolute", - t: "calc(1em - 1px)", - l: "-2px", - }, }; const backgroundPadding: CssLikeObject = { @@ -105,11 +86,6 @@ const backgroundPadding: CssLikeObject = { pad: ".1em", }; -const redBackground: CssLikeObject = { - ...backgroundPadding, - bg: "rgba(255,0,0,.05)", -}; - export const css = ({ mono1, mono2 = mono1, @@ -122,7 +98,6 @@ export const css = ({ col6 = mono3, negative = col5, positive = col4, - selection, string: str = col4, keyword = col3, @@ -154,11 +129,6 @@ export const css = ({ return { col: mono1, - "::selection": { - bg: selection, - col: "inherit", - bdrad: ".2em", - }, ".token": { "&.comment,&.prolog,&.cdata": { col: mono3, @@ -188,35 +158,22 @@ export const css = ({ }, "&.important": { col: important, - ...redSquiggly, }, "&.function": { col: func, }, "&.boolean": { col: boolean, - "&[text=false]": redBackground, }, "&.number": { ...backgroundPadding, col: number, - "&:hover": { - bg: lightBg, - }, - '&[text="0"],&[text="0.0"]': redBackground, '&[text*="."]': { col: float, }, }, "&.string": { col: str, - "&[text=\"''\"],&[text='\"\"']": redBackground, - "&:hover": { - td: "underline", - }, - "&.template-punctuation:hover": { - td: "none", - }, }, "&.char": { col: char, @@ -226,9 +183,6 @@ export const css = ({ }, "&.regex": { col: regex, - "&:hover": { - td: "underline", - }, }, "&.url.string": { td: "underline", @@ -244,11 +198,6 @@ export const css = ({ }, "&.property": { col: property, - "&:hover": { - // td: 'underline', - ...backgroundPadding, - bg: lightBg, - }, }, "&.punctuation": { col: punctuation, @@ -309,17 +258,6 @@ export const css = ({ }, }, - ".language-js,.language-javascript": { - ".token": { - "&.keyword": { - "&[text=var],&[text=with],&[text=debugger]": redSquiggly, - }, - "&.function": { - "&[text=eval],&[text=alert]": redSquiggly, - }, - }, - }, - ".language-json": { ".token": { "&.property": { From 1226638a1813cb59047dea45d81b724feaed8502 Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 28 Apr 2026 00:15:17 +0200 Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20more=20pac?= =?UTF-8?q?kages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- yarn.lock | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 146f301..c17bc1c 100644 --- a/package.json +++ b/package.json @@ -59,13 +59,13 @@ "@storybook/react": "^8.3.5", "@storybook/react-webpack5": "^8.3.5", "@storybook/test": "^8.3.5", - "nano-theme": "^1.4.3", + "nano-theme": "^1.5.0", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", "rimraf": "^6.0.1", "storybook": "^8.3.5", - "thingies": "^2.4.0", + "thingies": "^2.6.0", "typescript": "^5.6.3" }, "release": { diff --git a/yarn.lock b/yarn.lock index eee90f9..102e38c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3392,7 +3392,7 @@ nano-css@^5.6.2: stacktrace-js "^2.0.2" stylis "^4.3.0" -nano-theme@^1.4.3: +nano-theme@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/nano-theme/-/nano-theme-1.5.0.tgz#faa3a0b26dc6cfb3f2cc0ef70e207ca26f06ddb3" integrity sha512-lOSUW1IqKDKfeOdwHdwTCCo49BngV83KXRPMI9GDk7Fha6fjhzv2ozNPbrm+h+uh9CCIhM9fkvDtspGfb46bpw== @@ -4305,11 +4305,16 @@ terser@^5.10.0, terser@^5.31.1: commander "^2.20.0" source-map-support "~0.5.20" -thingies@^2.4.0, thingies@^2.5.0: +thingies@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/thingies/-/thingies-2.5.0.tgz#5f7b882c933b85989f8466b528a6247a6881e04f" integrity sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw== +thingies@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/thingies/-/thingies-2.6.0.tgz#e09b98b9e6f6caf8a759eca8481fea1de974d2b1" + integrity sha512-rMHRjmlFLM1R96UYPvpmnc3LYtdFrT33JIB7L9hetGue1qAPfn1N2LJeEjxUSidu1Iku+haLZXDuEXUHNGO/lg== + throttle-debounce@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb" From f08a207adc067a90fd91a1fae22a641015f8494a Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 28 Apr 2026 00:16:10 +0200 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=20allow=20changing?= =?UTF-8?q?=20code=20block=20language?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Copilot --- src/Markup.ts | 2 +- src/index.ts | 1 + src/palettes.ts | 2 -- src/style.ts | 1 + src/util.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Markup.ts b/src/Markup.ts index 40dd7fd..d95aa57 100644 --- a/src/Markup.ts +++ b/src/Markup.ts @@ -100,7 +100,7 @@ export const Markup: React.FC = (props) => { return () => { cancelled = true; }; - }, [code, decorate]); + }, [code, decorate, lang]); rest.children = node || diff --git a/src/index.ts b/src/index.ts index 7b521a4..cbc5cb0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,3 +2,4 @@ export * from "./style"; export * from "./palettes"; export * from "./ColorTokens"; export * from "./Markup"; +export * from "./util"; diff --git a/src/palettes.ts b/src/palettes.ts index ac23cb4..5257c3e 100644 --- a/src/palettes.ts +++ b/src/palettes.ts @@ -11,7 +11,6 @@ export const light: ColorPalette = { boolean: "#411888", nil: theme.g(0, 0.45), undef: theme.g(0, 0.25), - selection: theme.g(0, 0.08), }; export const dark: ColorPalette = { @@ -30,5 +29,4 @@ export const dark: ColorPalette = { boolean: "#9168c8", nil: darkTheme.g(0, 0.45), undef: darkTheme.g(0, 0.25), - selection: darkTheme.g(0, 0.1), }; diff --git a/src/style.ts b/src/style.ts index f17ed83..1431ad9 100644 --- a/src/style.ts +++ b/src/style.ts @@ -186,6 +186,7 @@ export const css = ({ }, "&.url.string": { td: "underline", + textUnderlineOffset: "3px", }, "&.operator": { col: operator, diff --git a/src/util.ts b/src/util.ts index e7dabdf..17881a8 100644 --- a/src/util.ts +++ b/src/util.ts @@ -1,6 +1,6 @@ import { CodeColors } from "code-colors/lib/CodeColors"; -const bundle = "https://unpkg.com/code-colors@2.2.0/dist/bundle.js"; +const bundle = "https://cdn.jsdelivr.net/npm/code-colors@2.5.0/dist/bundle.js"; let __colors: CodeColors | null = null; export const colors = (): CodeColors => { From 7d607835c44439c74f204d863e26855fdac76d5c Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 28 Apr 2026 00:16:39 +0200 Subject: [PATCH 5/5] =?UTF-8?q?style:=20=F0=9F=92=84=20run=20Prettier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/gh-pages.yml | 2 +- CHANGELOG.md | 6 ++---- README.md | 3 +-- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 0350417..af4605b 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -2,7 +2,7 @@ name: Node CI on: push: - branches: [ main ] + branches: [main] jobs: gh-pages: diff --git a/CHANGELOG.md b/CHANGELOG.md index 543d70c..9d7d2de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,16 +1,14 @@ # [3.4.0](https://github.com/streamich/code-colors-react/compare/v3.3.0...v3.4.0) (2025-08-30) - ### Features -* update deps ([e1da41a](https://github.com/streamich/code-colors-react/commit/e1da41a4f86d5d52fbe01da6e74e1de400430c53)) +- update deps ([e1da41a](https://github.com/streamich/code-colors-react/commit/e1da41a4f86d5d52fbe01da6e74e1de400430c53)) # [3.3.0](https://github.com/streamich/code-colors-react/compare/v3.2.1...v3.3.0) (2024-12-07) - ### Features -* 🎸 remove bold class decorations and make red bg lighter ([e389fc4](https://github.com/streamich/code-colors-react/commit/e389fc462c11caa97893e7993ecca01c443dad08)) +- 🎸 remove bold class decorations and make red bg lighter ([e389fc4](https://github.com/streamich/code-colors-react/commit/e389fc462c11caa97893e7993ecca01c443dad08)) ## [3.2.1](https://github.com/streamich/code-colors-react/compare/v3.2.0...v3.2.1) (2024-10-10) diff --git a/README.md b/README.md index d0bf93d..738d6ed 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # code-colors-react -React component for code syntax highlighting. [__Preview 📕__][storybook] +React component for code syntax highlighting. [**Preview 📕**][storybook] [storybook]: https://streamich.github.io/code-colors-react/?path=/story/stories-colortokens--hello-world @@ -72,4 +72,3 @@ Nested languages: JavaScript and CSS inside HTML: ![image](https://github.com/user-attachments/assets/68f296f7-994b-4ddd-b7ce-401cb536a607) [See more examples][storybook]. -