Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
next-prism
Advanced tools
Readme
A lightweight, robust, and elegant syntax highlighting component for your next React apps.
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
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>
)
}
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>
</>
)
}
Prop | Type | Description |
---|---|---|
Code | ReactNode | Code component. |
highlightAll | function | Use to highlight all code elements. |
Prop | Type | Default | Require | Description |
---|---|---|---|---|
children || content | ReactNode | β | The content code | |
language | string | β | The supported language |
coy | dark |
funky | okaidia |
prism | solarizedlight |
tomorrow | twilight |
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 |
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 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>
)
}
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>
);
}
Latest version 0.5.0 (2022-12-18):
Details changes for each release are documented in the CHANGELOG.md.
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.
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:
Bunlong |
You maybe interested.
FAQs
A lightweight, robust, and elegant syntax highlighting component for your next React apps.
The npm package next-prism receives a total of 4 weekly downloads. As such, next-prism popularity was classified as not popular.
We found that next-prism demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Β It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.