tag:crieit.net,2005:https://crieit.net/tags/highlight.js/feed
「highlight.js」の記事 - Crieit
Crieitでタグ「highlight.js」に投稿された最近の記事
2020-12-24T09:58:34+09:00
https://crieit.net/tags/highlight.js/feed
tag:crieit.net,2005:PublicArticle/16419
2020-12-24T09:42:14+09:00
2020-12-24T09:58:34+09:00
https://crieit.net/posts/react-highlightjs
📝 React で highlight.js を適用する方法
<p>React に <code>highlight.js</code> を組み込もうとしたのですが、若干躓いてしまったので対処法についてメモっておきます。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://www.npmjs.com/package/react">React</a> は既にプロジェクトにインストール済みと仮定します。</p>
<pre><code class="bash"># 一応 React をインストールするためのコマンドは ↓
npm i --save react react-dom
</code></pre>
<p>まずは <a target="_blank" rel="nofollow noopener" href="https://www.npmjs.com/package/highlight.js?activeTab=readme">highlight.js</a> を NPM or Yarn でインストールします。</p>
<pre><code class="bash"># NPM で highlight.js をインストールする
npm i --save highlight.js
yarn add highlight.js
</code></pre>
<p>その後、React ソースコードに <code>highlight.js</code> を組み込みます。<br />
ソースコードの該当部分のみを載せると下記の感じになります。</p>
<pre><code class="javascript">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.js/styles/~ を変更することで調整可能
[https://highlightjs.org/](https://highlightjs.org/) のトップページから各種デザインについては確認可能
(コード右下にある style の右側リンククリックで各種デザインのプレビューが可能)
*/
import xml from 'highlight.js/lib/languages/xml';
import 'highlight.js/styles/github.css';
hljs.registerLanguage('xml', xml);
let inputChecker = null;
export default function Home() {
const [user, setUser] = useState('nikaera');
const [previewUser, setPreviewUser] = useState('nikaera');
const [badgeCode, setBadgeCode] = useState('nikaera');
const [style, setStyle] = useState('plastic')
/**
useEffect のタイミングで hightlight.js の初期化を行う。
called プロパティを false にすることで highlight.js で、
コードが変更された場合でも常にシンタックスハイライトすることが可能
*/
useEffect(() => {
hljs.initHighlighting();
hljs.initHighlighting.called = false;
});
useEffect(() => {
/**
シンタックスハイライトしたいコード input フォームへの入力内容に応じて動的に変わる
*/
setBadgeCode(` <!-- highlight.js でハイライトする -->
<div>Hello ${user}!</div>
}`, [user, style]);
});
const handleChange = (event) => {
if (inputChecker)
clearTimeout(inputChecker);
inputChecker = setTimeout(() => {
clearTimeout(inputChecker);
inputChecker = null;
setPreviewUser(event.target.value);
}, 1 * 1000); // 1 seconds
setUser(event.target.value);
};
return (
<div className={styles.container}>
<Head>
<title>Highlight</title>
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Highlight sample
</h1>
<input type="text" value={user} onChange={handleChange} />
<div>
{ /* pre -> code タグ内に highlight.js で
シンタックスハイライトしたい内容を出力する */ }
<pre style=<span>{</span><span>{</span> width: '80vw' <span>}</span><span>}</span>>
<code className="xml">
{badgeCode}
</code>
</pre>
</div>
</main>
<footer className={styles.footer}>
</footer>
</div>
)
}
</code></pre>
nikaera