highlight.js React Typescript (version: 10.4.1)

はじめに

react-highlight.jsがv10に対応していなかったので, highlight.js v10でComponentを作成

なぜかvue.jsはPluginがある、、、vuePlugin

bvaughn.github.io

npm install

2020/12/03 latest version -> 10.4.1

$ npm i highlight.js
$ npm i @types/highlight.js

Highlight.jsx

JSONのsample Component作成

import React, { useEffect } from "react";

import hljs from 'highlight.js';
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/atom-one-dark.css';

export default function Highlight(prop: any) {
  useEffect(() => {
    hljs.registerLanguage('json', json);
    hljs.initHighlighting();
  },[]);
  return (
    <pre>
      <code className='json'>{prop.content}</code>
    </pre>
  );
}

demoサイトから対応しているlanguageとstyleが確認できます。

// この部分
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/atom-one-dark.css';

highlightjs.org

おわり