solid-highlight

Documentation

Installation

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

Usage

Importing component

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

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

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.

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

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