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>;