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