# solid-highlight

> Solid component for syntax highlighting, based on react-highlight and highlightjs' vue plugin

Latest version **0.1.26** (published 2024-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-highlight
pnpm add solid-highlight
yarn add solid-highlight
bun add solid-highlight
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.26 |
| Published | 2024-02-28 |
| First published | 2022-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 51.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Aidan Aden |
| Maintainers | aidanaden |
| Keywords | solidjs component, solid-component, solid, highlight.js, syntax, highlighting, highlight, code, syntax, typescript |

## Links

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

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.1.26 (latest) — 2024-02-28
- 0.1.25 — 2024-02-24
- 0.1.24 — 2024-02-24
- 0.1.23 — 2024-02-24
- 0.1.22 — 2024-02-24
- 0.1.21 — 2024-02-24
- 0.1.20 — 2024-02-24
- 0.1.19 — 2024-02-21
- 0.1.18 — 2024-01-25
- 0.1.17 — 2024-01-25
- 0.1.16 — 2024-01-12
- 0.1.15 — 2024-01-12
- 0.1.14 — 2024-01-12
- 0.1.12 — 2022-08-19
- 0.1.11 — 2022-07-07
- … 11 more at https://npm.io/package/solid-highlight/versions

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-highlight&background=tiles&project=%20" alt="solid-highlight">
</p>

# solid-highlight

>

[![size](https://img.shields.io/bundlephobia/minzip/solid-highlight?style=for-the-badge)](https://bundlephobia.com/package/solid-highlight)
[![size](https://img.shields.io/npm/v/solid-highlight?style=for-the-badge)](https://www.npmjs.com/package/solid-highlight)
![npm](https://img.shields.io/npm/dw/solid-highlight?style=for-the-badge)
[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)

[download-image]: https://img.shields.io/npm/dm/solid-highlight.svg
[download-url]: https://npmjs.org/package/solid-highlight

[![solid-highlight](https://nodei.co/npm/solid-highlight.png)](https://npmjs.org/package/solid-highlight)

## Documentation

### Installation

```bash
npm i solid-highlight
# or
yarn add solid-highlight
# or
pnpm add solid-highlight
```

### Usage

#### Importing component

```js
import { Highlight } from "solid-highlight";
```

#### Adding styles

Choose the [theme](https://highlightjs.org/static/demo/) for syntax highlighting and add corresponding styles of prism.js by importing in your `index.tsx` file

```js
import "prismjs/themes/prism-okaidia.min.css";
```

The styles will most likely be in `node_modules/prismjs/themes` folder.

#### Adding languages

Choose the [languages](https://highlightjs.org/static/demo/) available for syntax highlighting by importing in your `index.tsx` file

```js
import "prismjs/components/prism-typescript";
```

The languages will most likely be in `node_modules/prismjs/components` folder.

#### Properties

| Property | Type   | Default      | Description                        |
| :------- | :----- | :----------- | :--------------------------------- |
| class    | string |              | Custom css classes to be included  |
| language | string | `javascript` | Language of code to be highlighted |

#### Syntax highlighting of code snippet

Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format.

```ts
import { Highlight, Language } from "solid-highlight";

const [language, setLanguage] = createSignal<Language>(Language.JAVASCRIPT);
<Highlight language={language()}>
  {" "}
  {"function foo() { return 'bar' }"}{" "}
</Highlight>;
```

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