solid-highlight
Documentation
Example
TBA
Installation
- using npm
npm install --save solid-highlight- using yarn
yarn add solid-highlightUsage
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>