Formidable
+
+
+
+ Nearform
+
+
+
+
+
+
+
+ `,
+ },
+
+ ["AppleScript"]: {
+ language: "applescript",
+ code: `
+display alert "Do you wish to buy groceries?" buttons {"No", "Yes"}
+set theAnswer to button returned of the result
+if theAnswer is "Yes" then
+ beep 5
+end if
+ `,
+ },
+
+ ["Python"]: {
+ language: "python",
+ code: `
+from sklearn.datasets import load_iris
+from sklearn.model_selection import train_test_split
+from sklearn.tree import DecisionTreeClassifier
+from sklearn.metrics import accuracy_score, classification_report
+
+iris = load_iris()
+X = iris.data
+y = iris.target
+
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=42)
+
+clf = DecisionTreeClassifier(random_state=42)
+clf.fit(X_train, y_train)
+
+y_pred = clf.predict(X_test)
+
+accuracy = accuracy_score(y_test, y_pred)
+report = classification_report(y_test, y_pred)
+print(f"Accuracy: {accuracy}")
+print("Classification Report:\\n", report)
+print("Feature Importances:", clf.feature_importances_)
+ `,
+ },
+
["Rust"]: {
language: "rust",
code: `
@@ -147,4 +206,31 @@ impl GroceryItem {
}
`,
},
+ ["JSON"]: {
+ language: "json",
+ code: `
+ {
+ "id": 1,
+ "name": "John Doe",
+ "email": "johndoe@example.com",
+ "address": {
+ "street": "123 Main St",
+ "city": "San Diego",
+ "state": "CA",
+ "zip": "12345"
+ },
+ "phoneNumbers": [
+ {
+ "type": "home",
+ "number": "555-123-4567"
+ },
+ {
+ "type": "work",
+ "number": "555-901-2345"
+ }
+ ],
+ "interests": ["reading", "hiking", "coding"]
+ }
+ `,
+ },
}
diff --git a/packages/generate-prism-languages/index.ts b/packages/generate-prism-languages/index.ts
index b85f28d..ca3b883 100644
--- a/packages/generate-prism-languages/index.ts
+++ b/packages/generate-prism-languages/index.ts
@@ -7,6 +7,7 @@ import { languages as prismLanguages } from "prismjs/components"
import uglify from "uglify-js"
export const languagesToBundle =
[
+ "markup",
"jsx",
"tsx",
"swift",
@@ -20,6 +21,8 @@ export const languagesToBundle = [
"go",
"cpp",
"markdown",
+ "python",
+ "json",
]
/**
@@ -27,7 +30,7 @@ export const languagesToBundle = [
* that starts off assuming Prism lives in global scope. We also need to provide Prism as that
* gets passed into an iffe preventing us from needing to use global scope.
*/
-const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport Prism from "prismjs";\nexport { Prism };`
+const header = `// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport * as Prism from "prismjs";\nexport { Prism };`
const prismPath = dirname(require.resolve("prismjs"))
const readLanguageFile = async (language: string): Promise => {
@@ -87,10 +90,7 @@ const main = async () => {
await addLanguageToOutput(language)
}
- console.info(
- pc.bold(pc.bgYellow(pc.black("Formidable Prism React Renderer"))),
- "\n"
- )
+ console.info(pc.bold(pc.bgYellow(pc.black("Prism React Renderer"))), "\n")
console.info(
pc.bgBlue(`Generated TypeScript output at:`),
pc.cyan(outputPath)
diff --git a/packages/prism-react-renderer/.gitignore b/packages/prism-react-renderer/.gitignore
new file mode 100644
index 0000000..b43bf86
--- /dev/null
+++ b/packages/prism-react-renderer/.gitignore
@@ -0,0 +1 @@
+README.md
diff --git a/packages/prism-react-renderer/CHANGELOG.md b/packages/prism-react-renderer/CHANGELOG.md
new file mode 100644
index 0000000..474a01f
--- /dev/null
+++ b/packages/prism-react-renderer/CHANGELOG.md
@@ -0,0 +1,103 @@
+# prism-react-renderer
+
+## 2.4.1
+
+### Patch Changes
+
+- Remove client side hooks
+ ([#252](https://github.com/FormidableLabs/prism-react-renderer/pull/252))
+
+## 2.4.0
+
+### Minor Changes
+
+- 'Add JSON as default supported language'
+ ([#247](https://github.com/FormidableLabs/prism-react-renderer/pull/247))
+
+## 2.3.1
+
+### Patch Changes
+
+- Export `normalizeTokens` and `useTokenize` utility functions.
+ ([#237](https://github.com/FormidableLabs/prism-react-renderer/pull/237))
+
+## 2.3.0
+
+### Minor Changes
+
+- Upgrade clsx to v2.0.0.
+ ([#232](https://github.com/FormidableLabs/prism-react-renderer/pull/232))
+
+## 2.2.0
+
+### Minor Changes
+
+- Add Python support.
+ ([#226](https://github.com/FormidableLabs/prism-react-renderer/pull/226))
+
+### Patch Changes
+
+- Fix html language preset by using markup instead.
+ ([#230](https://github.com/FormidableLabs/prism-react-renderer/pull/230))
+
+## 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
+
+- Export all types from package
+ ([#216](https://github.com/FormidableLabs/prism-react-renderer/pull/216))
+
+## 2.0.5
+
+### Patch Changes
+
+- Fixed bug where an undefined theme would cause a runtime error.
+ ([#213](https://github.com/FormidableLabs/prism-react-renderer/pull/213))
+
+## 2.0.4
+
+### Patch Changes
+
+- Fix types for Prism library.
+ ([#204](https://github.com/FormidableLabs/prism-react-renderer/pull/204))
+
+## 2.0.3
+
+### Patch Changes
+
+- Add package README
+ ([#200](https://github.com/FormidableLabs/prism-react-renderer/pull/200))
+
+## 2.0.2
+
+### Patch Changes
+
+- Add publish provenance
+ ([#198](https://github.com/FormidableLabs/prism-react-renderer/pull/198))
+
+## 2.0.1
+
+### Patch Changes
+
+- Fix inclusion of @types dependency for prismjs
+ ([#196](https://github.com/FormidableLabs/prism-react-renderer/pull/196))
+
+## 2.0.0
+
+### Major Changes
+
+- v2 release with updated API
+ ([#191](https://github.com/FormidableLabs/prism-react-renderer/pull/191))
+
+### Minor Changes
+
+- Added 2 new styles for the code viewer. light & dark mode themes using only
+ ([#192](https://github.com/FormidableLabs/prism-react-renderer/pull/192))
+ colors found on tailwindCSS.
diff --git a/packages/prism-react-renderer/package.json b/packages/prism-react-renderer/package.json
index 72dae04..de58e2b 100755
--- a/packages/prism-react-renderer/package.json
+++ b/packages/prism-react-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "prism-react-renderer",
- "version": "1.3.5",
+ "version": "2.4.1",
"description": "Renders highlighted Prism output using React",
"sideEffects": true,
"main": "dist/index.js",
@@ -18,7 +18,8 @@
"test": "vitest",
"typecheck": "tsc --noEmit",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
- "format": "prettier --write 'src/**/*.js'"
+ "format": "prettier --write 'src/**/*.js'",
+ "prepublishOnly": "cp ../../README.md ./README.md"
},
"peerDependencies": {
"react": ">=16.0.0"
@@ -34,7 +35,6 @@
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.0",
"@types/node": "^18.15.11",
- "@types/prismjs": "^1.26.0",
"@vitejs/plugin-react": "^3.1.0",
"babel-plugin-codegen": "^4.1.5",
"happy-dom": "^9.7.1",
@@ -50,6 +50,10 @@
"vitest": "^0.30.1"
},
"dependencies": {
- "clsx": "^1.2.1"
+ "@types/prismjs": "^1.26.0",
+ "clsx": "^2.0.0"
+ },
+ "publishConfig": {
+ "provenance": true
}
}
diff --git a/packages/prism-react-renderer/src/components/highlight.ts b/packages/prism-react-renderer/src/components/highlight.ts
index 02de114..3d23ddc 100644
--- a/packages/prism-react-renderer/src/components/highlight.ts
+++ b/packages/prism-react-renderer/src/components/highlight.ts
@@ -1,17 +1,18 @@
import { InternalHighlightProps } from "../types"
-import { useThemeDictionary } from "./useThemeDictionary"
import { useGetLineProps } from "./useGetLineProps"
import { useGetTokenProps } from "./useGetTokenProps"
import { useTokenize } from "./useTokenize"
+import themeToDict from "../utils/themeToDict"
export const Highlight = ({
children,
- language,
+ language: _language,
code,
theme,
prism,
}: InternalHighlightProps) => {
- const themeDictionary = useThemeDictionary(language, theme)
+ const language = _language.toLowerCase()
+ const themeDictionary = themeToDict(theme, language)
const getLineProps = useGetLineProps(themeDictionary)
const getTokenProps = useGetTokenProps(themeDictionary)
const grammar = prism.languages[language]
diff --git a/packages/prism-react-renderer/src/components/useThemeDictionary.ts b/packages/prism-react-renderer/src/components/useThemeDictionary.ts
deleted file mode 100644
index fd6746f..0000000
--- a/packages/prism-react-renderer/src/components/useThemeDictionary.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Language, PrismTheme } from "../types"
-import { useEffect, useRef, useState } from "react"
-import themeToDict, { ThemeDict } from "../utils/themeToDict"
-
-export const useThemeDictionary = (language: Language, theme: PrismTheme) => {
- const [themeDictionary, setThemeDictionary] = useState(
- themeToDict(theme, language)
- )
- const previousTheme = useRef()
- const previousLanguage = useRef()
-
- useEffect(() => {
- if (
- theme !== previousTheme.current ||
- language !== previousLanguage.current
- ) {
- previousTheme.current = theme
- previousLanguage.current = language
- setThemeDictionary(themeToDict(theme, language))
- }
- }, [language, theme])
-
- return themeDictionary
-}
diff --git a/packages/prism-react-renderer/src/components/useTokenize.ts b/packages/prism-react-renderer/src/components/useTokenize.ts
index 75901b9..7fac963 100644
--- a/packages/prism-react-renderer/src/components/useTokenize.ts
+++ b/packages/prism-react-renderer/src/components/useTokenize.ts
@@ -1,6 +1,6 @@
import { EnvConfig, Language, PrismGrammar, PrismLib } from "../types"
import normalizeTokens from "../utils/normalizeTokens"
-import { useMemo, useRef } from "react"
+import { useMemo } from "react"
type Options = {
prism: PrismLib
@@ -10,7 +10,6 @@ type Options = {
}
export const useTokenize = ({ prism, code, grammar, language }: Options) => {
- const prismRef = useRef(prism)
return useMemo(() => {
if (grammar == null) return normalizeTokens([code])
@@ -21,9 +20,15 @@ export const useTokenize = ({ prism, code, grammar, language }: Options) => {
tokens: [],
}
- prismRef.current.hooks.run("before-tokenize", prismConfig)
- prismConfig.tokens = prismRef.current.tokenize(code, grammar)
- prismRef.current.hooks.run("after-tokenize", prismConfig)
+ prism.hooks.run("before-tokenize", prismConfig)
+ prismConfig.tokens = prism.tokenize(code, grammar)
+ prism.hooks.run("after-tokenize", prismConfig)
return normalizeTokens(prismConfig.tokens)
- }, [code, grammar, language])
+ }, [
+ code,
+ grammar,
+ language,
+ // prism is a stable import
+ prism,
+ ])
}
diff --git a/packages/prism-react-renderer/src/index.ts b/packages/prism-react-renderer/src/index.ts
index 16f4486..60b9ba6 100644
--- a/packages/prism-react-renderer/src/index.ts
+++ b/packages/prism-react-renderer/src/index.ts
@@ -3,6 +3,9 @@ import * as themes from "./themes"
import { createElement } from "react"
import { Highlight as InternalHighlight } from "./components/highlight"
import { HighlightProps, PrismLib } from "./types"
+import normalizeTokens from "./utils/normalizeTokens"
+import { useTokenize } from "./components/useTokenize"
+export * from "./types"
/**
* Prism React Renderer requires this specific instance
@@ -10,8 +13,11 @@ import { HighlightProps, PrismLib } from "./types"
*/
const Highlight = (props: HighlightProps) =>
createElement(InternalHighlight, {
- prism: Prism as PrismLib,
- theme: themes.vsDark,
...props,
+ prism: props.prism || (Prism as PrismLib),
+ theme: props.theme || themes.vsDark,
+ code: props.code,
+ language: props.language,
})
-export { Highlight, Prism, themes }
+
+export { Highlight, Prism, themes, normalizeTokens, useTokenize }
diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts
new file mode 100644
index 0000000..64d120f
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts
@@ -0,0 +1,79 @@
+// Gruvbox Material (dark)
+// Author: Sainnhe Park (https://github.com/sainnhe)
+// https://github.com/sainnhe/gruvbox-material
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+ plain: {
+ color: "#ebdbb2",
+ backgroundColor: "#292828",
+ },
+ styles: [
+ {
+ types: [
+ "imports",
+ "class-name",
+ "maybe-class-name",
+ "constant",
+ "doctype",
+ "builtin",
+ "function",
+ ],
+ style: {
+ color: "#d8a657",
+ },
+ },
+ {
+ types: ["property-access"],
+ style: {
+ color: "#7daea3",
+ },
+ },
+ {
+ types: ["tag"],
+ style: {
+ color: "#e78a4e",
+ },
+ },
+ {
+ types: ["attr-name", "char", "url", "regex"],
+ style: {
+ color: "#a9b665",
+ },
+ },
+ {
+ types: ["attr-value", "string"],
+ style: {
+ color: "#89b482",
+ },
+ },
+ {
+ types: ["comment", "prolog", "cdata", "operator", "inserted"],
+ style: {
+ color: "#a89984",
+ },
+ },
+ {
+ types: [
+ "delimiter",
+ "boolean",
+ "keyword",
+ "selector",
+ "important",
+ "atrule",
+ "property",
+ "variable",
+ "deleted",
+ ],
+ style: {
+ color: "#ea6962",
+ },
+ },
+ {
+ types: ["entity", "number", "symbol"],
+ style: {
+ color: "#d3869b",
+ },
+ },
+ ],
+}
+export default theme
diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts
new file mode 100644
index 0000000..ae544f6
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts
@@ -0,0 +1,78 @@
+// Gruvbox Material (light)
+// Author: Sainnhe Park (https://github.com/sainnhe)
+// https://github.com/sainnhe/gruvbox-material
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+ plain: {
+ color: "#654735",
+ backgroundColor: "#f9f5d7",
+ },
+ styles: [
+ {
+ types: [
+ "delimiter",
+ "boolean",
+ "keyword",
+ "selector",
+ "important",
+ "atrule",
+ "property",
+ "variable",
+ "deleted",
+ ],
+ style: {
+ color: "#af2528",
+ },
+ },
+ {
+ types: [
+ "imports",
+ "class-name",
+ "maybe-class-name",
+ "constant",
+ "doctype",
+ "builtin",
+ ],
+ style: {
+ color: "#b4730e",
+ },
+ },
+ {
+ types: ["string", "attr-value"],
+ style: {
+ color: "#477a5b",
+ },
+ },
+ {
+ types: ["property-access"],
+ style: {
+ color: "#266b79",
+ },
+ },
+ {
+ types: ["function", "attr-name", "char", "url"],
+ style: {
+ color: "#72761e",
+ },
+ },
+ {
+ types: ["tag"],
+ style: {
+ color: "#b94c07",
+ },
+ },
+ {
+ types: ["comment", "prolog", "cdata", "operator", "inserted"],
+ style: {
+ color: "#a89984",
+ },
+ },
+ {
+ types: ["entity", "number", "symbol"],
+ style: {
+ color: "#924f79",
+ },
+ },
+ ],
+}
+export default theme
diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts
index 15ccb84..e94ef1f 100644
--- a/packages/prism-react-renderer/src/themes/index.ts
+++ b/packages/prism-react-renderer/src/themes/index.ts
@@ -12,3 +12,9 @@ export { default as synthwave84 } from "./synthwave84"
export { default as ultramin } from "./ultramin"
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"
+export { default as gruvboxMaterialDark } from "./gruvboxMaterialDark"
+export { default as gruvboxMaterialLight } from "./gruvboxMaterialLight"
diff --git a/packages/prism-react-renderer/src/themes/jettwaveDark.ts b/packages/prism-react-renderer/src/themes/jettwaveDark.ts
new file mode 100644
index 0000000..7919db9
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/jettwaveDark.ts
@@ -0,0 +1,107 @@
+//
+// dark version of code viewer styles built for https://jettwave.com
+// only uses colors found in default tailwindCSS => https://tailwindcss.com/docs/customizing-colors
+// designed by: https://github.com/ryanmogk
+//
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+ plain: {
+ color: "#f8fafc",
+ backgroundColor: "#011627",
+ },
+ styles: [
+ {
+ types: ["prolog"],
+ style: {
+ color: "#000080",
+ },
+ },
+ {
+ types: ["comment"],
+ style: {
+ color: "#6A9955",
+ },
+ },
+ {
+ types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+ style: {
+ color: "#569CD6",
+ },
+ },
+ {
+ types: ["number", "inserted"],
+ style: {
+ color: "#B5CEA8",
+ },
+ },
+ {
+ types: ["constant"],
+ style: {
+ color: "#f8fafc",
+ },
+ },
+ {
+ types: ["attr-name", "variable"],
+ style: {
+ color: "#9CDCFE",
+ },
+ },
+ {
+ types: ["deleted", "string", "attr-value", "template-punctuation"],
+ style: {
+ color: "#cbd5e1",
+ },
+ },
+ {
+ types: ["selector"],
+ style: {
+ color: "#D7BA7D",
+ },
+ },
+ {
+ types: ["tag"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["tag"],
+ languages: ["markup"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["punctuation", "operator"],
+ style: {
+ color: "#D4D4D4",
+ },
+ },
+ {
+ types: ["punctuation"],
+ languages: ["markup"],
+ style: {
+ color: "#808080",
+ },
+ },
+ {
+ types: ["function"],
+ style: {
+ color: "#7dd3fc",
+ },
+ },
+ {
+ types: ["class-name"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["char"],
+ style: {
+ color: "#D16969",
+ },
+ },
+ ],
+}
+export default theme
diff --git a/packages/prism-react-renderer/src/themes/jettwaveLight.ts b/packages/prism-react-renderer/src/themes/jettwaveLight.ts
new file mode 100644
index 0000000..f5c1011
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/jettwaveLight.ts
@@ -0,0 +1,105 @@
+// light version of code viewer styles built for https://jettwave.com
+// only uses colors found in default tailwindCSS => https://tailwindcss.com/docs/customizing-colors
+// designed by: https://github.com/ryanmogk
+import type { PrismTheme } from "../types"
+const theme: PrismTheme = {
+ plain: {
+ color: "#0f172a",
+ backgroundColor: "#f1f5f9",
+ },
+ styles: [
+ {
+ types: ["prolog"],
+ style: {
+ color: "#000080",
+ },
+ },
+ {
+ types: ["comment"],
+ style: {
+ color: "#6A9955",
+ },
+ },
+ {
+ types: ["builtin", "changed", "keyword", "interpolation-punctuation"],
+ style: {
+ color: "#0c4a6e",
+ },
+ },
+ {
+ types: ["number", "inserted"],
+ style: {
+ color: "#B5CEA8",
+ },
+ },
+ {
+ types: ["constant"],
+ style: {
+ color: "#0f172a",
+ },
+ },
+ {
+ types: ["attr-name", "variable"],
+ style: {
+ color: "#0c4a6e",
+ },
+ },
+ {
+ types: ["deleted", "string", "attr-value", "template-punctuation"],
+ style: {
+ color: "#64748b",
+ },
+ },
+ {
+ types: ["selector"],
+ style: {
+ color: "#D7BA7D",
+ },
+ },
+ {
+ types: ["tag"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["tag"],
+ languages: ["markup"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["punctuation", "operator"],
+ style: {
+ color: "#475569",
+ },
+ },
+ {
+ types: ["punctuation"],
+ languages: ["markup"],
+ style: {
+ color: "#808080",
+ },
+ },
+ {
+ types: ["function"],
+ style: {
+ color: "#0e7490",
+ },
+ },
+ {
+ types: ["class-name"],
+ style: {
+ color: "#0ea5e9",
+ },
+ },
+ {
+ types: ["char"],
+ style: {
+ color: "#D16969",
+ },
+ },
+ ],
+}
+export default theme
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..68c55ae
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/oneDark.ts
@@ -0,0 +1,109 @@
+/*
+ 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", "cdata"],
+ style: {
+ color: "hsl(220, 10%, 40%)",
+ },
+ },
+ {
+ types: ["doctype", "punctuation", "entity"],
+ style: {
+ color: "hsl(220, 14%, 71%)",
+ },
+ },
+ {
+ types: [
+ "attr-name",
+ "class-name",
+ "maybe-class-name",
+ "boolean",
+ "constant",
+ "number",
+ "atrule",
+ ],
+ style: { color: "hsl(29, 54%, 61%)" },
+ },
+ {
+ types: ["keyword"],
+ style: { color: "hsl(286, 60%, 67%)" },
+ },
+ {
+ types: ["property", "tag", "symbol", "deleted", "important"],
+ style: {
+ color: "hsl(355, 65%, 65%)",
+ },
+ },
+
+ {
+ types: [
+ "selector",
+ "string",
+ "char",
+ "builtin",
+ "inserted",
+ "regex",
+ "attr-value",
+ ],
+ style: {
+ color: "hsl(95, 38%, 62%)",
+ },
+ },
+ {
+ types: ["variable", "operator", "function"],
+ style: {
+ color: "hsl(207, 82%, 66%)",
+ },
+ },
+ {
+ types: ["url"],
+ style: {
+ color: "hsl(187, 47%, 55%)",
+ },
+ },
+ {
+ 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
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..66c4627
--- /dev/null
+++ b/packages/prism-react-renderer/src/themes/oneLight.ts
@@ -0,0 +1,112 @@
+/*
+ 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", "cdata"],
+ style: {
+ color: "hsl(230, 4%, 64%)",
+ },
+ },
+ {
+ types: ["doctype", "punctuation", "entity"],
+ style: {
+ color: "hsl(230, 8%, 24%)",
+ },
+ },
+ {
+ types: [
+ "attr-name",
+ "class-name",
+ "boolean",
+ "constant",
+ "number",
+ "atrule",
+ ],
+ style: {
+ color: "hsl(35, 99%, 36%)",
+ },
+ },
+ {
+ types: ["keyword"],
+ style: {
+ color: "hsl(301, 63%, 40%)",
+ },
+ },
+
+ {
+ types: ["property", "tag", "symbol", "deleted", "important"],
+ style: {
+ color: "hsl(5, 74%, 59%)",
+ },
+ },
+ {
+ types: [
+ "selector",
+ "string",
+ "char",
+ "builtin",
+ "inserted",
+ "regex",
+ "attr-value",
+ "punctuation",
+ ],
+ style: {
+ color: "hsl(119, 34%, 47%)",
+ },
+ },
+ {
+ types: ["variable", "operator", "function"],
+ style: {
+ color: "hsl(221, 87%, 60%)",
+ },
+ },
+ {
+ types: ["url"],
+ style: {
+ color: "hsl(198, 99%, 37%)",
+ },
+ },
+ {
+ 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
diff --git a/packages/prism-react-renderer/src/types.ts b/packages/prism-react-renderer/src/types.ts
index a481610..2e23120 100644
--- a/packages/prism-react-renderer/src/types.ts
+++ b/packages/prism-react-renderer/src/types.ts
@@ -1,25 +1,10 @@
import type { CSSProperties } from "react"
-import { Token as PrismToken } from "prismjs"
+import type { Token as PrismToken, Grammar } from "prismjs"
+import Prism from "prismjs"
export type Language = string
-export type PrismGrammar = Record
-type LanguagesDict = Record
-
-export type PrismLib = {
- languages: LanguagesDict
- tokenize: (code: string, grammar: PrismGrammar) => Array
- highlight: (code: string, grammar: PrismGrammar, language: Language) => string
- hooks: {
- run: (
- name: string,
- env: {
- code: string
- grammar: PrismGrammar
- language: Language
- }
- ) => void
- }
-}
+export type PrismGrammar = Grammar
+export type PrismLib = typeof Prism
export type Token = {
types: string[]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf514a3..01ace2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -115,6 +115,12 @@ importers:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
devDependencies:
+ '@types/node':
+ specifier: ^18.15.11
+ version: 18.15.11
+ '@types/prismjs':
+ specifier: ^1.26.0
+ version: 1.26.0
'@types/react':
specifier: ^18.0.28
version: 18.0.35
@@ -173,9 +179,12 @@ importers:
packages/prism-react-renderer:
dependencies:
+ '@types/prismjs':
+ specifier: ^1.26.0
+ version: 1.26.0
clsx:
- specifier: ^1.2.1
- version: 1.2.1
+ specifier: ^2.0.0
+ version: 2.0.0
devDependencies:
'@babel/core':
specifier: '*'
@@ -207,9 +216,6 @@ importers:
'@types/node':
specifier: ^18.15.11
version: 18.15.11
- '@types/prismjs':
- specifier: ^1.26.0
- version: 1.26.0
'@vitejs/plugin-react':
specifier: ^3.1.0
version: 3.1.0(vite@4.2.1)
@@ -2577,7 +2583,6 @@ packages:
/@types/prismjs@1.26.0:
resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
- dev: true
/@types/prop-types@15.7.5:
resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -3452,6 +3457,11 @@ packages:
engines: {node: '>=6'}
dev: false
+ /clsx@2.0.0:
+ resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+ engines: {node: '>=6'}
+ dev: false
+
/codegen.macro@4.1.0:
resolution: {integrity: sha512-T0A8vdX9SkhT00cd7nWQwlg8CT2qQwp1o2+ZD7Wqx38ABK0kJvhk/IJTjNgnE1W35dE98+OzLr1zluVREz5bPg==}
engines: {node: '>=10'}
@@ -4890,6 +4900,7 @@ packages:
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
+ requiresBuild: true
dev: true
/is-path-inside@3.0.3:
@@ -6812,6 +6823,7 @@ packages:
/to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
+ requiresBuild: true
dependencies:
is-number: 7.0.0
dev: true
diff --git a/prism-react-renderer-Hero.png b/prism-react-renderer-Hero.png
deleted file mode 100644
index a1f3bcc..0000000
Binary files a/prism-react-renderer-Hero.png and /dev/null differ