Skip to content

Commit 27a0832

Browse files
committed
Improve docs on theming
1 parent 34f6c5f commit 27a0832

File tree

2 files changed

+25
-10
lines changed

2 files changed

+25
-10
lines changed

README.md

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
3939
## Table of Contents
4040

4141
<!-- 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-
4442

4543
- [Installation](#installation)
4644
- [Usage](#usage)
@@ -58,11 +56,18 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_
5856
- [`getLineProps`](#getlineprops)
5957
- [`getTokenProps`](#gettokenprops)
6058
- [Utility Functions](#utility-functions)
61-
- [`normalizeTokens`](#normalizetokens)
6259
- [`useTokenize`](#usetokenize)
60+
- [`normalizeTokens`](#normalizetokens)
6361
- [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)
6671
- [LICENSE](#license)
6772
- [Maintenance Status](#maintenance-status)
6873

@@ -85,7 +90,8 @@ pnpm add prism-react-renderer
8590
> Prism React Renderer has a peer dependency on `react`
8691
8792
### 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).
8995

9096
```tsx
9197
import React from "react"
@@ -133,7 +139,7 @@ ReactDOM
133139

134140
### Custom Language Support
135141

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.
137143

138144
> _Note_: Some languages (such as Javascript) are part of the bundle of other languages
139145
@@ -328,12 +334,11 @@ Takes an array of Prism’s tokens and groups them by line, converting strings i
328334

329335
## Theming
330336

337+
### Using a built-in theme
338+
331339
The `defaultProps` you'd typically apply in a basic use-case, contain a default theme.
332340
This theme is [vsDark](./packages/prism-react-renderer/src/themes/vsDark.ts).
333341

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:
336-
337342
```jsx
338343
import { Highlight, themes } from 'prism-react-renderer';
339344

@@ -367,6 +372,16 @@ property limits styles to highlighted languages.
367372
When converting a Prism CSS theme it's mostly just necessary to use classes as
368373
`types` and convert the declarations to object-style-syntax and put them on `style`.
369374
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+
<Highlight theme={emptyTheme} {/* ... */} />
383+
```
384+
370385
## Upgrade
371386

372387
If you are migrating from v1.x to v2.x, follow these steps

prism-react-renderer-Hero.png

-432 KB
Binary file not shown.

0 commit comments

Comments
 (0)