next-prism
Advanced tools
Comparing version 0.3.0 to 0.3.1
{ | ||
"name": "next-prism", | ||
"version": "0.3.0", | ||
"version": "0.3.1", | ||
"description": "A lightweight, robust, and elegant syntax highlighting component for your next React apps.", | ||
@@ -5,0 +5,0 @@ "author": "Bunlong <bunlong.van@gmail.com>", |
@@ -29,2 +29,4 @@ # next-prism | ||
### 🎀 Code | ||
```javascript | ||
@@ -51,4 +53,35 @@ import { usePrism } from 'next-prism' | ||
## Props | ||
### 🎀 highlightAll | ||
```javascript | ||
import { useState, useEffect } from 'react' | ||
import { usePrism } from 'next-prism' | ||
// Import a theme.css | ||
import 'next-prism/themes/tomorrow.css' | ||
function App() { | ||
const [count, setCount] = useState(0) | ||
const { Code, highlightAll } = usePrism() | ||
useEffect(() => { | ||
highlightAll() | ||
}, [count]) | ||
return ( | ||
<> | ||
<button onClick={() => setCount(count + 1)}> | ||
Click me | ||
</button> | ||
<p>You clicked {count} times</p> | ||
<Code language='javascript'> | ||
{`<p>You clicked ${count} times<p>`} | ||
</Code> | ||
</> | ||
) | ||
} | ||
``` | ||
## usePrism Return Object | ||
<table> | ||
@@ -59,2 +92,26 @@ <thead> | ||
<th>Type</th> | ||
<th>Description</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>Code</td> | ||
<td>ReactNode</td> | ||
<td>Code component.</td> | ||
</tr> | ||
<tr> | ||
<td>highlightAll</td> | ||
<td>function</td> | ||
<td>Use to highlight all code elements.</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
## Code Props | ||
<table> | ||
<thead> | ||
<tr> | ||
<th>Prop</th> | ||
<th>Type</th> | ||
<th>Default</th> | ||
@@ -61,0 +118,0 @@ <th>Require</th> |
50385
845