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

Name		Name	Last commit message	Last commit date
Latest commit History 63 Commits
plugins		plugins
src		src
supports		supports
themes		themes
.babelrc		.babelrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
jest.config.js		jest.config.js
package.json		package.json
rollup.config.js		rollup.config.js
setup.ts		setup.ts
tsconfig.jest.json		tsconfig.jest.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

next-prism

🎁 Features

🔧 Install

💡 Usage

🎀 Code

🎀 highlightAll

usePrism Return Object

Code Props

Themes

Languages

Plugins

Line Numbers

Show Invisibles

Autolinker

📜 Changelog

❗ Issues

🌟 Contribution

🏆 Contributors

👨‍👩‍👦 Advertisement

⚖️ License

About

Uh oh!

Releases 5

Packages

Uh oh!

Languages

License

Bunlong/next-prism

Folders and files

Latest commit

History

Repository files navigation

next-prism

🎁 Features

🔧 Install

💡 Usage

🎀 Code

🎀 highlightAll

usePrism Return Object

Code Props

Themes

Languages

Plugins

Line Numbers

Show Invisibles

Autolinker

📜 Changelog

❗ Issues

🌟 Contribution

🏆 Contributors

👨‍👩‍👦 Advertisement

⚖️ License

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases 5

Packages 0

Uh oh!

Languages

Packages