A react component that integrates highlight.js with advance. See examples on Codepen or Storybook.
- Support theme by highlight.js
- Support line number.
Getting start with CRA
$ npx create-react-app demo
$ cd demo
$ npm i highlight.js react-kode
Open src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
// Import theme stylesheet.and react-kode
import 'highlight.js/styles/solarized-dark.css';
import Kode from 'react-kode';
const html = `
<html>
<div class="navbar">
<a href="#">Go</a>
</div>
</html>
`;
const App = () => (
<div>
<Kode
lang="html"
isEnableLineNumber={true}
>
{html}
</Kode>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));Install react-kode.
# Install dependencies.
$ npm i react highlight.js
# Install react-kode.
$ npm i react-kode<!--
highlight.js
https://highlightjs.org/download/
-->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<!--
React
https://reactjs.org/docs/cdn-links.html
-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--
react-kode
-->
<script crossorigin src="https://unpkg.com/react-kode@latest/dist/react-kode.js"></script>| Property | Type | Description |
|---|---|---|
| lang | string | Specify language of code. e.g. html, javascript. To get language list reference highlight.js docs or github |
| isEnableLineNumber | bool | Set true to enable line number. |
| initialLineNumber | number | Set initial number of line. |
| diff | object | Coming soon... |
# Build
$ npm run build
# Dev
$ npm run storybook