You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-10Lines changed: 25 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -39,8 +39,6 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
39
39
## Table of Contents
40
40
41
41
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
42
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
43
-
44
42
45
43
-[Installation](#installation)
46
44
-[Usage](#usage)
@@ -58,11 +56,18 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
58
56
-[`getLineProps`](#getlineprops)
59
57
-[`getTokenProps`](#gettokenprops)
60
58
-[Utility Functions](#utility-functions)
61
-
-[`normalizeTokens`](#normalizetokens)
62
59
-[`useTokenize`](#usetokenize)
60
+
-[`normalizeTokens`](#normalizetokens)
63
61
-[Theming](#theming)
64
-
-[Upgrading from v1 to v2](#upgrade)
65
-
-[Local Development](#development)
62
+
-[Using a built-in theme](#using-a-built-in-theme)
63
+
-[Providing a CSS based theme](#providing-a-css-based-theme)
64
+
-[Upgrade](#upgrade)
65
+
-[Change module imports](#change-module-imports)
66
+
-[Change theme imports](#change-theme-imports)
67
+
-[Check language support](#check-language-support)
68
+
-[Add language component](#add-language-component)
69
+
-[Development](#development)
70
+
-[Local Demo](#local-demo)
66
71
-[LICENSE](#license)
67
72
-[Maintenance Status](#maintenance-status)
68
73
@@ -85,7 +90,8 @@ pnpm add prism-react-renderer
85
90
> Prism React Renderer has a peer dependency on `react`
86
91
87
92
### Usage
88
-
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.
93
+
94
+
Prism React Renderer has a named export for the `<Highlight />` component along with `themes`. To see Prism React Render in action with base styling, clone the repo and follow the [steps for local development](#development).
89
95
90
96
```tsx
91
97
importReactfrom"react"
@@ -133,7 +139,7 @@ ReactDOM
133
139
134
140
### Custom Language Support
135
141
136
-
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.
142
+
By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports.
137
143
138
144
> _Note_: Some languages (such as Javascript) are part of the bundle of other languages
139
145
@@ -328,12 +334,11 @@ Takes an array of Prism’s tokens and groups them by line, converting strings i
328
334
329
335
## Theming
330
336
337
+
### Using a built-in theme
338
+
331
339
The `defaultProps` you'd typically apply in a basic use-case, contain a default theme.
332
340
This theme is [vsDark](./packages/prism-react-renderer/src/themes/vsDark.ts).
333
341
334
-
While all `className`s are provided with `<Highlight />`, so that you could use your good
335
-
old Prism CSS-file themes, you can also choose to use `prism-react-renderer`'s themes like so:
@@ -367,6 +372,16 @@ property limits styles to highlighted languages.
367
372
When converting a Prism CSS theme it's mostly just necessary to use classes as
368
373
`types` and convert the declarations to object-style-syntax and put them on `style`.
369
374
375
+
### Providing a CSS based theme
376
+
377
+
In order to use a CSS based theme like the ones from [PrismJS](https://github.com/PrismJS/prism-themes), you need to disable the built in theme.
378
+
379
+
```ts
380
+
const emptyTheme = { plain: {}, styles: [] };
381
+
382
+
<Highlighttheme={emptyTheme} {/* ... */} />
383
+
```
384
+
370
385
## Upgrade
371
386
372
387
If you are migrating from v1.x to v2.x, follow these steps
0 commit comments