From 2d1295586405efd496ddd5d7b49a23780fee1af4 Mon Sep 17 00:00:00 2001 From: ryuji-1to Date: Sat, 1 Jul 2023 09:07:41 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20fix=20typo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e74dc85..6a38fc8 100644 --- a/README.md +++ b/README.md @@ -194,7 +194,7 @@ But if you choose to use your own Prism setup, simply pass Prism as a prop: // Whichever way you're retrieving Prism here: import Prism from 'prismjs/components/prism-core'; - + ``` ## Children Function From e81b18bce2cb066a7bd47afbcb717f54b556f8ec Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Tue, 26 Sep 2023 12:35:12 +0200 Subject: [PATCH 2/7] feat: Add One Light --- .../src/themes/oneLight.ts | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 packages/prism-react-renderer/src/themes/oneLight.ts diff --git a/packages/prism-react-renderer/src/themes/oneLight.ts b/packages/prism-react-renderer/src/themes/oneLight.ts new file mode 100644 index 0000000..345e9b4 --- /dev/null +++ b/packages/prism-react-renderer/src/themes/oneLight.ts @@ -0,0 +1,108 @@ +/* + Adapted from the Prism One Light Theme + https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css + Created by Marc Rousavy (@mrousavy) on 26.9.2023 +*/ +import type { PrismTheme } from "../types" + +const theme: PrismTheme = { + plain: { + backgroundColor: "hsl(230, 1%, 98%)", + color: "hsl(230, 8%, 24%)", + }, + styles: [ + { + types: ["comment", "prolog", "doctype", "cdata", "punctuation"], + style: { + color: "hsl(230, 4%, 64%)", + }, + }, + { + types: ["namespace"], + style: { + opacity: 0.7, + }, + }, + { + types: ["tag", "operator", "number"], + style: { + color: "hsl(230, 8%, 24%)", + }, + }, + { + types: ["property", "function"], + style: { + color: "hsl(35, 99%, 36%)", + }, + }, + { + types: ["tag-id", "selector", "atrule-id"], + style: { + color: "hsl(119, 34%, 47%)", + }, + }, + { + types: ["attr-name"], + style: { + color: "hsl(198, 99%, 37%)", + }, + }, + { + types: [ + "boolean", + "string", + "entity", + "url", + "attr-value", + "keyword", + "control", + "directive", + "unit", + "statement", + "regex", + "atrule", + ], + style: { + color: "hsl(230, 8%, 24%)", + }, + }, + { + types: ["placeholder", "variable"], + style: { + color: "hsl(221, 87%, 60%)", + }, + }, + { + types: ["deleted"], + style: { + textDecorationLine: "line-through", + }, + }, + { + types: ["inserted"], + style: { + textDecorationLine: "underline", + }, + }, + { + types: ["italic"], + style: { + fontStyle: "italic", + }, + }, + { + types: ["important", "bold"], + style: { + fontWeight: "bold", + }, + }, + { + types: ["important"], + style: { + color: "hsl(230, 8%, 24%)", + }, + }, + ], +}; + +export default theme; From b3edc772a6a33a8c8512bd88812593b23f0b8b71 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Tue, 26 Sep 2023 12:35:17 +0200 Subject: [PATCH 3/7] feat: Add One Dark --- .../src/themes/oneDark.ts | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 packages/prism-react-renderer/src/themes/oneDark.ts diff --git a/packages/prism-react-renderer/src/themes/oneDark.ts b/packages/prism-react-renderer/src/themes/oneDark.ts new file mode 100644 index 0000000..1909035 --- /dev/null +++ b/packages/prism-react-renderer/src/themes/oneDark.ts @@ -0,0 +1,115 @@ +/* + Adapted from the Prism One Dark Theme + https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css + Created by Marc Rousavy (@mrousavy) on 26.9.2023 +*/ +import type { PrismTheme } from "../types" + +const theme: PrismTheme = { + plain: { + backgroundColor: "hsl(220, 13%, 18%)", + color: "hsl(220, 14%, 71%)", + textShadow: "0 1px rgba(0, 0, 0, 0.3)", + }, + styles: [ + { + types: [ + "comment", + "prolog", + "doctype", + "cdata", + "punctuation", + ], + style: { + color: "hsl(220, 10%, 40%)", + }, + }, + { + types: ["namespace"], + style: { + opacity: 0.7, + }, + }, + { + types: ["tag", "operator", "number"], + style: { + color: "hsl(220, 14%, 71%)", + }, + }, + { + types: ["property", "function"], + style: { + color: "hsl(29, 54%, 61%)", + }, + }, + { + types: ["tag-id", "selector", "atrule-id"], + style: { + color: "hsl(95, 38%, 62%)", + }, + }, + { + types: ["attr-name"], + style: { + color: "hsl(187, 47%, 55%)", + }, + }, + { + types: [ + "boolean", + "string", + "entity", + "url", + "attr-value", + "keyword", + "control", + "directive", + "unit", + "statement", + "regex", + "atrule", + ], + style: { + color: "hsl(220, 14%, 71%)", + }, + }, + { + types: ["placeholder", "variable"], + style: { + color: "hsl(207, 82%, 66%)", + }, + }, + { + types: ["deleted"], + style: { + textDecorationLine: "line-through", + }, + }, + { + types: ["inserted"], + style: { + textDecorationLine: "underline", + }, + }, + { + types: ["italic"], + style: { + fontStyle: "italic", + }, + }, + { + types: ["important", "bold"], + style: { + fontWeight: "bold", + }, + }, + { + types: ["important"], + style: { + color: "hsl(220, 14%, 71%)", + }, + }, + ], +}; + +export default theme; From ed13456ecfefc6951938a2ba1c41524da2b380be Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 26 Sep 2023 09:37:59 -0500 Subject: [PATCH 4/7] Add oneDark/oneLight to theme exports --- packages/demo/src/App.tsx | 2 +- .../prism-react-renderer/src/themes/index.ts | 2 + .../src/themes/oneDark.ts | 70 +++++++++---------- 3 files changed, 35 insertions(+), 39 deletions(-) diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 28e9aec..957fb9e 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -17,7 +17,7 @@ type ThemeType = keyof typeof themes function App() { const [activeSampleCodeType, setActiveSampleCodeType] = useState("TypeScript with React") - const [activeThemeName, setActiveThemeName] = useState("nightOwl") + const [activeThemeName, setActiveThemeName] = useState("oneDark") const activeSampleCode = sampleCode[activeSampleCodeType] const activeTheme = themes[activeThemeName] diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts index 0f9908f..827549e 100644 --- a/packages/prism-react-renderer/src/themes/index.ts +++ b/packages/prism-react-renderer/src/themes/index.ts @@ -14,3 +14,5 @@ export { default as vsDark } from "./vsDark" export { default as vsLight } from "./vsLight" export { default as jettwaveDark } from "./jettwaveDark" export { default as jettwaveLight } from "./jettwaveLight" +export { default as oneDark } from "./oneDark" +export { default as oneLight } from "./oneLight" diff --git a/packages/prism-react-renderer/src/themes/oneDark.ts b/packages/prism-react-renderer/src/themes/oneDark.ts index 1909035..68c55ae 100644 --- a/packages/prism-react-renderer/src/themes/oneDark.ts +++ b/packages/prism-react-renderer/src/themes/oneDark.ts @@ -13,72 +13,66 @@ const theme: PrismTheme = { }, styles: [ { - types: [ - "comment", - "prolog", - "doctype", - "cdata", - "punctuation", - ], + types: ["comment", "prolog", "cdata"], style: { color: "hsl(220, 10%, 40%)", }, }, { - types: ["namespace"], - style: { - opacity: 0.7, - }, - }, - { - types: ["tag", "operator", "number"], + types: ["doctype", "punctuation", "entity"], style: { color: "hsl(220, 14%, 71%)", }, }, { - types: ["property", "function"], - style: { - color: "hsl(29, 54%, 61%)", - }, + types: [ + "attr-name", + "class-name", + "maybe-class-name", + "boolean", + "constant", + "number", + "atrule", + ], + style: { color: "hsl(29, 54%, 61%)" }, }, { - types: ["tag-id", "selector", "atrule-id"], - style: { - color: "hsl(95, 38%, 62%)", - }, + types: ["keyword"], + style: { color: "hsl(286, 60%, 67%)" }, }, { - types: ["attr-name"], + types: ["property", "tag", "symbol", "deleted", "important"], style: { - color: "hsl(187, 47%, 55%)", + color: "hsl(355, 65%, 65%)", }, }, + { types: [ - "boolean", + "selector", "string", - "entity", - "url", - "attr-value", - "keyword", - "control", - "directive", - "unit", - "statement", + "char", + "builtin", + "inserted", "regex", - "atrule", + "attr-value", ], style: { - color: "hsl(220, 14%, 71%)", + color: "hsl(95, 38%, 62%)", }, }, { - types: ["placeholder", "variable"], + types: ["variable", "operator", "function"], style: { color: "hsl(207, 82%, 66%)", }, }, + { + types: ["url"], + style: { + color: "hsl(187, 47%, 55%)", + }, + }, { types: ["deleted"], style: { @@ -110,6 +104,6 @@ const theme: PrismTheme = { }, }, ], -}; +} -export default theme; +export default theme From 89dcc1b7c4ac0fe7f418b02d924095f467f09651 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 26 Sep 2023 09:54:52 -0500 Subject: [PATCH 5/7] Update oneLight --- .../src/themes/oneLight.ts | 58 ++++++++++--------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/packages/prism-react-renderer/src/themes/oneLight.ts b/packages/prism-react-renderer/src/themes/oneLight.ts index 345e9b4..66c4627 100644 --- a/packages/prism-react-renderer/src/themes/oneLight.ts +++ b/packages/prism-react-renderer/src/themes/oneLight.ts @@ -12,66 +12,70 @@ const theme: PrismTheme = { }, styles: [ { - types: ["comment", "prolog", "doctype", "cdata", "punctuation"], + types: ["comment", "prolog", "cdata"], style: { color: "hsl(230, 4%, 64%)", }, }, { - types: ["namespace"], - style: { - opacity: 0.7, - }, - }, - { - types: ["tag", "operator", "number"], + types: ["doctype", "punctuation", "entity"], style: { color: "hsl(230, 8%, 24%)", }, }, { - types: ["property", "function"], + types: [ + "attr-name", + "class-name", + "boolean", + "constant", + "number", + "atrule", + ], style: { color: "hsl(35, 99%, 36%)", }, }, { - types: ["tag-id", "selector", "atrule-id"], + types: ["keyword"], style: { - color: "hsl(119, 34%, 47%)", + color: "hsl(301, 63%, 40%)", }, }, + { - types: ["attr-name"], + types: ["property", "tag", "symbol", "deleted", "important"], style: { - color: "hsl(198, 99%, 37%)", + color: "hsl(5, 74%, 59%)", }, }, { types: [ - "boolean", + "selector", "string", - "entity", - "url", - "attr-value", - "keyword", - "control", - "directive", - "unit", - "statement", + "char", + "builtin", + "inserted", "regex", - "atrule", + "attr-value", + "punctuation", ], style: { - color: "hsl(230, 8%, 24%)", + color: "hsl(119, 34%, 47%)", }, }, { - types: ["placeholder", "variable"], + types: ["variable", "operator", "function"], style: { color: "hsl(221, 87%, 60%)", }, }, + { + types: ["url"], + style: { + color: "hsl(198, 99%, 37%)", + }, + }, { types: ["deleted"], style: { @@ -103,6 +107,6 @@ const theme: PrismTheme = { }, }, ], -}; +} -export default theme; +export default theme From ca6e269fa0174da04e4359b89aa2e4fb4c7a2f36 Mon Sep 17 00:00:00 2001 From: Grant Sander Date: Tue, 26 Sep 2023 09:55:29 -0500 Subject: [PATCH 6/7] Added changeset --- .changeset/khaki-frogs-behave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/khaki-frogs-behave.md diff --git a/.changeset/khaki-frogs-behave.md b/.changeset/khaki-frogs-behave.md new file mode 100644 index 0000000..f1f3bc7 --- /dev/null +++ b/.changeset/khaki-frogs-behave.md @@ -0,0 +1,5 @@ +--- +"prism-react-renderer": minor +--- + +Added oneDark and oneLight themes From 68554eda5d7a2c5496d8e89b6a67c19444540a34 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 26 Sep 2023 15:06:41 +0000 Subject: [PATCH 7/7] Version Packages --- .changeset/khaki-frogs-behave.md | 5 ----- packages/prism-react-renderer/CHANGELOG.md | 7 +++++++ packages/prism-react-renderer/package.json | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) delete mode 100644 .changeset/khaki-frogs-behave.md diff --git a/.changeset/khaki-frogs-behave.md b/.changeset/khaki-frogs-behave.md deleted file mode 100644 index f1f3bc7..0000000 --- a/.changeset/khaki-frogs-behave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"prism-react-renderer": minor ---- - -Added oneDark and oneLight themes diff --git a/packages/prism-react-renderer/CHANGELOG.md b/packages/prism-react-renderer/CHANGELOG.md index d4d358d..9c86261 100644 --- a/packages/prism-react-renderer/CHANGELOG.md +++ b/packages/prism-react-renderer/CHANGELOG.md @@ -1,5 +1,12 @@ # prism-react-renderer +## 2.1.0 + +### Minor Changes + +- Added oneDark and oneLight themes + ([#224](https://github.com/FormidableLabs/prism-react-renderer/pull/224)) + ## 2.0.6 ### Patch Changes diff --git a/packages/prism-react-renderer/package.json b/packages/prism-react-renderer/package.json index 7add180..4ddf0e7 100755 --- a/packages/prism-react-renderer/package.json +++ b/packages/prism-react-renderer/package.json @@ -1,6 +1,6 @@ { "name": "prism-react-renderer", - "version": "2.0.6", + "version": "2.1.0", "description": "Renders highlighted Prism output using React", "sideEffects": true, "main": "dist/index.js",