{"id":16185124,"url":"https://github.com/rexxars/react-lowlight","last_synced_at":"2025-04-09T13:05:43.325Z","repository":{"id":45927020,"uuid":"53784521","full_name":"rexxars/react-lowlight","owner":"rexxars","description":"Syntax highlighter for React, utilizing VDOM for efficient updates","archived":false,"fork":false,"pushed_at":"2023-07-04T04:28:10.000Z","size":1031,"stargazers_count":103,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-02T00:01:07.112Z","etag":null,"topics":["react","syntax","syntax-highlighting"],"latest_commit_sha":null,"homepage":"http://rexxars.github.io/react-lowlight/","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/rexxars.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":"2016-03-13T12:43:42.000Z","updated_at":"2024-06-11T18:57:24.296Z","dependencies_parsed_at":"2024-06-11T19:08:40.073Z","dependency_job_id":null,"html_url":"https://github.com/rexxars/react-lowlight","commit_stats":{"total_commits":92,"total_committers":5,"mean_commits":18.4,"dds":"0.44565217391304346","last_synced_commit":"11ebdd6c19a4a428c8c779c23b1fe09900eb6c5f"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-lowlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-lowlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-lowlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rexxars%2Freact-lowlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rexxars","download_url":"https://codeload.github.com/rexxars/react-lowlight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045231,"owners_count":21038553,"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":["react","syntax","syntax-highlighting"],"created_at":"2024-10-10T07:13:35.858Z","updated_at":"2025-04-09T13:05:43.305Z","avatar_url":"https://github.com/rexxars.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-lowlight\n\nSyntax highlighter for React, utilizing VDOM for efficient updates\n\n[![npm version](https://badgen.net/npm/v/react-lowlight?style=flat-square)](https://npmjs.com/package/react-lowlight)\n[![Tests](https://github.com/rexxars/react-lowlight/actions/workflows/tests.yml/badge.svg)](https://github.com/rexxars/react-lowlight/actions/workflows/tests.yml)\n\n- Thin wrapper on top of [lowlight](https://github.com/wooorm/lowlight) (Syntax highlighting using VDOM)\n- Lowlight uses [highlight.js](https://github.com/isagalaev/highlight.js) under the hood, thus supports all the same syntaxes\n- About ~18KB (6.5KB gziped) when using a single language syntax. Each language tends to pack on another ~2KB uncompressed.\n\nFeel free to check out a [super-simple demo](http://rexxars.github.io/react-lowlight/).\n\n## Installation\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\nIn Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm](https://docs.npmjs.com/cli/install):\n\n```bash\n$ npm install react-lowlight highlight.js\n```\n\nYou'll also need to provide the [highlight.js](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) language definitions you want to use. We don't bundle these in order to not bloat the component with unused definitions.\n\n## Usage\n\n```js\nimport Lowlight from 'react-lowlight'\n\n// Load any languages you want to use\n// (see https://github.com/highlightjs/highlight.js/tree/main/src/languages)\nimport javascript from 'highlight.js/lib/languages/javascript'\n\n// Then register them with lowlight\nLowlight.registerLanguage('js', javascript)\n\nReactDOM.render(\n  \u003cLowlight language=\"js\" value=\"/* Code to highlight */\" /\u003e,\n  document.getElementById('target')\n)\n```\n\nNote that the `language` property is optional, but significantly increases the speed and reliability of rendering.\n\nIf you want to load multiple languages at once\n\n```js\nimport Lowlight from 'react-lowlight'\n\nimport 'react-lowlight/common'\n// import 'react-lowlight/all' // \u003c- to import all languages\n\nReactDOM.render(\n  \u003cLowlight language=\"js\" value=\"/* Code to highlight */\" /\u003e,\n  document.getElementById('target')\n)\n```\n\nImports `react-lowlight/common` and `react-lowlight/all` are re-exports from lowlight. See here https://github.com/wooorm/lowlight#syntaxes for more details\n\n## Styling\n\nStylesheets are **not** automatically handled for you - but there is [a bunch of premade styles](https://github.com/highlightjs/highlight.js/tree/main/src/styles) for highlight.js which you can simply drop in and they'll \"just work\". You can either grab these from the source, or pull them in using a CSS loader - whatever works best for you. They're also available on [unpkg](https://unpkg.com/browse/highlight.js@11.3.1/styles/):\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/browse/highlight.js@11.3.1/styles/default.css\"\n/\u003e\n```\n\nIf you have a bundler that supports CSS imports, you can do something like the following:\n\n```js\nimport 'highlight.js/styles/default.css'\n```\n\nNote that when using the `markers` feature, there is an additional class name called `hljs-marker` which is not defined by highlight js as it's not a part of its feature set. You can either set it yourself, or you can explicitly set class names on markers.\n\n## Props\n\n| Name        | Description                                                                               |\n| :---------- | :---------------------------------------------------------------------------------------- |\n| `className` | Class name for the outermost `pre` tag. Default: `lowlight`                               |\n| `language`  | Language to use for syntax highlighting this value. Must be registered prior to usage.    |\n| `value`     | The code snippet to syntax highlight                                                      |\n| `prefix`    | Class name prefix for individual node. Default: `hljs-`                                   |\n| `subset`    | Array of languages to limit the auto-detection to.                                        |\n| `inline`    | Whether code should be displayed inline (no `\u003cpre\u003e` tag, sets `display: inline`)          |\n| `markers`   | Array of lines to mark. Can also be specified in `{line: \u003cnum\u003e, className: \u003cclass\u003e}` form |\n\n## Dynamic loading\n\nYou can use `Lowlight.hasLanguage(language)` to check if a language has been registered. Combining this with Webpack's [code splitting abilities](https://webpack.js.org/guides/code-splitting/) (or something similar), you should be able to load definitions for languages on the fly.\n\n## License\n\nMIT-licensed. See [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexxars%2Freact-lowlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frexxars%2Freact-lowlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frexxars%2Freact-lowlight/lists"}