next-prism

next-prism

A lightweight, robust, and elegant syntax highlighting component for your next React apps.

🎁 Features

• Themes
• Languages

🔧 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

import { usePrism } from 'next-prism'

// Import a theme.css
import 'next-prism/themes/twilight.css'

export default function App() {
  const { Code } = usePrism()

  return (
    <>
      <Code language='javascript'>
      {`<div className="example">
  {Math.random()}
</div>`}
      </Code>
    </>
  )
}

Props

Prop	Type	Default	Require	Description
children || content	ReactNode		❌	The content code
language	string		❌	The supported language

Themes

• coy
• dark
• funky
• okaidia
• prism
• solarizedlight
• tomorrow
• twilight

Languages

Markup - markup, html, xml, svg, mathml, ssml, atom, rss	CSS - css
JavaScript - javascript, js	C-like - clike

📜 Changelog

Latest version 0.1.0 (2022-12-09):

• Add themes and languages

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

Bunlong

👨‍👩‍👦 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.

⚖️ License

The MIT License