solid-highlight

Documentation

Example

TBA

Installation

• using npm

npm install --save solid-highlight

• using yarn

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