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

Prop	Type	Description
Code	ReactNode	Code component.
highlightAll	function	Use to highlight all code elements.

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`
ABAP - `abap`	ABNF - `abnf`
ActionScript - `actionscript`	Ada - `ada`
Agda - `agda`	AL - `al`
ANTLR4 - `antlr4`, `g4`	Apache Configuration - `apacheconf`
Apex - `apex`	APL - `apl`
AppleScript - `applescript`	AQL - `aql`
Arduino - `arduino`, `ino`	ARFF - `arff`
ARM Assembly - `armasm, arm-asm`	Arturo - `arturo`, `art`
AsciiDoc - `asciidoc`, `adoc`	ASP.NET (C#) - `aspnet`
6502 Assembly - `asm6502`	Atmel AVR Assembly - `asmatmel`
AutoHotkey - `autohotkey`	AutoIt - `autoit`
AviSynth - `avisynth`, `avs`	Avro IDL - `avro-idl`, `avdl`
AWK - `awk`, `gawk`	Bash - `bash`, `sh`, `shell`
BASIC - `basic`	Batch - `batch`
BBcode - `bbcode`, `shortcode`	BBj - `bbj`
Bicep - `bicep`	Birb - `birb`
Bison - `bison`	BNF - `bnf`, `rbnf`
BQN - `bqn`	Brainfuck - `brainfuck`
BrightScript - `brightscript`	Bro - `bro`
BSL (1C:Enterprise) - `bsl`, `oscript`	C - `c`
C# - `csharp`, `cs`, `dotnet`	C++ - `cpp`
CFScript - `cfscript`, `cfc`	ChaiScript - `chaiscript`
CIL - `cil`	Cilk/C - `cilkc`, `cilk-c`
Cilk/C++ - `cilkcpp`, `cilk-cpp`, `cilk`	Clojure - `clojure`
CMake - `cmake`	COBOL - `cobol`
CoffeeScript - `coffeescript`, `coffee`	Concurnas - `concurnas`, `conc`
Content-Security-Policy - `csp`	Cooklang - `cooklang`
Coq - `coq`	Crystal - `crystal`
CSS Extras - `css-extras`	CSV - `csv`
CUE - `cue`	Cypher - `cypher`
D - `d`	Dart - `dart`
DataWeave - `dataweave`	DAX - `dax`
Dhall - `dhall`	Diff - `diff`
Django/Jinja2 - `django`, `jinja2`	DNS zone file - `dns-zone-file`, `dns-zone`
Docker - `docker`, `dockerfile`	DOT (Graphviz) - `dot`, `gv`
EBNF - `ebnf`	EditorConfig - `editorconfig`
Eiffel - `eiffel`	EJS - `ejs`, `eta`
Elixir - `elixir`	Elm - `elm`
Embedded Lua templating - `etlua`	ERB - `erb`
Erlang - `erlang`	Excel Formula - `excel-formula`, `xlsx`, `xls`
F# - `fsharp`	Factor - `factor`
False - `false`	Firestore security rules - `firestore-security-rules`
Flow - `flow`	Fortran - `fortran`
FreeMarker Template Language - `ftl`	GameMaker Language - `gml`, `gamemakerlanguage`
GAP (CAS) - `gap`	G-code - `gcode`
GDScript - `gdscript`	GEDCOM - `gedcom`
gettext - `gettext`, `po`	Gherkin - `gherkin`
Git - `git`	GLSL - `glsl`
GN - `gn`, `gni`	GNU Linker Script - `linker-script`, `ld`
Go - `go`	Go module - `go-module`, `go-mod`
Gradle - `gradle`	GraphQL - `graphql`
Groovy - `groovy`	Haml - `haml`
Handlebars - `handlebars`, `hbs`, `mustache`	Haskell - `haskell`, `hs`
Haxe - `haxe`	HCL - `hcl`
HLSL - `hlsl`	Hoon - `hoon`
HTTP - `http`	HTTP Public-Key-Pins - `hpkp`
HTTP Strict-Transport-Security - `hsts`	IchigoJam - `ichigojam`
Icon - `icon`	ICU Message Format - `icu-message-format`
Idris - `idris`, `idr`	.ignore - `ignore`, `gitignore`, `hgignore`, `npmignore`
Inform 7 - `inform7`	Ini - `ini`
Io - `io`	J - `j`
Java - `java`	JavaDoc - `javadoc`
JavaDoc-like - `javadoclike`	Java stack trace - `javastacktrace`
Jexl - `jexl`	Jolie - `jolie`
JQ - `jq`	JSDoc - `jsdoc`
JS Extras - `js-extras`	JSON - `json`, `webmanifest`
JSON5 - `json5`	JSONP - `jsonp`
JS stack trace - `jsstacktrace`	JS Templates - `js-templates`
Julia - `julia`
Keepalived Configure - `keepalived`	Keyman - `keyman`
Kotlin - `kotlin`, `kt`, `kts`	KuMir (КуМир) - `kumir`, `kum`
Kusto - `kusto`	LaTeX - `latex`, `tex`, `context`
Latte - `latte`	Less - `less`
LilyPond - `lilypond`, `ly`	Liquid - `liquid`
Lisp - `lisp`, `emacs`, `elisp`, `emacs-lisp`	LiveScript - `livescript`
LLVM IR - `llvm`	Log file - `log`
LOLCODE - `lolcode`	Lua - `lua`
Magma (CAS) - `magma`	Makefile - `makefile`
Markdown - `markdown`, `md`	Markup templating - `markup-templating`
Mata - `mata`	MATLAB - `matlab`
MAXScript - `maxscript`	MEL - `mel`
Mermaid - `mermaid`	METAFONT - `metafont`
Mizar - `mizar`	MongoDB - `mongodb`
Monkey - `monkey`	MoonScript - `moonscript, moon`
N1QL - `n1ql`	N4JS - `n4js`, `n4jsd`
Nand To Tetris HDL - `nand2tetris-hdl`	Naninovel Script - `naniscript`, `nani`
NASM - `nasm`	NEON - `neon`
Nevod - `nevod`	nginx - `nginx`
Nim - `nim`	Nix - `nix`
NSIS - `nsis`	Objective-C - `objectivec`, `objc`
OCaml - `ocaml`	Odin - `odin`
OpenCL - `opencl`	OpenQasm - `openqasm`, `qasm`
Oz - `oz`	PARI/GP - `parigp`
Parser - `parser`	Pascal - `pascal`, `objectpascal`
Pascaligo - `pascaligo`	PATROL Scripting Language - `psl`
PC-Axis - `pcaxis`, `px`	PeopleCode - `peoplecode`, `pcode`
Perl - `perl`	PHP - `php`
PHPDoc - `phpdoc`	PHP Extras - `php-extras`
PlantUML - `plant-uml`, `plantuml`	PL/SQL - `plsql`
PowerQuery - `powerquery`, `pq`, `mscript`	PowerShell - `powershell`
Processing - `processing`	Prolog - `prolog`
PromQL - `promql`	.properties - `properties`
Protocol Buffers - `protobuf`	Pug - `pug`
Puppet - `puppet`	Pure - `pure`
PureBasic - `purebasic`, `pbfasm`	PureScript - `purescript`, `purs`
Python - `python`, `py`	Q# - `qsharp`, `qs`
Q (kdb+ database) - `q`	QML - `qml`
Qore - `qore`	R - `r`
Racket - `racket`, `rkt`	Razor C# - `cshtml`, `razor`
React JSX - `jsx`	React TSX - `tsx`
Reason - `reason`	Regex - `regex`
Rego - `rego`	Ren'py - `renpy`, `rpy`
ReScript - `rescript`, `res`	reST (reStructuredText) - `rest`
Rip - `rip`	Roboconf - `roboconf`
Robot Framework - `robotframework`, `robot`	Ruby - `ruby`, `rb`
Rust - `rust`	SAS - `sas`
Sass (Sass) - `sass`	Sass (SCSS) - `scss`
Scala - `scala`	Scheme - `scheme`
Shell session - `shell-session`, `sh-session`, `shellsession`	Smali - `smali`
Smalltalk - `smalltalk`	Smarty - `smarty`
SML - `sml`, `smlnj`	Solidity (Ethereum) - `solidity`, `sol`
Solution file - `solution-file`, `sln`	Soy (Closure Template) - `soy`
SPARQL - `sparql`, `rq`	Splunk SPL - `splunk-spl`
SQF: Status Quo Function (Arma 3) - `sqf`	SQL - `sql`
Squirrel - `squirrel`	Stan - `stan`
Stata Ado - `stata`	Structured Text (IEC 61131-3) - `iecst`
Stylus - `stylus`	SuperCollider - `supercollider`, `sclang`
Swift - `swift`	Systemd configuration file - `systemd`
T4 templating - `t4-templating`	T4 Text Templates (C#) - `t4-cs`, `t4`
T4 Text Templates (VB) - `t4-vb`	TAP - `tap`
Tcl - `tcl`	Template Toolkit 2 - `tt2`
Textile - `textile`	TOML - `toml`
Tremor - `tremor`, `trickle`, `troy`	Turtle - `turtle`, `trig`
Twig - `twig`	Twig - `twig`
TypoScript - `typoscript`, `tsconfig`	UnrealScript - `unrealscript`, `uscript`, `uc`
UO Razor Script - `uorazor`	URI - `uri`, `url`
V - `v`	Vala - `vala`
VB.Net - `vbnet`	Velocity - `velocity`
Verilog - `verilog`	VHDL - `vhdl`
vim - `vim`	Visual Basic - `visual-basic`, `vb`, `vba`
WarpScript - `warpscript`	WebAssembly - `wasm`
Web IDL - `web-idl`, `webidl`	WGSL - `wgsl`
Wiki markup - `wiki`	Wolfram language - `wolfram`, `mathematica`, `nb`, `wl`
Wren - `wren`	Xeora - `xeora`, `xeoracube`
XML doc (.net) - `xml-doc`	Xojo (REALbasic) - `xojo`
XQuery - `xquery`	YAML - `yaml`, `yml`
YANG - `yang`	Zig - `zig`

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

_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