solid-highlight

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 highlight.js, either as a stylesheet or by importing in your index.tsx file

  <link rel="stylesheet" href="/path/to/styles/theme-name.css">

import "highlight.js/styles/stackoverflow-light.css";

The styles will most likely be in node_modules/highlight.js/styles folder.

Properties

Property	Type	Default	Description
class	string		Custom css classes to be included
language	string (optional)	''	Language of code to be highlighted (will be detected automatically by default)
autoDetect	boolean (optional)	true	Whether to automatically detect the language of code to be highlighted
ignoreIllegals	boolean (optional)	true	Whether to ignore illegal characters in the 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.

<Highlight autoDetect={true}> {"function foo() { return 'bar' }"} </Highlight>

<Highlight autoDetect={false} language={"js"}>
  {"function foo() { return 'bar' }"}
</Highlight>