a syntax highlight component for preact, base on awesome highlight.js
- self managed theme style
- cache highlight result
- support multi-theme in same application
use preact-highlight with your preact application
const { h, Component } = require('preact');
const { HighLight, THEME } = require('preact-highlight');
const demo = {
a: 1,
b: [ 1, 2, 3 ],
};
class CodeArea extends Component {
render() {
return <HighLight className="cmp-high-light" code={demo} theme={THEME.monokaiSublime}/>;
}
}
module.exports = CodeArea;HighLight component code property had supported string or json or object and function
| property | type | description |
|---|---|---|
className |
string |
css style classname |
code |
string or json or object and function |
code snippet which need highlight |
language |
string |
use which language syntax |
theme |
string |
use which theme |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent