@bobril/highlighter
v1.1.1
Published
Syntax highlighter component for Bobril
Downloads
24
Readme
Bobril Highlighter
Bobril component for syntax highlighting of source code. For actual work uses highlight.js.
Updated to use version 11.9.0 of highlight.js.
How to use
import * as b from "bobril";
import * as high from "@bobril/highlighter";
import { docco } from "@bobril/highlighter/styles";
b.init(() => <high.Highlighter style={docco}>{`let actual = "code " + "shine";`}</high.Highlighter>);
By default only most common languages are registered. If all are needed use this:
import "@bobril/highlighter/allLanguages";
Props of component
language?: string
- if not provided then autodetect (slower)style?: HighlightStyle
- provide theme to use for stylingshowLineNumbers?: boolean
- default istrue
startingLineNumber?: number
- default is1
,NaN
is automatically set to1
as well.lineStyle?: ((line: number) => b.IBobrilStyles) | undefined
- allow stylediv
for each linelineContentStyle?: ((line: number) => b.IBobrilStyles) | undefined
- allow to stylediv
of line content without line numberlineNumberStyle?: ((largestLineNumber: number, style: HighlightStyle) => (line: number) => b.IBobrilStyles) | undefined
- allows complete override of default line number stylechildren?: string
- only one string child is allowed and it must contain code to format
Acknowledges
- highlight.js - actual ground work
- lowlight - for Emitter Tree approach
- react-syntax-highlighter - scripts and inspirations in line number styling