# ink-syntax-highlight

> Synax highlight component for Ink

Latest version **2.0.2** (published 2025-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ink-syntax-highlight
pnpm add ink-syntax-highlight
yarn add ink-syntax-highlight
bun add ink-syntax-highlight
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2025-01-05 |
| First published | 2020-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=18 |
| Dependencies | 1 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Vitalii Sashyn |
| Maintainers | vitaliis |
| Keywords | ink, code, syntax, component, jsx, react |

## Links

- npm: https://www.npmjs.com/package/ink-syntax-highlight
- Repository: https://github.com/vsashyn/ink-syntax-highlight
- Homepage: https://github.com/vsashyn/ink-syntax-highlight#readme
- Issues: https://github.com/vsashyn/ink-syntax-highlight/issues
- npm.io page: https://npm.io/package/ink-syntax-highlight

## Dependencies (1)

- [cli-highlight](https://npm.io/package/cli-highlight.md) ^2.1.9

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2025-01-05
- 2.0.1 — 2025-01-05
- 2.0.0 — 2025-01-05
- 1.0.1 — 2020-12-29
- 1.0.0 — 2020-12-19

## README

# ink-syntax-highlight ![test](https://github.com/vsashyn/ink-syntax-highlight/workflows/test/badge.svg)

> Synax highlight component for [Ink](https://github.com/vadimdemedes/ink).

![Example image](./media/example.png)

## Install

```
$ npm install ink-syntax-highlight
```

## Usage

```jsx
import React from 'react';
import {render, Text} from 'ink';
import SyntaxHighlight from 'ink-syntax-highlight';

render(<SyntaxHighlight code="const hello = 'world'" />);
```

## Props

### code

Type: `string`<br>

Source code to highlight.

### language

Type: `string`<br>

Language of the source code. If you don't set it yourself, this component will try to auto-detect it. [All languages of highlight.js](https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md#supported-languages) are supported.

### theme

Type: [Theme](https://github.com/felixfbecker/cli-highlight/blob/main/src/theme.ts#L280)<br>

You can write your own theme and pass it as prop. [More info regarding custom theme](https://github.com/felixfbecker/cli-highlight/blob/main/README.md#themes).

---
_Source: https://npm.io/package/ink-syntax-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._