GitHub - kc17/react-kode: A react component that easy to use highlight.js

$ npx create-react-app demo
$ cd demo
$ npm i highlight.js react-kode

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.

<!--
  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>