1.0.1 • Published 3 years ago
@bobril/highlighter v1.0.1
Bobril Highlighter
Bobril component for syntax highlighting of source code. For actual work uses 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