Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bunlong/next-prism

A lightweight, robust, and elegant syntax highlighting component for your next React apps.
https://github.com/bunlong/next-prism

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

Last synced: 11 months ago
JSON representation

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

Awesome Lists containing this project

README 

          
# next-prism



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



[![NPM](https://img.shields.io/npm/v/next-prism.svg)](https://www.npmjs.com/package/next-prism) ![npm bundle size](https://img.shields.io/bundlephobia/min/next-prism) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## 🎁 Features



* Themes

* Languages

* Plugins



## πŸ”§ Install



next-prism is available on npm. It can be installed with the following command:



```js

npm install next-prism --save

```



next-prism is available on yarn as well. It can be installed with the following command:



```js

yarn add next-prism

```



## πŸ’‘ Usage



### πŸŽ€ Code



```javascript

import { usePrism } from 'next-prism'



// Import a theme.css

import 'next-prism/themes/tomorrow.css'



export default function App() {

  const { Code } = usePrism()



  return (

    

      {`


  {Math.random()}

`}

    

  )

}

```



### πŸŽ€ highlightAll



```javascript

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 (

    <>

       setCount(count + 1)}>Click me

      
You clicked {count} times


      {`
You clicked ${count} times


`}


    >

  )

}

```



## 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.



```javascript

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 (

    

      {`


  {Math.random()}

`}

    

  )

}

```



### Show Invisibles



Show hidden characters such as tabs and line breaks.



```javascript

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 (

    

      {`


{Math.random()}

`}

    

  )

}

```



### Autolinker



Converts URLs and emails in code to clickable links. Parses Markdown links in comments.



```javascript

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 (

    

      {`


  next-prism

`}

    

  );

}

```



## πŸ“œ Changelog



Latest version 0.5.0 (2022-12-18):



  * Add autolinker plugins



Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-prism/blob/master/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](https://github.com/reactpatterns/reactpatterns) – React patterns & techniques to use in development for React Developer.

* [React Papaparse](https://github.com/Bunlong/react-papaparse) – The fastest in-browser CSV (or delimited text) parser for React.

* [Next QRCode](https://github.com/bunlong/next-qrcode) – React hooks for generating QR code for your next React apps.

* [Next Share](https://github.com/Bunlong/next-share) – Social media share buttons for your next React apps.

* [Next Time Ago](https://github.com/Bunlong/next-time-ago) – A lightweight tiny time-ago component for your next React apps.



## βš–οΈ License



The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)