Highlight Code Using Prismjs - Nextjs Series

Selasa, 16 Mei 2023 12:34:56 oleh Wahyudi

Highlight-Code-Using-Prismjs

Tanjung -If you are a beginner, don't worry , me to. So let's learn together. First, install primsjs via npm below

npm install prismjs

Second, we download prism.css from the web. You can customize language and the display of theme. Because my roject is nextjs, i store prism.css in public-styles. Then we import it to _app.js

import '../styles/prism.css';

And the next step, we import prismjs in your page

import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';

then put useeffect inside your component

useEffect(() => {
 Prism.highlightAll();
}, []);

the last step, put className='languange-js' inside your div contain text you will highlight

Komentar