{"id":15870166,"url":"https://github.com/mkabumattar/react-highlight-syntax","last_synced_at":"2025-03-16T03:30:27.937Z","repository":{"id":58663293,"uuid":"532984501","full_name":"MKAbuMattar/react-highlight-syntax","owner":"MKAbuMattar","description":"React Highlight Syntax is a React component that highlights syntax in a code block.","archived":false,"fork":false,"pushed_at":"2024-08-05T20:14:22.000Z","size":1261,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T23:11:12.778Z","etag":null,"topics":["highlight","highlighter","highlightjs","npm","package","pnpm","react","syntax","typescript","yarn"],"latest_commit_sha":null,"homepage":"https://react-highlight-syntax.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MKAbuMattar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-05T16:47:53.000Z","updated_at":"2024-08-05T20:11:39.000Z","dependencies_parsed_at":"2024-11-14T13:22:36.947Z","dependency_job_id":"b1c15e3a-3362-47f4-bdcb-0993a87ab4b9","html_url":"https://github.com/MKAbuMattar/react-highlight-syntax","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.07407407407407407,"last_synced_commit":"4a4e190c3998be636e54bb57f1e36774c411f70e"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Freact-highlight-syntax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Freact-highlight-syntax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Freact-highlight-syntax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MKAbuMattar%2Freact-highlight-syntax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MKAbuMattar","download_url":"https://codeload.github.com/MKAbuMattar/react-highlight-syntax/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822312,"owners_count":20353496,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlight","highlighter","highlightjs","npm","package","pnpm","react","syntax","typescript","yarn"],"created_at":"2024-10-06T00:04:55.455Z","updated_at":"2025-03-16T03:30:27.388Z","avatar_url":"https://github.com/MKAbuMattar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Highlight Syntax](./assets/devicons-react-original.svg)\n\n# React Highlight Syntax\n\n[https://react-highlight-syntax.vercel.app/](https://react-highlight-syntax.vercel.app/)\n\n***React Highlight Syntax*** is a React component that highlights syntax in a code block.\n\n## Installation\n\n```bash\n# npm\nnpm install --save react-highlight-syntax\n\n# yarn\nyarn add react-highlight-syntax\n\n# pnpm\npnpm add react-highlight-syntax\n```\n\n## Basic Usage\n\n```jsx\nimport React from 'react';\nimport ReactHighlightSyntax from 'react-highlight-syntax';\n\nconst code = `const foo = 'bar';`;\n\nconst App = () =\u003e (\n  return (\n  \u003cReactHighlightSyntax \n    language={'JavaScript'}\n    theme={'Base16Darcula'}\n    copy={true}\n    copyBtnTheme={'Dark'}\n  \u003e\n    {code}\n  \u003c/ReactHighlightSyntax\u003e\n  );\n);\n\nexport default App;\n```\n\n## Isolate on to own component\n\n```tsx\nimport React, { FC } from 'react';\n\nimport ReactHighlightSyntax, {\n  Language,\n  Theme,\n  CopyBtnTheme,\n} from 'react-highlight-syntax';\n\ntype Props = {\n  language: Language;\n  theme?: Theme;\n  copy?: boolean;\n  copyBtnTheme?: CopyBtnTheme;\n  children: string;\n};\n\nconst SyntaxHighlighter: FC\u003cProps\u003e = (props) =\u003e {\n  const {\n    language,\n    theme = 'Base16Darcula',\n    copy = true,\n    copyBtnTheme = 'Dark',\n    children,\n  } = props;\n  return (\n    \u003cReactHighlightSyntax\n      language={language}\n      theme={theme}\n      copy={copy}\n      copyBtnTheme={copyBtnTheme}\n    \u003e\n      {children}\n    \u003c/ReactHighlightSyntax\u003e\n  );\n};\n\nexport default React.memo(SyntaxHighlighter);\n```\n\n## Props\n\n- `tag`: The tag name of the code block, default: `div`.\n- `language`: the language to highlight code in. Available options are [here](#supported-languages).\n- `theme`: the theme to use for highlighting. Available options are [here](#supported-themes).\n- `copy`: whether to show the copy button, default: `false`.\n- `copyBtnTheme`: the theme to use for the copy button. Available options are `Light` and `Dark`, default: `Light`.\n\n### Supported Languages\n\n\u003cdetails\u003e\n\n- Properties\n- 1CEnterprise\n- ARMAssembly\n- AVRAssembly\n- ActionScript\n- Ada\n- AngelScript\n- ApacheAccessLog\n- ApacheConfig\n- AppleScript\n- ArcGISArcade\n- Arduino\n- AsciiDoc\n- AspectJ\n- AugmentedBackusNaurForm\n- AutoHotkey\n- AutoIt\n- Awk\n- BASIC\n- BackusNaurForm\n- Bash\n- BatchFile(DOS)\n- Brainfuck\n- C\n- C#\n- C++\n- CAL\n- CMake\n- CSP\n- CSS\n- CacheObjectScript\n- CapnProto\n- Ceylon\n- Clean\n- Clojure\n- ClojureREPL\n- CoffeeScript\n- Coq\n- Crystal\n- D\n- DNSZone\n- Dart\n- Delphi\n- DeviceTree\n- Diff\n- Django\n- Dockerfile\n- Dust\n- ERB(EmbeddedRuby)\n- Elixir\n- Elm\n- Erlang\n- ErlangREPL\n- ExcelFormulae\n- ExtendedBackusNaurForm\n- F#\n- FIX\n- Flix\n- Fortran\n- Gcode(ISO6983)\n- GAMS\n- GAUSS\n- GLSL\n- GML\n- Gherkin\n- Go\n- Golo\n- Gradle\n- GraphQL\n- Groovy\n- HAML\n- HSP\n- HTML\n- HTTP\n- Handlebars\n- Haskell\n- Haxe\n- Hy\n- INI\n- IRPF90\n- ISBL\n- Inform7\n- IntelX86Assembly\n- JBossCLI\n- JSON\n- Java\n- JavaScript\n- Julia\n- JuliaREPL\n- Kotlin\n- LDIF\n- LLVMIR\n- LSL(LindenScriptingLanguage)\n- LaTeX\n- Lasso\n- Leaf\n- Less\n- Lisp\n- LiveCode\n- LiveScript\n- Lua\n- MEL\n- MIPSAssembly\n- Makefile\n- Markdown\n- Matlab\n- Maxima\n- Mercury\n- MicrotikRouterOSScript\n- Mizar\n- Mojolicious\n- Monkey\n- MoonScript\n- N1QL\n- NSIS\n- NestedText\n- NginxConfig\n- Nim\n- Nix\n- NodeREPL\n- OCaml\n- ObjectiveC\n- OpenSCAD\n- OracleRulesLanguage\n- Oxygene\n- PHP\n- PHPTemplate\n- PLpgSQL\n- PacketFilterConfig\n- Parser3\n- Perl\n- PlainText\n- Pony\n- PostgreSQL\n- PowerShell\n- Processing\n- Prolog\n- ProtocolBuffers\n- Puppet\n- PureBASIC\n- Python\n- PythonREPL\n- PythonProfiler\n- Q\n- QML\n- R\n- ReasonML\n- RenderManRIB\n- RenderManRSL\n- Roboconf\n- Ruby\n- Rust\n- SAS\n- SCSS\n- SML(StandardML)\n- SQF\n- SQL\n- STEPPart21\n- Scala\n- Scheme\n- Scilab\n- ShellSession\n- Smali\n- Smalltalk\n- Stan\n- Stata\n- Stylus\n- SubUnit\n- Swift\n- TOML\n- TP\n- TaggerScript\n- Tcl\n- TestAnythingProtocol\n- Thrift\n- Twig\n- TypeScript\n- VBScript\n- VBScriptInHTML\n- VHDL\n- Vala\n- Verilog\n- VimScript\n- VisualBasicNET\n- WebAssembly\n- WolframLanguage\n- Wren\n- X++\n- XL\n- XML\n- XQuery\n- YAML\n- Zephir\n- Crmsh\n- Dsconfig\n\n\u003c/details\u003e\n\n### Supported Themes\n\n\u003cdetails\u003e\n\n- A11yDark\n- A11yLight\n- Agate\n- AnOldHope\n- Androidstudio\n- ArduinoLight\n- Arta\n- Ascetic\n- AtomOneDarkReasonable\n- AtomOneDark\n- AtomOneLight\n- Base163024\n- Base16Apathy\n- Base16Apprentice\n- Base16Ashes\n- Base16AtelierCaveLight\n- Base16AtelierCave\n- Base16AtelierDuneLight\n- Base16AtelierDune\n- Base16AtelierEstuaryLight\n- Base16AtelierEstuary\n- Base16AtelierForestLight\n- Base16AtelierForest\n- Base16AtelierHeathLight\n- Base16AtelierHeath\n- Base16AtelierLakesideLight\n- Base16AtelierLakeside\n- Base16AtelierPlateauLight\n- Base16AtelierPlateau\n- Base16AtelierSavannaLight\n- Base16AtelierSavanna\n- Base16AtelierSeasideLight\n- Base16AtelierSeaside\n- Base16AtelierSulphurpoolLight\n- Base16AtelierSulphurpool\n- Base16Atlas\n- Base16Bespin\n- Base16BlackMetalBathory\n- Base16BlackMetalBurzum\n- Base16BlackMetalDarkFuneral\n- Base16BlackMetalGorgoroth\n- Base16BlackMetalImmortal\n- Base16BlackMetalKhold\n- Base16BlackMetalMarduk\n- Base16BlackMetalMayhem\n- Base16BlackMetalNile\n- Base16BlackMetalVenom\n- Base16BlackMetal\n- Base16Brewer\n- Base16Bright\n- Base16Brogrammer\n- Base16BrushTreesDark\n- Base16BrushTrees\n- Base16Chalk\n- Base16Circus\n- Base16ClassicDark\n- Base16ClassicLight\n- Base16Codeschool\n- Base16Colors\n- Base16Cupcake\n- Base16Cupertino\n- Base16Danqing\n- Base16Darcula\n- Base16DarkViolet\n- Base16Darkmoss\n- Base16Darktooth\n- Base16Decaf\n- Base16DefaultDark\n- Base16DefaultLight\n- Base16Dirtysea\n- Base16Dracula\n- Base16EdgeDark\n- Base16EdgeLight\n- Base16Eighties\n- Base16Embers\n- Base16EquilibriumDark\n- Base16EquilibriumGrayDark\n- Base16EquilibriumGrayLight\n- Base16EquilibriumLight\n- Base16Espresso\n- Base16EvaDim\n- Base16Eva\n- Base16Flat\n- Base16Framer\n- Base16FruitSoda\n- Base16Gigavolt\n- Base16Github\n- Base16GoogleDark\n- Base16GoogleLight\n- Base16GrayscaleDark\n- Base16GrayscaleLight\n- Base16GreenScreen\n- Base16GruvboxDarkHard\n- Base16GruvboxDarkMedium\n- Base16GruvboxDarkPale\n- Base16GruvboxDarkSoft\n- Base16GruvboxLightHard\n- Base16GruvboxLightMedium\n- Base16GruvboxLightSoft\n- Base16Hardcore\n- Base16Harmonic16Dark\n- Base16Harmonic16Light\n- Base16HeetchDark\n- Base16HeetchLight\n- Base16Helios\n- Base16Hopscotch\n- Base16HorizonDark\n- Base16HorizonLight\n- Base16HumanoidDark\n- Base16HumanoidLight\n- Base16IaDark\n- Base16IaLight\n- Base16IcyDark\n- Base16IrBlack\n- Base16Isotope\n- Base16Kimber\n- Base16LondonTube\n- Base16Macintosh\n- Base16Marrakesh\n- Base16Materia\n- Base16MaterialDarker\n- Base16MaterialLighter\n- Base16MaterialPalenight\n- Base16MaterialVivid\n- Base16Material\n- Base16MellowPurple\n- Base16MexicoLight\n- Base16Mocha\n- Base16Monokai\n- Base16Nebula\n- Base16Nord\n- Base16Nova\n- Base16Ocean\n- Base16Oceanicnext\n- Base16OneLight\n- Base16Onedark\n- Base16OutrunDark\n- Base16PapercolorDark\n- Base16PapercolorLight\n- Base16Paraiso\n- Base16Pasque\n- Base16Phd\n- Base16Pico\n- Base16Pop\n- Base16Porple\n- Base16Qualia\n- Base16Railscasts\n- Base16Rebecca\n- Base16RosPineDawn\n- Base16RosPineMoon\n- Base16RosPine\n- Base16Sagelight\n- Base16Sandcastle\n- Base16SetiUi\n- Base16Shapeshifter\n- Base16SilkDark\n- Base16SilkLight\n- Base16Snazzy\n- Base16SolarFlareLight\n- Base16SolarFlare\n- Base16SolarizedDark\n- Base16SolarizedLight\n- Base16Spacemacs\n- Base16Summercamp\n- Base16SummerfruitDark\n- Base16SummerfruitLight\n- Base16SynthMidnightTerminalDark\n- Base16SynthMidnightTerminalLight\n- Base16Tango\n- Base16Tender\n- Base16TomorrowNight\n- Base16Tomorrow\n- Base16Twilight\n- Base16UnikittyDark\n- Base16UnikittyLight\n- Base16Vulcan\n- Base16Windows10Light\n- Base16Windows10\n- Base16Windows95Light\n- Base16Windows95\n- Base16WindowsHighContrastLight\n- Base16WindowsHighContrast\n- Base16WindowsNtLight\n- Base16WindowsNt\n- Base16Woodland\n- Base16XcodeDusk\n- Base16Zenburn\n- CodepenEmbed\n- ColorBrewer\n- Dark\n- Default\n- Devibeans\n- Docco\n- Far\n- Felipec\n- Foundation\n- GithubDarkDimmed\n- GithubDark\n- Github\n- Gml\n- Googlecode\n- GradientDark\n- GradientLight\n- Grayscale\n- Hybrid\n- Idea\n- IntellijLight\n- IrBlack\n- IsblEditorDark\n- IsblEditorLight\n- KimbieDark\n- KimbieLight\n- Lightfair\n- Lioshi\n- Magula\n- MonoBlue\n- MonokaiSublime\n- Monokai\n- NightOwl\n- NnfxDark\n- NnfxLight\n- Nord\n- Obsidian\n- PandaSyntaxDark\n- PandaSyntaxLight\n- ParaisoDark\n- ParaisoLight\n- Purebasic\n- QtcreatorDark\n- QtcreatorLight\n- Rainbow\n- Routeros\n- SchoolBook\n- ShadesOfPurple\n- Srcery\n- StackoverflowDark\n- StackoverflowLight\n- Sunburst\n- TokyoNightDark\n- TokyoNightLight\n- TomorrowNightBlue\n- TomorrowNightBright\n- Vs\n- Vs2015\n- Xcode\n- Xt256\n\n\u003c/details\u003e\n\n## License\n\nreact-highlight-syntax is licensed under the [MIT License](./LICENSE).\n\nCreated with ♥ by [@MKAbuMattar](https://github.com/MKAbuMattar).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkabumattar%2Freact-highlight-syntax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkabumattar%2Freact-highlight-syntax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkabumattar%2Freact-highlight-syntax/lists"}