Skip to content

Bump to Prism 1.29, update README #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 18, 2023
Merged

Bump to Prism 1.29, update README #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 43 additions & 126 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,141 +68,60 @@ should be installed as one of your project's `dependencies`:
npm install --save prism-react-renderer
# yarn
yarn add prism-react-renderer
# pnpm
pnpm add prism-react-renderer
```

> This package also depends on `react`. Please make sure you
> have those installed as well.
> Prism React Renderer has a peer dependency on `react`

## Usage
### How to use Prism React Renderer
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.

> [Try it out in the browser](https://codesandbox.io/s/prism-react-renderer-example-u6vhk)
```tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { Highlight, themes } from "prism-react-renderer"
import styles from 'styles.module.css'

<img src="./.readme/basic.png" width="237" alt="Screenshot showing highlighted code block" />

```jsx
import React from "react";
import { render } from "react-dom";
// import { createRoot } from "react-dom/client";
import Highlight, { defaultProps } from "prism-react-renderer";

const exampleCode = `
(function someDemo() {
var test = "Hello World!";
console.log(test);
})();

return () => <App />;
`;

const Content = (
<Highlight {...defaultProps} code={exampleCode} language="jsx">
const codeBlock = `
const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
return (
<div>
<h2>{item.name}</h2>
<p>Price: {item.price}</p>
<p>Quantity: {item.quantity}</p>
</div>
);
}
`

export const App = () => (
<Highlight
theme={themes.shadesOfPurple}
code={codeBlock}
language="tsx"
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={className} style={style}>
<pre style={style}>
{tokens.map((line, i) => (
<div {...getLineProps({ line, key: i })}>
<div key={i} {...getLineProps({ line })}>
<span>{i + 1}</span>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</pre>
)}
</Highlight>
);
render(Content, document.getElementById('root'));

// If you are using React 18
// const root = createRoot(document.getElementById('root'));
// root.render(Content);
```

`<Highlight />` is the only component exposed by this package, as inspired by
[downshift](https://github.com/paypal/downshift).

It also exports a `defaultProps` object which for basic usage can simply be spread
onto the `<Highlight />` component. It also provides some default theming.

It doesn't render anything itself, it just calls the render function and renders that.
["Use a render prop!"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)!
`<Highlight>{highlight => <pre>/* your JSX here! */</pre>}</Highlight>`

### Line Numbers

Add line numbers to your highlighted code blocks using the `index` parameter in your `line.map` function:

<img src="./.readme/line-numbers.png" width="453" alt="Screenshot showing line numbers in highlighted code block" />

For example, if you were using `styled-components`, it could look like the following demo.
)

> [Demo with `styled-components`](https://codesandbox.io/s/prism-react-renderer-example-u6vhk?file=/src/WithLineNumbers.js)
ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
.render(<App />)

```js
import React from "react";
import styled from "styled-components";
import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/nightOwl";
```

const exampleCode = `
import React, { useState } from "react";

function Example() {
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
`.trim();

const Pre = styled.pre`
text-align: left;
margin: 1em 0;
padding: 0.5em;
overflow: scroll;
`;

const Line = styled.div`
display: table-row;
`;

const LineNo = styled.span`
display: table-cell;
text-align: right;
padding-right: 1em;
user-select: none;
opacity: 0.5;
`;

const LineContent = styled.span`
display: table-cell;
`;

const WithLineNumbers = () => (
<Highlight {...defaultProps} theme={theme} code={exampleCode} language="jsx">
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<Pre className={className} style={style}>
{tokens.map((line, i) => (
<Line key={i} {...getLineProps({ line, key: i })}>
<LineNo>{i + 1}</LineNo>
<LineContent>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</LineContent>
</Line>
))}
</Pre>
)}
</Highlight>
);

export default WithLineNumbers;
```

## Basic Props

Expand Down Expand Up @@ -235,19 +154,17 @@ This is the code that will be highlighted.

### theme

> `PrismTheme` | _required; default is provided in `defaultProps` export_
> `PrismTheme` | _optional; default is vsDark_

If a theme is passed, it is used to generate style props which can be retrieved
via the prop-getters which are described in "[Children Function](#children-function)".

A default theme is provided by the `defaultProps` object.

Read more about how to theme `prism-react-renderer` in
the section "[Theming](#theming)".

### Prism
### prism

> `PrismLib` | _required; default is provided in `defaultProps` export_
> `prism` | _optional; default is the vendored version_

This is the [Prismjs](https://github.com/PrismJS/prism) library itself.
A vendored version of Prism is provided (and also exported) as part of this library.
Expand All @@ -263,7 +180,7 @@ But if you choose to use your own Prism setup, simply pass Prism as a prop:
// Whichever way you're retrieving Prism here:
import Prism from 'prismjs/components/prism-core';

<Highlight Prism={Prism} {/* ... */} />
<Highlight prism={prism} {/* ... */} />
```

## Children Function
Expand Down Expand Up @@ -349,15 +266,15 @@ your old Prism CSS-file themes.
## Theming

The `defaultProps` you'd typically apply in a basic use-case, contain a default theme.
This theme is [duotoneDark](./src/themes/duotoneDark.js).
This theme is [vsDark](./packages/prism-react-renderer/src/themes/vsDark.ts).

While all `className`s are provided with `<Highlight />`, so that you could use your good
old Prism CSS-file themes, you can also choose to use `prism-react-renderer`'s themes like so:

```jsx
import dracula from 'prism-react-renderer/themes/dracula';
import { Highlight, themes } from 'prism-react-renderer';

<Highlight theme={dracula} {/* ... */} />
<Highlight theme={themes.dracula} {/* ... */} />
```

These themes are JSON-based and are heavily inspired by VSCode's theme format.
Expand Down
20 changes: 12 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
"build:languages": "pnpm --filter generate-prism-languages build",
"build:watch": "pnpm --filter generate-prism-languages build && pnpm --filter prism-react-renderer build:watch",
"changeset": "changeset",
"version": "pnpm changeset version && pnpm install"
"version": "pnpm changeset version"
},
"devDependencies": {
"@changesets/cli": "^2.26.0",
"@svitejs/changesets-changelog-github-compact": "^1.1.0",
"@babel/cli": "^7.10.4",
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-object-rest-spread": "^7.10.4",
Expand All @@ -26,25 +24,31 @@
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.16.0",
"@changesets/cli": "^2.26.0",
"@svitejs/changesets-changelog-github-compact": "^1.1.0",
"@testing-library/react": "^11.2.5",
"@types/react": "^18.0.35",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"babel-jest": "^26.6.3",
"babel-plugin-macros": "^3.0.1",
"codegen.macro": "^4.1.0",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"babel-jest": "^26.6.3",
"babel-plugin-macros": "^3.0.1",
"codegen.macro": "^4.1.0",
"globby": "^11.0.2",
"prismjs": "1.26.0",
"patch-package": "^6.4.7",
"prettier": "^2.8.7",
"prismjs": "1.29.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.0.4"
},
"pnpm": {
"patchedDependencies": {
"prismjs@1.29.0": "patches/prismjs@1.29.0.patch"
}
Comment on lines +48 to +52
Copy link
Contributor

@gksander gksander Apr 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL!

}
}
4 changes: 2 additions & 2 deletions packages/prism-react-renderer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
"dist"
],
"scripts": {
"build": "patch-package && tsup",
"build:watch": "patch-package && tsup --watch",
"build": "tsup",
"build:watch": "tsup --watch",
"test": "vitest",
"typecheck": "tsc --noEmit",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
Expand Down
Loading