{"id":13422219,"url":"https://github.com/react-syntax-highlighter/react-syntax-highlighter","last_synced_at":"2026-02-27T00:11:27.550Z","repository":{"id":37844596,"uuid":"50480643","full_name":"react-syntax-highlighter/react-syntax-highlighter","owner":"react-syntax-highlighter","description":"syntax highlighting component for react with prismjs or highlightjs ast using inline styles","archived":false,"fork":false,"pushed_at":"2024-10-31T02:06:41.000Z","size":49708,"stargazers_count":4362,"open_issues_count":150,"forks_count":298,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T02:51:28.737Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/","language":"JavaScript","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/react-syntax-highlighter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"conorhastings"}},"created_at":"2016-01-27T04:05:41.000Z","updated_at":"2025-05-11T19:36:47.000Z","dependencies_parsed_at":"2023-02-08T04:16:03.121Z","dependency_job_id":"557e1ee9-317c-4d60-89bd-5b56cdea28d0","html_url":"https://github.com/react-syntax-highlighter/react-syntax-highlighter","commit_stats":{"total_commits":650,"total_committers":74,"mean_commits":8.783783783783784,"dds":0.5015384615384615,"last_synced_commit":"842b45ba9328cc232cf6d085e2e6db97291b797d"},"previous_names":["conorhastings/react-syntax-highlighter"],"tags_count":122,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-syntax-highlighter%2Freact-syntax-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-syntax-highlighter%2Freact-syntax-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-syntax-highlighter%2Freact-syntax-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-syntax-highlighter%2Freact-syntax-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-syntax-highlighter","download_url":"https://codeload.github.com/react-syntax-highlighter/react-syntax-highlighter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253672737,"owners_count":21945483,"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":[],"created_at":"2024-07-30T23:00:39.537Z","updated_at":"2026-02-27T00:11:27.537Z","avatar_url":"https://github.com/react-syntax-highlighter.png","language":"JavaScript","funding_links":["https://github.com/sponsors/conorhastings"],"categories":["JavaScript","Others","UI Components","前端常见效果库"],"sub_categories":["Form Components","代码高亮"],"readme":"## React Syntax Highlighter\n\n[![Actions Status](https://github.com/react-syntax-highlighter/react-syntax-highlighter/workflows/Node%20CI/badge.svg)](https://github.com/conorhastings/react-syntax-highlighter/actions)\n[![npm](https://img.shields.io/npm/dm/react-syntax-highlighter.svg?style=flat-square)](https://www.npmjs.com/package/react-syntax-highlighter)\n\n\u003c!-- [![codecov](https://codecov.io/gh/conorhastings/react-syntax-highlighter/branch/master/graph/badge.svg)](https://codecov.io/gh/conorhastings/react-syntax-highlighter) --\u003e\n\nSyntax highlighting component for `React` using the seriously super amazing \u003ca href=\"https://github.com/wooorm/lowlight\"\u003elowlight\u003c/a\u003e and \u003ca href=\"https://github.com/wooorm/refractor\"\u003erefractor\u003c/a\u003e by \u003ca href=\"https://github.com/wooorm\"\u003ewooorm\u003c/a\u003e\n\nCheck out a small demo \u003ca href=\"https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/\"\u003ehere\u003c/a\u003e and see the component in action highlighting the generated test code \u003ca href=\"https://conorhastings.github.io/redux-test-recorder/demo/\"\u003ehere\u003c/a\u003e.\n\nFor React Native you can use \u003ca href='https://github.com/conorhastings/react-native-syntax-highlighter'\u003ereact-native-syntax-highlighter\u003c/a\u003e\n\n### Installation Methods\n\n### For npm:\nFirst install `react-syntax-highlighter` package\n```bash []\nnpm install react-syntax-highlighter --save\n```\nthen install type modules to prevent TypeScript or ESLint Errors (Recommended for TypeScript):\n```bash []\nnpm install --save-dev @types/react-syntax-highlighter\n```\n\n### For pnpm:\nFirst add `react-syntax-highlighter` package\n```bash []\npnpm add -D react-syntax-highlighter\n```\nthen install type modules to prevent TypeScript or ESLint related errors (Recommended for TypeScript):\n```bash []\npnpm add -D @types/react-syntax-highlighter\n```\n\n\n### Why This One?\n\nThere are other syntax highlighters for `React` out there so why use this one? The biggest reason is that all the others rely on triggering calls in `componentDidMount` and `componentDidUpdate` to highlight the code block and then insert it in the render function using `dangerouslySetInnerHTML` or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it also uses more idiomatic `React` and allows the use of pure function components brought into `React` as of `0.14`.\n\n### Javascript Styles!\n\nOne of the biggest pain points for me trying to find a syntax highlighter for my own projects was the need to put a stylesheet tag on my page. I wanted to provide out of the box code styling with my modules without requiring awkward inclusion of another libs stylesheets. The styles in this module are all javascript based, and all styles supported by `highlight.js` have been ported!\n\nI do realize that javascript styles are not for everyone, so you can optionally choose to use css based styles with classNames added to elements by setting the prop `useInlineStyles` to `false` (it defaults to `true`).\n\n### Use\n\n#### props\n\n- `language` - the language to highlight code in. Available options [here for hljs](./AVAILABLE_LANGUAGES_HLJS.MD) and [here for prism](./AVAILABLE_LANGUAGES_PRISM.MD). (pass text to just render plain monospaced text)\n- `style` - style object required from styles/hljs or styles/prism directory depending on whether or not you are importing from `react-syntax-highlighter` or `react-syntax-highlighter/prism` directory [here for hljs](./AVAILABLE_STYLES_HLJS.MD). and [here for prism](./AVAILABLE_STYLES_PRISM.MD). `import { style } from 'react-syntax-highlighter/dist/esm/styles/{hljs|prism}'` . Will use the default if the style is not included.\n- `children` - the code to highlight.\n- `customStyle` - prop that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles.\n- `codeTagProps` - props that will be spread into the `\u003ccode\u003e` tag that is the direct parent of the highlighted code elements. Useful for styling/assigning classNames.\n- `useInlineStyles` - if this prop is passed in as false, react syntax highlighter will not add style objects to elements, and will instead append classNames. You can then style the code block by using one of the CSS files provided by highlight.js.\n- `showLineNumbers` - if this is enabled line numbers will be shown next to the code block.\n- `showInlineLineNumbers` - if this is enabled in conjunction with `showLineNumbers`, line numbers will be rendered into each line, which allows line numbers to display properly when using renderers such as \u003ca href=\"https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer\"\u003ereact-syntax-highlighter-virtualized-renderer\u003c/a\u003e. (This prop will have no effect if `showLineNumbers` is `false`.)\n- `startingLineNumber` - if `showLineNumbers` is enabled the line numbering will start from here.\n- `lineNumberContainerStyle` - the line numbers container defaults to appearing to the left with 10px of right padding. You can use this to override those styles.\n- `lineNumberStyle` - inline style to be passed to the span wrapping each number. Can be either an object or a function that receives the current line number as an argument and returns a style object.\n- `wrapLines` - a boolean value that determines whether or not each line of code should be wrapped in a parent element. defaults to false, when false one can not take action on an element on the line level. You can see an example of what this enables \u003ca href=\"https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/diff.html\"\u003ehere\u003c/a\u003e\n- `wrapLongLines` - boolean to specify whether to style the `\u003ccode\u003e` block with `white-space: pre-wrap` or `white-space: pre`. [Demo](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/)\n- `lineProps` - props to be passed to the span wrapping each line if wrapLines is true. Can be either an object or a function that receives the current line number as an argument and returns a props object.\n- `renderer` - an optional custom renderer for rendering lines of code. See \u003ca href=\"https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer\"\u003ehere\u003c/a\u003e for an example.\n- `PreTag` - the element or custom react component to use in place of the default pre tag, the outermost tag of the component (useful for a custom renderer not targeting the DOM).\n- `CodeTag` - the element or custom react component to use in place of the default code tag, the second tag of the component tree (useful for a custom renderer not targeting the DOM).\n- `spread props` pass arbitrary props to pre tag wrapping code.\n\n```js\nimport SyntaxHighlighter from 'react-syntax-highlighter';\nimport { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';\nconst Component = () =\u003e {\n  const codeString = '(num) =\u003e num + 1';\n  return (\n    \u003cSyntaxHighlighter language=\"javascript\" style={docco}\u003e\n      {codeString}\n    \u003c/SyntaxHighlighter\u003e\n  );\n};\n```\n\n### Prism\n\nUsing \u003ca href=\"https://github.com/wooorm/refractor\"\u003erefractor\u003c/a\u003e we can use an ast built on languages from Prism.js instead of highlight.js. This is beneficial especially when highlighting jsx, a problem long unsolved by this module. The semantics of use are basically the same although a light mode is not yet supported (though it is coming in the future). You can see a demo(with jsx) using Prism(refractor) \u003ca href=\"https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html\"\u003ehere\u003c/a\u003e.\n\n```js\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';\nconst Component = () =\u003e {\n  const codeString = '(num) =\u003e num + 1';\n  return (\n    \u003cSyntaxHighlighter language=\"javascript\" style={dark}\u003e\n      {codeString}\n    \u003c/SyntaxHighlighter\u003e\n  );\n};\n```\n\n### Light Build\n\nReact Syntax Highlighter used in the way described above can have a fairly large footprint. For those who desire more control over what exactly they need, there is an option to import a light build. If you choose to use this you will need to specifically import desired languages and register them using the registerLanguage export from the light build. There is also no default style provided.\n\n```js\nimport { Light as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';\nimport docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';\n\nSyntaxHighlighter.registerLanguage('javascript', js);\n```\n\nYou can require `PrismLight` from `react-syntax-highlighter` to use the prism light build instead of the standard light build.\n\n```jsx\nimport { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';\nimport prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';\n\nSyntaxHighlighter.registerLanguage('jsx', jsx);\n```\n\n### Async Build\n\nFor optimal bundle size for rendering ASAP, there's an async version of prism light \u0026 light.\nThis version requires you to use a bundler that supports the dynamic import syntax, like webpack.\nThis will defer loading of the refractor (17kb gzipped) \u0026 the languages, while code splits are loaded the code will show with line numbers\nbut without highlighting.\n\nPrism version:\n\n```js\nimport { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';\n```\n\nHighlight version\n\n```js\nimport { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';\n```\n\n#### Supported languages\n\nAccess via the `supportedLanguages` static field.\n\n```js\nSyntaxHighlighter.supportedLanguages;\n```\n\n### Add support for another language\n\nTo add another language, use the [light build](#light-build) and `registerLanguage`. For example to add cURL with highlight.js:\n\n```js\nimport { Light as LightSyntaxHighlighter } from 'react-syntax-highlighter';\nimport curl from 'highlightjs-curl';\n```\n\nThen you can do:\n\n```js\nLightSyntaxHighlighter.registerLanguage('curl', curl);\n```\n\n### Built with React Syntax Highlighter\n\n- [mdx-deck](https://github.com/jxnblk/mdx-deck) - MDX-based presentation decks\n- [codecrumbs](https://github.com/Bogdan-Lyashenko/codecrumbs) - Learn, design or document a codebase by putting breadcrumbs in source code. Live updates, multi-language support, and easy sharing.\n- [Spectacle Editor](https://github.com/FormidableLabs/spectacle-editor) - An Electron based app for creating, editing, saving, and publishing Spectacle presentations. With integrated Plotly support.\n- [Superset](https://github.com/airbnb/superset) - Superset is a data exploration platform designed to be visual, intuitive, and interactive.\n- [Daydream](https://github.com/segmentio/daydream) - A chrome extension to record your actions into a [nightmare](https://github.com/segmentio/nightmare) script\n- [CodeDoc](https://github.com/B1naryStudio/CodeDoc) - Electron based application built with React for creating project documentation\n- [React Component Demo](https://github.com/conorhastings/react-component-demo) - A React Component to make live editable demos of other React Components.\n- [Redux Test Recorder](https://github.com/conorhastings/redux-test-recorder) - a redux middleware to automatically generate tests for reducers through ui interaction. Syntax highlighter used by react plugin.\n- [GitPoint](https://github.com/gitpoint/git-point) - GitHub for iOS. Built with React Native. (built using react-native-syntax-highlighter)\n- [Yoga Layout Playground](https://yogalayout.com/playground) - generate code for yoga layout in multiple languages\n- [Kibana](https://github.com/elastic/kibana) - browser-based analytics and search dashboard for Elasticsearch.\n- [Golangci Web](https://github.com/golangci/golangci-web)\n- [Storybook Official Addons](https://github.com/storybooks/storybook)\n- [Microsoft Fast DNA](https://github.com/Microsoft/fast-dna/)\n- [Alibaba Ice](https://github.com/alibaba/ice)\n- [Uber BaseUI Docs](https://github.com/uber-web/baseui)\n- [React Select Docs](https://github.com/JedWatson/react-select)\n- [Auto-layout](https://github.com/0123cf/auto-layout) - use flex layout\n- [npmview](https://github.com/pd4d10/npmview) - A web application to view npm package files\n- [Static Forms](https://www.staticforms.xyz) - Free HTML forms for your static websites.\n- [React DemoTab](https://github.com/mkosir/react-demo-tab) - A React component to easily create demos of other components\n- [codeprinter](https://github.com/jaredpetersen/codeprinter) - Print out code easily\n- [Neumorphism](https://www.neumorphism.io) - CSS code generator for Soft UI/Neumorphism shadows\n- [grape-ui](https://www.grapeui.com) - Component library using styled-system and other open source components.\n- [Good Arduino Code](https://goodarduinocode.com) - A curated library of Arduino Coding examples\n- [marmota.app](https://marmota.app) - A desktop app to create simple markdown presentations\n- [boemly](https://boemly.tree.ly) - An open-source component library for React.\n- [Markdown Sticky Notes](https://github.com/qiweiii/markdown-sticky-notes) - A web extension to create Markdown sticky notes in web pages.\n\nIf your project uses react-syntax-highlighter please send a pr to add!\n\n### License\n\nMIT\n\n### Contributing\n\nYou'll need Node 16.x installed \u0026 active on your system to build this package.\n\n```\nnpm i\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-syntax-highlighter%2Freact-syntax-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-syntax-highlighter%2Freact-syntax-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-syntax-highlighter%2Freact-syntax-highlighter/lists"}