https://github.com/aidanaden/solid-highlight

Solid component for syntax highlighting via PrismJS
https://github.com/aidanaden/solid-highlight

prismjs solidjs solidjs-highlight syntax-highlighting

Last synced: about 1 month ago
JSON representation

Solid component for syntax highlighting via PrismJS

• Host: GitHub
• URL: https://github.com/aidanaden/solid-highlight
• Owner: aidanaden
• Created: 2022-07-02T16:32:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T19:09:52.000Z (8 months ago)
• Last Synced: 2024-04-29T20:27:35.468Z (8 months ago)
• Topics: prismjs, solidjs, solidjs-highlight, syntax-highlighting
• Language: TypeScript
• Homepage: https://solid-highlight.pages.dev
• Size: 873 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        


  



# 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://tutsplus.github.io/syntax-highlighter-demos/prism.html) 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://prismjs.com/#supported-languages) 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.JAVASCRIPT);

  {" "}

  {"function foo() { return 'bar' }"}{" "}

;

```