Highlight Code Using Prismjs - Nextjs Series
Selasa, 16 Mei 2023 12:34:56 oleh Wahyudi
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
Artikel Terkait