Merge pull request #191 from FormidableLabs/v2-release

Release v2 with updated API

.changeset/afraid-geese-fry.md

@@ -0,0 +1,5 @@
+---
+"prism-react-renderer": major
+---
+
+v2 release with updated API

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)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -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 `<Highlight />` 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
-
-<details>
-
-<summary>How do I add more language highlighting support?</summary>
-
-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");
-```
-</details>
-
-<details>
-
-<summary>How do I use my old Prism css themes?</summary>
-
-`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 `<Highlight />` component it will default to not
-outputting any `style` props, while still returning you the `className` props, like
-so:
-
-```js
-<Highlight
-  {...defaultProps}
-  code={exampleCode}
-  language="jsx"
-  theme={undefined}
->
-  {highlight => null /* ... */}
-</Highlight>
-```
-
-</details>
-
-<details>
-
-<summary>How do I prevent a theme and the vendored Prism to be bundled?</summary>
-
-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 Prism={Prism} code={exampleCode} language="jsx">
-  {highlight => null /* ... */}
-</Highlight>;
-```
-
-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";
-```
-
-</details>
-
 ## LICENSE
 
 MIT

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",

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
 

packages/demo/src/sample-code.ts

@@ -80,6 +80,34 @@ const GroceryItem = new Proxy({}, {
     `,
   },
 
+  ["HTML"]: {
+    language: "html",
+    code: `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Formidable</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+    `,
+  },
+
+  ["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: `

packages/generate-prism-languages/index.ts

@@ -20,6 +20,7 @@ export const languagesToBundle = <const>[
   "go",
   "cpp",
   "markdown",
+  "html",
 ]
 
 /**

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)