Skip to content
/ next-prism Public

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

License

MIT license
5 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Bunlong/next-prism

BranchesTags

Repository files navigation

next-prism

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

NPM npm bundle size JavaScript Style Guide

🎁 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
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 License: MIT

About

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

Topics

react javascript create-react-app prism reactjs nextjs prismjs hightlight gatsbyjs nextjs-plugin gatsbyjs-plugin react-prism next-prism

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

5 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases 5

v0.5.0 Latest
Dec 18, 2022
+ 4 releases

Packages

No packages published

Languages