highlight.js React Typescript (version: 10.4.1)
はじめに
react-highlight.jsがv10に対応していなかったので, highlight.js v10でComponentを作成
なぜかvue.jsはPluginがある、、、vuePlugin
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';
おわり