next-prism
v0.5.0
Published
A lightweight, robust, and elegant syntax highlighting component for your next React apps.
Downloads
79
Maintainers
Readme
next-prism
A lightweight, robust, and elegant syntax highlighting component for your next React apps.
🎁 Features
- Themes
- Languages
- Plugins
🔧 Install
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
💡 Usage
🎀 Code
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>
)
}
🎀 highlightAll
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
Code Props
Themes
Languages
Plugins
Line Numbers
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 Invisibles
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>
)
}
Autolinker
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>
);
}
📜 Changelog
Latest version 0.5.0 (2022-12-18):
- Add autolinker plugins
Details changes for each release are documented in the CHANGELOG.md.
❗ Issues
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.
🌟 Contribution
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:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
🏆 Contributors
👨👩👦 Advertisement
You maybe interested.
- React Patterns – React patterns & techniques to use in development for React Developer.
- React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
- Next QRCode – React hooks for generating QR code for your next React apps.
- Next Share – Social media share buttons for your next React apps.
- Next Time Ago – A lightweight tiny time-ago component for your next React apps.