React Highlight Syntax is a React component that highlights syntax in a code block.
npm install react-highlight-syntaxhttps://react-highlight-syntax.vercel.app/
React Highlight Syntax is a React component that highlights syntax in a code block.
``bashnpm
npm install --save react-highlight-syntax
Basic Usage
jsx
import React from 'react';
import ReactHighlightSyntax from 'react-highlight-syntax';const code =
const foo = 'bar';;const App = () => (
return (
theme={'Base16Darcula'}
copy={true}
copyBtnTheme={'Dark'}
>
{code}
);
);
export default App;
`Isolate on to own component
tsx
import React, { FC } from 'react';import ReactHighlightSyntax, {
Language,
Theme,
CopyBtnTheme,
} from 'react-highlight-syntax';
type Props = {
language: Language;
theme?: Theme;
copy?: boolean;
copyBtnTheme?: CopyBtnTheme;
children: string;
};
const SyntaxHighlighter: FC = (props) => {
const {
language,
theme = 'Base16Darcula',
copy = true,
copyBtnTheme = 'Dark',
children,
} = props;
return (
theme={theme}
copy={copy}
copyBtnTheme={copyBtnTheme}
>
{children}
);
};
export default React.memo(SyntaxHighlighter);
`Props
-
: The tag name of the code block, default: div.
- language: the language to highlight code in. Available options are here.
- theme: the theme to use for highlighting. Available options are here.
- copy: whether to show the copy button, default: false.
- copyBtnTheme: the theme to use for the copy button. Available options are Light and Dark, default: Light`.- Properties
- 1CEnterprise
- ARMAssembly
- AVRAssembly
- ActionScript
- Ada
- AngelScript
- ApacheAccessLog
- ApacheConfig
- AppleScript
- ArcGISArcade
- Arduino
- AsciiDoc
- AspectJ
- AugmentedBackusNaurForm
- AutoHotkey
- AutoIt
- Awk
- BASIC
- BackusNaurForm
- Bash
- BatchFile(DOS)
- Brainfuck
- C
- C#
- C++
- CAL
- CMake
- CSP
- CSS
- CacheObjectScript
- CapnProto
- Ceylon
- Clean
- Clojure
- ClojureREPL
- CoffeeScript
- Coq
- Crystal
- D
- DNSZone
- Dart
- Delphi
- DeviceTree
- Diff
- Django
- Dockerfile
- Dust
- ERB(EmbeddedRuby)
- Elixir
- Elm
- Erlang
- ErlangREPL
- ExcelFormulae
- ExtendedBackusNaurForm
- F#
- FIX
- Flix
- Fortran
- Gcode(ISO6983)
- GAMS
- GAUSS
- GLSL
- GML
- Gherkin
- Go
- Golo
- Gradle
- GraphQL
- Groovy
- HAML
- HSP
- HTML
- HTTP
- Handlebars
- Haskell
- Haxe
- Hy
- INI
- IRPF90
- ISBL
- Inform7
- IntelX86Assembly
- JBossCLI
- JSON
- Java
- JavaScript
- Julia
- JuliaREPL
- Kotlin
- LDIF
- LLVMIR
- LSL(LindenScriptingLanguage)
- LaTeX
- Lasso
- Leaf
- Less
- Lisp
- LiveCode
- LiveScript
- Lua
- MEL
- MIPSAssembly
- Makefile
- Markdown
- Matlab
- Maxima
- Mercury
- MicrotikRouterOSScript
- Mizar
- Mojolicious
- Monkey
- MoonScript
- N1QL
- NSIS
- NestedText
- NginxConfig
- Nim
- Nix
- NodeREPL
- OCaml
- ObjectiveC
- OpenSCAD
- OracleRulesLanguage
- Oxygene
- PHP
- PHPTemplate
- PLpgSQL
- PacketFilterConfig
- Parser3
- Perl
- PlainText
- Pony
- PostgreSQL
- PowerShell
- Processing
- Prolog
- ProtocolBuffers
- Puppet
- PureBASIC
- Python
- PythonREPL
- PythonProfiler
- Q
- QML
- R
- ReasonML
- RenderManRIB
- RenderManRSL
- Roboconf
- Ruby
- Rust
- SAS
- SCSS
- SML(StandardML)
- SQF
- SQL
- STEPPart21
- Scala
- Scheme
- Scilab
- ShellSession
- Smali
- Smalltalk
- Stan
- Stata
- Stylus
- SubUnit
- Swift
- TOML
- TP
- TaggerScript
- Tcl
- TestAnythingProtocol
- Thrift
- Twig
- TypeScript
- VBScript
- VBScriptInHTML
- VHDL
- Vala
- Verilog
- VimScript
- VisualBasicNET
- WebAssembly
- WolframLanguage
- Wren
- X++
- XL
- XML
- XQuery
- YAML
- Zephir
- Crmsh
- Dsconfig
- 1cLight
- A11yDark
- A11yLight
- Agate
- AnOldHope
- Androidstudio
- ArduinoLight
- Arta
- Ascetic
- AtomOneDarkReasonable
- AtomOneDark
- AtomOneLight
- Base163024
- Base16Apathy
- Base16Apprentice
- Base16Ashes
- Base16AtelierCaveLight
- Base16AtelierCave
- Base16AtelierDuneLight
- Base16AtelierDune
- Base16AtelierEstuaryLight
- Base16AtelierEstuary
- Base16AtelierForestLight
- Base16AtelierForest
- Base16AtelierHeathLight
- Base16AtelierHeath
- Base16AtelierLakesideLight
- Base16AtelierLakeside
- Base16AtelierPlateauLight
- Base16AtelierPlateau
- Base16AtelierSavannaLight
- Base16AtelierSavanna
- Base16AtelierSeasideLight
- Base16AtelierSeaside
- Base16AtelierSulphurpoolLight
- Base16AtelierSulphurpool
- Base16Atlas
- Base16Bespin
- Base16BlackMetalBathory
- Base16BlackMetalBurzum
- Base16BlackMetalDarkFuneral
- Base16BlackMetalGorgoroth
- Base16BlackMetalImmortal
- Base16BlackMetalKhold
- Base16BlackMetalMarduk
- Base16BlackMetalMayhem
- Base16BlackMetalNile
- Base16BlackMetalVenom
- Base16BlackMetal
- Base16Brewer
- Base16Bright
- Base16Brogrammer
- Base16BrushTreesDark
- Base16BrushTrees
- Base16Chalk
- Base16Circus
- Base16ClassicDark
- Base16ClassicLight
- Base16Codeschool
- Base16Colors
- Base16Cupcake
- Base16Cupertino
- Base16Danqing
- Base16Darcula
- Base16DarkViolet
- Base16Darkmoss
- Base16Darktooth
- Base16Decaf
- Base16DefaultDark
- Base16DefaultLight
- Base16Dirtysea
- Base16Dracula
- Base16EdgeDark
- Base16EdgeLight
- Base16Eighties
- Base16Embers
- Base16EquilibriumDark
- Base16EquilibriumGrayDark
- Base16EquilibriumGrayLight
- Base16EquilibriumLight
- Base16Espresso
- Base16EvaDim
- Base16Eva
- Base16Flat
- Base16Framer
- Base16FruitSoda
- Base16Gigavolt
- Base16Github
- Base16GoogleDark
- Base16GoogleLight
- Base16GrayscaleDark
- Base16GrayscaleLight
- Base16GreenScreen
- Base16GruvboxDarkHard
- Base16GruvboxDarkMedium
- Base16GruvboxDarkPale
- Base16GruvboxDarkSoft
- Base16GruvboxLightHard
- Base16GruvboxLightMedium
- Base16GruvboxLightSoft
- Base16Hardcore
- Base16Harmonic16Dark
- Base16Harmonic16Light
- Base16HeetchDark
- Base16HeetchLight
- Base16Helios
- Base16Hopscotch
- Base16HorizonDark
- Base16HorizonLight
- Base16HumanoidDark
- Base16HumanoidLight
- Base16IaDark
- Base16IaLight
- Base16IcyDark
- Base16IrBlack
- Base16Isotope
- Base16Kimber
- Base16LondonTube
- Base16Macintosh
- Base16Marrakesh
- Base16Materia
- Base16MaterialDarker
- Base16MaterialLighter
- Base16MaterialPalenight
- Base16MaterialVivid
- Base16Material
- Base16MellowPurple
- Base16MexicoLight
- Base16Mocha
- Base16Monokai
- Base16Nebula
- Base16Nord
- Base16Nova
- Base16Ocean
- Base16Oceanicnext
- Base16OneLight
- Base16Onedark
- Base16OutrunDark
- Base16PapercolorDark
- Base16PapercolorLight
- Base16Paraiso
- Base16Pasque
- Base16Phd
- Base16Pico
- Base16Pop
- Base16Porple
- Base16Qualia
- Base16Railscasts
- Base16Rebecca
- Base16RosPineDawn
- Base16RosPineMoon
- Base16RosPine
- Base16Sagelight
- Base16Sandcastle
- Base16SetiUi
- Base16Shapeshifter
- Base16SilkDark
- Base16SilkLight
- Base16Snazzy
- Base16SolarFlareLight
- Base16SolarFlare
- Base16SolarizedDark
- Base16SolarizedLight
- Base16Spacemacs
- Base16Summercamp
- Base16SummerfruitDark
- Base16SummerfruitLight
- Base16SynthMidnightTerminalDark
- Base16SynthMidnightTerminalLight
- Base16Tango
- Base16Tender
- Base16TomorrowNight
- Base16Tomorrow
- Base16Twilight
- Base16UnikittyDark
- Base16UnikittyLight
- Base16Vulcan
- Base16Windows10Light
- Base16Windows10
- Base16Windows95Light
- Base16Windows95
- Base16WindowsHighContrastLight
- Base16WindowsHighContrast
- Base16WindowsNtLight
- Base16WindowsNt
- Base16Woodland
- Base16XcodeDusk
- Base16Zenburn
- CodepenEmbed
- ColorBrewer
- CybertopiaCherry
- CybertopiaDimmer
- CybertopiaIcecap
- CybertopiaSaturated
- Dark
- Default
- Devibeans
- Docco
- Far
- Felipec
- Foundation
- GithubDarkDimmed
- GithubDark
- Github
- Gml
- Googlecode
- GradientDark
- GradientLight
- Grayscale
- Hybrid
- Idea
- IntellijLight
- IrBlack
- IsblEditorDark
- IsblEditorLight
- KimbieDark
- KimbieLight
- Lightfair
- Lioshi
- Magula
- MonoBlue
- MonokaiSublime
- Monokai
- NightOwl
- NnfxDark
- NnfxLight
- Nord
- Obsidian
- PandaSyntaxDark
- PandaSyntaxLight
- ParaisoDark
- ParaisoLight
- Purebasic
- QtcreatorDark
- QtcreatorLight
- Rainbow
- RosePineDawn
- RosePineMoon
- RosePine
- Routeros
- SchoolBook
- ShadesOfPurple
- Srcery
- StackoverflowDark
- StackoverflowLight
- Sunburst
- TokyoNightDark
- TokyoNightLight
- TomorrowNightBlue
- TomorrowNightBright
- Vs
- Vs2015
- Xcode
- Xt256
react-highlight-syntax is licensed under the MIT License.
Created with ♥ by @MKAbuMattar.