Code syntax Highlighting in React project with Prism
Tags: react, prismjs, syntax, highlight
Published: 2023-12-30 19:53:46

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. Today, I'll show you how you can add code highlighting in react project.
I'm assuming you've already created your React project, now let's see how we can add prismjs following these steps.
- First install `prismjs` package with `npm`
```bash
npm install prismjs
```
- Then import `Prism` in the component where you want to use syntax highlighting.
```jsx
import Prism from "prismjs";
```
- Then import the specific theme `css` that you want to use in your component. You can find all theme CSS in this path `node_modules/prismjs/themes`. I'm using `prism-okaidia.css` here.
```jsx
import 'prismjs/themes/prism-okaidia.css';
```
- After that, add the code blocks inside the `pre` and `code` tag that you want to highlight. Here *className* `language-js` is important, it will be different for other languages. You can find full [language list here](https://prismjs.com/#languages-list)
```jsx
<pre>
	<code className="language-js">console.log("Hello js")</code>
</pre>
```
- Now run `highlightAll` in a `useEffect` hook to run it at the component loading time.
```jsx
  useEffect(() => {
    Prism.highlightAll();
  }, []);
```
- If you want to add any additional language that is not in prism-core than you can add them from `node_modules/prismjs/components`
```jsx
import 'prismjs/components/prism-csharp';
```
- If you want to use additional plugin feature like line number you can import them from here `node_modules/prismjs/plugins/`. I'm adding line number plugin here and line number class in `<code>` tag. Import JS and CSS for line numbers and *className* `line-numbers` in HTML. Find more about plugins [here](https://prismjs.com/#plugins).
```jsx
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
// rest of the code
<pre>
	<code className='language-js line-numbers'>{code}</code>
</pre>
```

Full code will look something like this
```jsx
import { useEffect } from "react";
import Prism from "prismjs";
import 'prismjs/components/prism-csharp';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/themes/prism-okaidia.css';

export default function Test() {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  const CsCode =
  `
  using System;
  using Alias = AnotherNamespace.SomeClass;
  namespace MyNamespace
  {
      class Program
      {
          static void Main()
          {
              AnotherNamespace.SomeClass obj1 = new AnotherNamespace.SomeClass();
              Alias obj2 = new Alias(); // Using the alias
          }
      }
  }
  `
  const JsCode =
  `const greetings ='Hello Folks';
  console.log(greetings);`

  return (
    <div className="Code">
      <h2> Code Syntax Block</h2>
      <pre>
        <code className='language-csharp line-numbers'>{CsCode}</code>
      </pre>
      <pre>
        <code className='language-js line-numbers'>{JsCode}</code>
      </pre>
    </div>
  );
}
```
Output:

![Syntax Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jzeapo2hbi8znegehfe.png)



You can explore other options from the Prism [website](https://prismjs.com/).