From 958d67f7fac95b28404afec56eb2873765ef36a4 Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 21 Apr 2023 08:02:06 -0500 Subject: [PATCH 1/5] v2 release --- .changeset/afraid-geese-fry.md | 5 ++ README.md | 86 +++---------------- packages/demo/package.json | 2 + packages/demo/src/App.tsx | 6 +- packages/demo/src/sample-code.ts | 28 ++++++ packages/generate-prism-languages/index.ts | 1 + .../src/components/highlight.ts | 3 +- pnpm-lock.yaml | 11 +++ 8 files changed, 68 insertions(+), 74 deletions(-) create mode 100644 .changeset/afraid-geese-fry.md diff --git a/.changeset/afraid-geese-fry.md b/.changeset/afraid-geese-fry.md new file mode 100644 index 0000000..26a63bc --- /dev/null +++ b/.changeset/afraid-geese-fry.md @@ -0,0 +1,5 @@ +--- +"prism-react-renderer": major +--- + +v2 release with updated API diff --git a/README.md b/README.md index 9274b49..306b04e 100755 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_ - [Installation](#installation) - [Usage](#usage) +- [Custom Language Support](#custom-language-support) - [Basic Props](#basic-props) - [children](#children) - [language](#language) @@ -74,7 +75,7 @@ pnpm add prism-react-renderer > Prism React Renderer has a peer dependency on `react` -### How to use Prism React Renderer +### Usage Prism React Renderer has a named export for the `` component along with `themes`. To see Prism React Render in action with base styling check out `packages/demo` or run `pnpm run start:demo` from the root of this repository. ```tsx @@ -121,6 +122,18 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement) ``` +### Custom Language Support + +By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/c914fdea48625ba59c8022174bb3df1ed802ce4d/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports. **Depending on your app's build system you may need to `await` the `import` or use `require` to ensure `window.Prism` exists before importing the custom languages.** You can add support for more by including their definitions from the main `prismjs` package: + +```js +import { Highlight, Prism } from "prism-react-renderer"; + +typeof window !== "undefined" && (window.Prism = Prism) +await import("prismjs/components/prism-applescript") +/** or **/ +require("prismjs/components/prism-applescript") +``` ## Basic Props @@ -306,77 +319,6 @@ property limits styles to highlighted languages. When converting a Prism CSS theme it's mostly just necessary to use classes as `types` and convert the declarations to object-style-syntax and put them on `style`. -## FAQ - -
- -How do I add more language highlighting support? - -By default `prism-react-renderer` only includes an [arbitrary subset of the languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) that Prism supports. You can add support for more by including their definitions from the main `prismjs` package: - -```js -import Prism from "prism-react-renderer/prism"; - -(typeof global !== "undefined" ? global : window).Prism = Prism; - -require("prismjs/components/prism-kotlin"); -require("prismjs/components/prism-csharp"); -``` -
- -
- -How do I use my old Prism css themes? - -`prism-react-renderer` still returns you all proper `className`s via the prop getters, -when you use it. By default however it uses its new theming system, which output a -couple of `style` props as well. - -If you don't pass `theme` to the `` component it will default to not -outputting any `style` props, while still returning you the `className` props, like -so: - -```js - - {highlight => null /* ... */} - -``` - -
- -
- -How do I prevent a theme and the vendored Prism to be bundled? - -Since the default theme and the vendored Prism library in `prism-react-renderer` -come from `defaultProps`, if you wish to pass your own Prism library in, and not -use the built-in theming, you simply need to leave it out to allow your bundler -to tree-shake those: - -```js -import Highlight from "prism-react-renderer"; -import Prism from "prismjs"; // Different source - - - {highlight => null /* ... */} -; -``` - -You can also import the vendored Prism library on its own: - -```js -import { Prism } from "prism-react-renderer"; -// or -import Prism from "prism-react-renderer/prism"; -``` - -
- ## LICENSE MIT diff --git a/packages/demo/package.json b/packages/demo/package.json index a1bb95c..007c00e 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -16,9 +16,11 @@ "react-dom": "^18.2.0" }, "devDependencies": { + "@types/node": "^18.15.11", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", + "install": "^0.13.0", "typescript": "^4.9.3", "vite": "^4.2.0" } diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 3b4695f..2cb5e35 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -1,10 +1,14 @@ -import { Highlight, themes } from "prism-react-renderer" +import { Highlight, /* Prism, */ themes } from "prism-react-renderer" import styles from "./app.module.css" import clsx from "clsx" import { ProjectBadge } from "formidable-oss-badges" import { useState } from "react" import { sampleCode } from "./sample-code" +// Example of importing a custom language directly from Prism +// typeof window !== "undefined" && (window.Prism = Prism) +// await import("prismjs/components/prism-applescript") + type SampleCodeType = keyof typeof sampleCode type ThemeType = keyof typeof themes diff --git a/packages/demo/src/sample-code.ts b/packages/demo/src/sample-code.ts index 36cac4d..b35f8cc 100644 --- a/packages/demo/src/sample-code.ts +++ b/packages/demo/src/sample-code.ts @@ -80,6 +80,34 @@ const GroceryItem = new Proxy({}, { `, }, + ["HTML"]: { + language: "html", + code: ` + + + + + Formidable + + +
+ + + + `, + }, + + ["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 + `, + }, + ["Rust"]: { language: "rust", code: ` diff --git a/packages/generate-prism-languages/index.ts b/packages/generate-prism-languages/index.ts index b85f28d..2a9fd25 100644 --- a/packages/generate-prism-languages/index.ts +++ b/packages/generate-prism-languages/index.ts @@ -20,6 +20,7 @@ export const languagesToBundle = [ "go", "cpp", "markdown", + "html", ] /** diff --git a/packages/prism-react-renderer/src/components/highlight.ts b/packages/prism-react-renderer/src/components/highlight.ts index 02de114..3c6d5d5 100644 --- a/packages/prism-react-renderer/src/components/highlight.ts +++ b/packages/prism-react-renderer/src/components/highlight.ts @@ -6,11 +6,12 @@ import { useTokenize } from "./useTokenize" export const Highlight = ({ children, - language, + language: _language, code, theme, prism, }: InternalHighlightProps) => { + const language = _language.toLowerCase() const themeDictionary = useThemeDictionary(language, theme) const getLineProps = useGetLineProps(themeDictionary) const getTokenProps = useGetTokenProps(themeDictionary) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf514a3..8cd277e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -115,6 +115,9 @@ 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/react': specifier: ^18.0.28 version: 18.0.35 @@ -124,6 +127,9 @@ importers: '@vitejs/plugin-react': specifier: ^3.1.0 version: 3.1.0(vite@4.2.1) + install: + specifier: ^0.13.0 + version: 0.13.0 typescript: specifier: ^4.9.3 version: 4.9.5 @@ -4699,6 +4705,11 @@ packages: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} dev: true + /install@0.13.0: + resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==} + engines: {node: '>= 0.10'} + dev: true + /internal-slot@1.0.5: resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==} engines: {node: '>= 0.4'} From 98b2f7553171cc7456e2993ea48ec36e1a1e1bd0 Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 21 Apr 2023 08:07:59 -0500 Subject: [PATCH 2/5] Enable custom AppleScript on Demo --- packages/demo/package.json | 1 + packages/demo/src/App.tsx | 8 +++++--- pnpm-lock.yaml | 3 +++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/demo/package.json b/packages/demo/package.json index 007c00e..34d088c 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -17,6 +17,7 @@ }, "devDependencies": { "@types/node": "^18.15.11", + "@types/prismjs": "^1.26.0", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 2cb5e35..6137b0c 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -1,4 +1,4 @@ -import { Highlight, /* Prism, */ themes } from "prism-react-renderer" +import { Highlight, Prism, themes } from "prism-react-renderer" import styles from "./app.module.css" import clsx from "clsx" import { ProjectBadge } from "formidable-oss-badges" @@ -6,8 +6,10 @@ import { useState } from "react" import { sampleCode } from "./sample-code" // Example of importing a custom language directly from Prism -// typeof window !== "undefined" && (window.Prism = Prism) -// await import("prismjs/components/prism-applescript") +typeof window !== "undefined" && (window.Prism = Prism) +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +await import("prismjs/components/prism-applescript") type SampleCodeType = keyof typeof sampleCode type ThemeType = keyof typeof themes diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8cd277e..6acbfe1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,6 +118,9 @@ importers: '@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 From 79eabfbd6b01612944d82bebd06382e20651eaae Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 21 Apr 2023 08:13:09 -0500 Subject: [PATCH 3/5] Remove install package --- packages/demo/package.json | 1 - pnpm-lock.yaml | 8 -------- 2 files changed, 9 deletions(-) diff --git a/packages/demo/package.json b/packages/demo/package.json index 34d088c..dc75f6a 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -21,7 +21,6 @@ "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^3.1.0", - "install": "^0.13.0", "typescript": "^4.9.3", "vite": "^4.2.0" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6acbfe1..e0262a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -130,9 +130,6 @@ importers: '@vitejs/plugin-react': specifier: ^3.1.0 version: 3.1.0(vite@4.2.1) - install: - specifier: ^0.13.0 - version: 0.13.0 typescript: specifier: ^4.9.3 version: 4.9.5 @@ -4708,11 +4705,6 @@ packages: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} dev: true - /install@0.13.0: - resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==} - engines: {node: '>= 0.10'} - dev: true - /internal-slot@1.0.5: resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==} engines: {node: '>= 0.4'} From c14fe61f33f8af13d4a644c119e966f6cc7fb6c5 Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 21 Apr 2023 11:34:05 -0500 Subject: [PATCH 4/5] Remove old README anchor tag --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 306b04e..03c7d14 100755 --- a/README.md +++ b/README.md @@ -54,7 +54,6 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_ - [`getLineProps`](#getlineprops) - [`getTokenProps`](#gettokenprops) - [Theming](#theming) -- [FAQ](#faq) - [LICENSE](#license) From a41d116523e8e5e1e0457dcd55befdac3bfa554d Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 21 Apr 2023 16:08:55 -0500 Subject: [PATCH 5/5] Update global Prism README docs --- README.md | 2 +- packages/demo/src/App.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 03c7d14..91d25dd 100755 --- a/README.md +++ b/README.md @@ -128,7 +128,7 @@ By default `prism-react-renderer` only includes a [base set of languages](https: ```js import { Highlight, Prism } from "prism-react-renderer"; -typeof window !== "undefined" && (window.Prism = Prism) +(typeof global !== "undefined" ? global : window).Prism = Prism await import("prismjs/components/prism-applescript") /** or **/ require("prismjs/components/prism-applescript") diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 6137b0c..28e9aec 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -6,7 +6,7 @@ import { useState } from "react" import { sampleCode } from "./sample-code" // Example of importing a custom language directly from Prism -typeof window !== "undefined" && (window.Prism = Prism) +;(typeof global !== "undefined" ? global : window).Prism = Prism // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore await import("prismjs/components/prism-applescript")