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 withnpm
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 pathnode_modules/prismjs/themes
. I'm usingprism-okaidia.css
here.jsx import 'prismjs/themes/prism-okaidia.css';
- After that, add the code blocks inside the
pre
andcode
tag that you want to highlight. Here classNamelanguage-js
is important, it will be different for other languages. You can find full language list herejsx <pre> <code className="language-js">console.log("Hello js")</code> </pre>
- Now run
highlightAll
in auseEffect
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 classNameline-numbers
in HTML. Find more about plugins here.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
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:
You can explore other options from the Prism website.
Top comments (0)