TECH
BLOG
[Tips] How to apply highlight.js in React
beginning
React upon highlight.js I tried to incorporate it, but it stumbled slightly, so I'll make a note about how to deal with it.
Also,React assumes you've already installed it in your project.
# What is the command to install React for the time being ↓
npm i --save react react-dom
Embed highlight.js in React
First highlight.js Install with NPM or Yarn.
# Install highlight.js with NPM
npm i --save highlight.js
yarn add highlight.js
Then, embed highlight.js into the React source code.
If only the relevant part of the source code is posted, it looks like the following.
import Head from 'next/head'
Import styles from '.. /styles/home.module.css'
import React, {useState, useEffect} from 'react';
/**
import highlight.js
*/
import hljs from 'highlight.js/lib/core';
/**
Register only the languages you want to syntax highlight as imports
I wanted to highlight html this time, so I imported xml
The design can be adjusted by changing highlight.js/styles/~
You can check various designs from the https://highlightjs.org/ top page
(You can preview various designs by clicking on the right side link of style at the bottom right of the code)
*/
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')
/**
Initialize hightlight.js at useEffect timing.
By setting the called property to false, in highlight.js,
Syntax highlighting is always possible, even when code changes
*/
useEffect () => {
HLJS.initHighlighting ();
hljs.initHighlighting.called = false;
});
useEffect () => {
/**
The code you want to highlight the syntax changes dynamically depending on what you enter into the input form
*/
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 -> in highlight.js in code tags
Print the content you want to syntax highlight */}
<pre style= {{width: '80vw'}} >
<code className="xml">
{badgeCode}
</code>
</pre>
</div>
</main>
<footer className= {styles.footer} >
</footer>
</div>
)
}
concluding
I found a lot of ways to incorporate highlight.js into React, but I didn't get it right, so I made a note of it. I would be happy to help those who are struggling with similar cases