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