Socket
Socket
Sign inDemoInstall

next-prism

Package Overview
Dependencies
4
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.3.0 to 0.3.1

2

package.json
{
"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>

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc