📝 React で highlight.js を適用する方法
Zenn.badge を作成する時に React に highlight.js を組み込もうとしたのですが、若干躓いてしまったので対処法についてメモっておきます。 React は既にプロジェクトにインストール済みと仮定します。 # 一応 React をインストールするためのコマンドは ↓ npm i --save react react-dom まずは highlight.js を NPM or Yarn でインストールします。 # NPM で highlight.js をインストールする npm i --save highlight.js yarn add highlight.js その後、React ソースコードに highlight.js を組み込みます。 ソースコードの全体像は下記のとおりです。 import Head from 'next/head' import styles from '../styles/Home.module.css' import React, { useState, useEffect } from 'react'; /** highlight.js を import する */ import hljs from 'highlight.js/lib/core'; /** シンタックスハイライトしたい言語のみ import として登録する 今回は html をハイライトしたかったので xml を import した デザインは highlight....