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..91d25dd 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) @@ -53,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) @@ -74,7 +74,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 +121,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 global !== "undefined" ? global : window).Prism = Prism +await import("prismjs/components/prism-applescript") +/** or **/ +require("prismjs/components/prism-applescript") +``` ## Basic Props @@ -306,77 +318,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..dc75f6a 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -16,6 +16,8 @@ "react-dom": "^18.2.0" }, "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 3b4695f..28e9aec 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -1,10 +1,16 @@ -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 global !== "undefined" ? global : 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/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..e0262a8 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