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.