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 styling -
showLineNumbers?: boolean
- default istrue
-
startingLineNumber?: number
- default is1
,NaN
is automatically set to1
as well. -
lineStyle?: ((line: number) => b.IBobrilStyles) | undefined
- allow stylediv
for each line -
lineContentStyle?: ((line: number) => b.IBobrilStyles) | undefined
- allow to stylediv
of line content without line number -
lineNumberStyle?: ((largestLineNumber: number, style: HighlightStyle) => (line: number) => b.IBobrilStyles) | undefined
- allows complete override of default line number style -
children?: 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