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>