A lightweight, robust, and elegant syntax highlighting component for your next React apps.
MIT License
A lightweight, robust, and elegant syntax highlighting component for your next React apps.
next-prism is available on npm. It can be installed with the following command:
npm install next-prism --save
next-prism is available on yarn as well. It can be installed with the following command:
yarn add next-prism
import { usePrism } from 'next-prism'
// Import a theme.css
import 'next-prism/themes/tomorrow.css'
export default function App() {
const { Code } = usePrism()
return (
<Code language='javascript'>
{`<div className="example">
{Math.random()}
</div>`}
</Code>
)
}
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>
</>
)
}
Line number at the beginning of code lines.
import { usePrism } from 'next-prism'
// Import a theme.css
import 'next-prism/themes/tomorrow.css'
// Import line-numbers source
import 'next-prism/plugins/line-numbers/line-numbers'
// Import line-numbers.css
import 'next-prism/plugins/line-numbers/line-numbers.css'
export default function App() {
const { Code } = usePrism()
return (
<Code language='javascript' lineNumbers={true}>
{`<div className="example">
{Math.random()}
</div>`}
</Code>
)
}
Show hidden characters such as tabs and line breaks.
import { usePrism } from 'next-prism'
// Import a theme.css
import 'next-prism/themes/tomorrow.css'
// Import show-invisibles source
import 'next-prism/plugins/show-invisibles/show-invisibles'
// Import show-invisibles.css
import 'next-prism/plugins/show-invisibles/show-invisibles.css'
export default function App() {
const { Code } = usePrism()
return (
<Code language='javascript'>
{`<div className="example">
{Math.random()}
</div>`}
</Code>
)
}
Converts URLs and emails in code to clickable links. Parses Markdown links in comments.
import { usePrism } from 'next-prism'
// Import a theme.css
import 'next-prism/themes/tomorrow.css'
// Import autolinker source
import 'next-prism/plugins/autolinker/autolinker'
// Import autolinker.css
import 'next-prism/plugins/autolinker/autolinker.css'
function App() {
const { Code } = usePrism()
return (
<Code language="javascript">
{`<div className="example">
<a href="https://github.com/Bunlong/next-prism">next-prism</a>
</div>`}
</Code>
);
}
Latest version 0.5.0 (2022-12-18):
Details changes for each release are documented in the CHANGELOG.md.
If you think any of the next-prism
can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
We'd love to have your helping hand on contributions to next-prism
by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
You maybe interested.
The MIT License