https://github.com/jasonchen1982/preact-highlight
a syntax highlight component for preact
https://github.com/jasonchen1982/preact-highlight
highlight hljs preact preact-hljs syntax-highlighting
Last synced: 25 days ago
JSON representation
a syntax highlight component for preact
- Host: GitHub
- URL: https://github.com/jasonchen1982/preact-highlight
- Owner: jasonChen1982
- Created: 2017-06-21T10:36:10.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-07T01:33:39.000Z (over 7 years ago)
- Last Synced: 2025-04-10T00:35:23.817Z (25 days ago)
- Topics: highlight, hljs, preact, preact-hljs, syntax-highlighting
- Language: CSS
- Size: 69.3 KB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# preact-highlight
a syntax highlight component for preact, base on awesome [highlight.js](https://github.com/isagalaev/highlight.js)
## features
- self managed theme style
- cache highlight result
- support multi-theme in same application## usage
use `preact-highlight` with your preact application
```js
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 ;
}
}
module.exports = CodeArea;
```## note
`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 |