Next-prism NPM

next-prism

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

npm bundle size

🎁 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.