preact-highlight

a syntax highlight component for preact, base on awesome highlight.js

features

• self managed theme style
• cache highlight result
• support multi-theme in same component

usage

step.1

link theme stylesheets

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

step.2

use it 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.}/>;
  }
}
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 | | theme | string | use which theme |