Skip to content

Commit 6097385

Browse files
carloskelly13carloskelly13
authored
Merge pull request #191 from FormidableLabs/v2-release
Release v2 with updated API
2 parents c914fde + a41d116 commit 6097385

File tree

8 files changed

+65
-75
lines changed

8 files changed

+65
-75
lines changed

‎.changeset/afraid-geese-fry.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"prism-react-renderer": major
3+
---
4+
5+
v2 release with updated API

‎README.md

Lines changed: 14 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
4040

4141
- [Installation](#installation)
4242
- [Usage](#usage)
43+
- [Custom Language Support](#custom-language-support)
4344
- [Basic Props](#basic-props)
4445
- [children](#children)
4546
- [language](#language)
@@ -53,7 +54,6 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
5354
- [`getLineProps`](#getlineprops)
5455
- [`getTokenProps`](#gettokenprops)
5556
- [Theming](#theming)
56-
- [FAQ](#faq)
5757
- [LICENSE](#license)
5858

5959
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -74,7 +74,7 @@ pnpm add prism-react-renderer
7474

7575
> Prism React Renderer has a peer dependency on `react`
7676
77-
### How to use Prism React Renderer
77+
### Usage
7878
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.
7979

8080
```tsx
@@ -121,6 +121,18 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
121121

122122
```
123123

124+
### Custom Language Support
125+
126+
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:
127+
128+
```js
129+
import { Highlight, Prism } from "prism-react-renderer";
130+
131+
(typeof global !== "undefined" ? global : window).Prism = Prism
132+
await import("prismjs/components/prism-applescript")
133+
/** or **/
134+
require("prismjs/components/prism-applescript")
135+
```
124136

125137

126138
## Basic Props
@@ -306,77 +318,6 @@ property limits styles to highlighted languages.
306318
When converting a Prism CSS theme it's mostly just necessary to use classes as
307319
`types` and convert the declarations to object-style-syntax and put them on `style`.
308320

309-
## FAQ
310-
311-
<details>
312-
313-
<summary>How do I add more language highlighting support?</summary>
314-
315-
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:
316-
317-
```js
318-
import Prism from "prism-react-renderer/prism";
319-
320-
(typeof global !== "undefined" ? global : window).Prism = Prism;
321-
322-
require("prismjs/components/prism-kotlin");
323-
require("prismjs/components/prism-csharp");
324-
```
325-
</details>
326-
327-
<details>
328-
329-
<summary>How do I use my old Prism css themes?</summary>
330-
331-
`prism-react-renderer` still returns you all proper `className`s via the prop getters,
332-
when you use it. By default however it uses its new theming system, which output a
333-
couple of `style` props as well.
334-
335-
If you don't pass `theme` to the `<Highlight />` component it will default to not
336-
outputting any `style` props, while still returning you the `className` props, like
337-
so:
338-
339-
```js
340-
<Highlight
341-
{...defaultProps}
342-
code={exampleCode}
343-
language="jsx"
344-
theme={undefined}
345-
>
346-
{highlight => null /* ... */}
347-
</Highlight>
348-
```
349-
350-
</details>
351-
352-
<details>
353-
354-
<summary>How do I prevent a theme and the vendored Prism to be bundled?</summary>
355-
356-
Since the default theme and the vendored Prism library in `prism-react-renderer`
357-
come from `defaultProps`, if you wish to pass your own Prism library in, and not
358-
use the built-in theming, you simply need to leave it out to allow your bundler
359-
to tree-shake those:
360-
361-
```js
362-
import Highlight from "prism-react-renderer";
363-
import Prism from "prismjs"; // Different source
364-
365-
<Highlight Prism={Prism} code={exampleCode} language="jsx">
366-
{highlight => null /* ... */}
367-
</Highlight>;
368-
```
369-
370-
You can also import the vendored Prism library on its own:
371-
372-
```js
373-
import { Prism } from "prism-react-renderer";
374-
// or
375-
import Prism from "prism-react-renderer/prism";
376-
```
377-
378-
</details>
379-
380321
## LICENSE
381322

382323
MIT

‎packages/demo/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"react-dom": "^18.2.0"
1717
},
1818
"devDependencies": {
19+
"@types/node": "^18.15.11",
20+
"@types/prismjs": "^1.26.0",
1921
"@types/react": "^18.0.28",
2022
"@types/react-dom": "^18.0.11",
2123
"@vitejs/plugin-react": "^3.1.0",

‎packages/demo/src/App.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
import { Highlight, themes } from "prism-react-renderer"
1+
import { Highlight, Prism, themes } from "prism-react-renderer"
22
import styles from "./app.module.css"
33
import clsx from "clsx"
44
import { ProjectBadge } from "formidable-oss-badges"
55
import { useState } from "react"
66
import { sampleCode } from "./sample-code"
77

8+
// Example of importing a custom language directly from Prism
9+
;(typeof global !== "undefined" ? global : window).Prism = Prism
10+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
11+
// @ts-ignore
12+
await import("prismjs/components/prism-applescript")
13+
814
type SampleCodeType = keyof typeof sampleCode
915
type ThemeType = keyof typeof themes
1016

‎packages/demo/src/sample-code.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,34 @@ const GroceryItem = new Proxy({}, {
8080
`,
8181
},
8282

83+
["HTML"]: {
84+
language: "html",
85+
code: `
86+
<!DOCTYPE html>
87+
<html lang="en">
88+
<head>
89+
<meta charset="UTF-8" />
90+
<title>Formidable</title>
91+
</head>
92+
<body>
93+
<div id="root"></div>
94+
<script type="module" src="/src/main.tsx"></script>
95+
</body>
96+
</html>
97+
`,
98+
},
99+
100+
["AppleScript"]: {
101+
language: "applescript",
102+
code: `
103+
display alert "Do you wish to buy groceries?" buttons {"No", "Yes"}
104+
set theAnswer to button returned of the result
105+
if theAnswer is "Yes" then
106+
beep 5
107+
end if
108+
`,
109+
},
110+
83111
["Rust"]: {
84112
language: "rust",
85113
code: `

‎packages/generate-prism-languages/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const languagesToBundle = <const>[
2020
"go",
2121
"cpp",
2222
"markdown",
23+
"html",
2324
]
2425

2526
/**

‎packages/prism-react-renderer/src/components/highlight.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { useTokenize } from "./useTokenize"
66

77
export const Highlight = ({
88
children,
9-
language,
9+
language: _language,
1010
code,
1111
theme,
1212
prism,
1313
}: InternalHighlightProps) => {
14+
const language = _language.toLowerCase()
1415
const themeDictionary = useThemeDictionary(language, theme)
1516
const getLineProps = useGetLineProps(themeDictionary)
1617
const getTokenProps = useGetTokenProps(themeDictionary)

‎pnpm-lock.yaml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)