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: about 2 months 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 (about 2 months 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                          |