solid-highlight

>

!npm

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


Documentation

$3

``bash
npm i solid-highlight


or

yarn add solid-highlight

or

pnpm add solid-highlight
`

$3

#### Importing component

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

#### Adding styles

Choose the theme 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 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' }"}{" "}
;
``