Show Code Snippets in React JS

Highlight.js is a very popular npm package that can help you style your code snippet automatically. But since it is a general purpose library, it can be a bit tricky to figure out how to use this package in react environment.

Good news! i have figured it out and i will share it with you in this article.

First thing first, install the package using the command

npm i highlight.js

import the highlight.js package in your react file. And initialize the language

import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";

hljs.registerLanguage("javascript", javascript);

In the above code snippet, we have imported JavaScript language from the highlight.js package, since we will be showing a JavaScript code snippet.
Highlight.js supports a wide range of languages (almost 190+). After that we have to initialize and register this language using registerLanguage function.

Next it’s time to set up your react component for code snippet:

import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";

hljs.registerLanguage("javascript", javascript);

const CodeSnippet = () => {
  return (
    <pre >
      <code className="javascript">
      </code>
    </pre>
  );
};

export default CodeSnippet;

In the above code, we have used two html elements <pre> and <code>. These two html elements helps the package to detect the code snippet block. Make sure you give the className of the same language in strings that you set while initializing.

Now you are going to connect this code element with ref, using useRef hook.

import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";

import { useRef } from "react";

hljs.registerLanguage("javascript", javascript);

const CodeSnippet = () => {
  const codeRef = useRef(null);
  return (
    <pre>
      <code className="javascript" ref={codeRef}></code>
    </pre>
  );
};

export default CodeSnippet;

We will use highlightBlock function of highlight.js package, to highlight the code block. Since we need to format it only once when the component mounts so we are going to wrap this inside useEffect hook.

import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";

import { useEffect, useRef } from "react";

hljs.registerLanguage("javascript", javascript);

const CodeSnippet = () => {
  const codeRef = useRef(null);

  useEffect(() => {
    hljs.highlightBlock(codeRef.current);
  }, []);

  return (
    <pre>
      <code className="javascript" ref={codeRef}></code>
    </pre>
  );
};

export default CodeSnippet;

Now we are all ready to put code inside the <code> html element that we want to show. But there are some formatting tips that you should know.

<code className="javascript" ref={codeRef}>
        {`
export function useWeb3AnalyticsReporter() {
  const { pathname, search } = useLocation(); //depends on project routes manager 
  const { provider } = useWeb3React(); //depends on project web3 providers handling

  //track page-views
  useEffect(() => {
    Web3Analytics.trackPageView(pathname, search);
  }, [pathname, search]);

  //track web3 activity
  useEffect(() => {
    if (provider) {
      Web3Analytics.walletProvider(provider);
    }
  }, [provider]);
}`}
</code>

Only Use Back ticks (`)
Since there are lot of special characters and brackets in JavaScript and many other languages. so the double inverted commas (“) won’t be of much help in react. This where Back ticks are helpful. You can insert all your code in it. Furthermore you can leverage the back ticks functionality to make your code snippet dynamic using ${} syntax.

Every Space Counts inside Back ticks
Make sure you do start the code snippet to the very left of your code editor, to avoid getting unnecessary spaces. Since Every new line or space will be reflected on the react page. Therefore, spacing the code and prettifying is all on you.

Using Different Themes
highlight.js gives you a lot of most famous coding color themes (240+ themes) that you can apply to highlight your code snippet. You can checkout all those themes on their demo Click Here.

let’s see how we can add a theme using highlight.js.
You have to import the css file of the theme that you want to apply on highlight. Highlight.js comes with all of these css files. you can import them as follows.

import "highlight.js/styles/your-theme-name.css";

That’s how your final code will look like:

import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai.css";

import { useEffect, useRef } from "react";

hljs.registerLanguage("javascript", javascript);

const CodeSnippet = () => {
  const codeRef = useRef(null);

  useEffect(() => {
    hljs.highlightBlock(codeRef.current);
  }, []);

  return (
    <pre>
      <code className="javascript" style={{ background: "transparent" }} ref={codeRef}>
        {`
export function useWeb3AnalyticsReporter() {
  const { pathname, search } = useLocation(); //depends on project routes manager 
  const { provider } = useWeb3React(); //depends on project web3 providers handling

  //track page-views
  useEffect(() => {
    Web3Analytics.trackPageView(pathname, search);
  }, [pathname, search]);

  //track web3 activity



  12345677890-
  useEffect(() => {
    if (provider) {
      Web3Analytics.walletProvider(provider);
    }
  }, [provider]);
}`}
      </code>
    </pre>
  );
};

export default CodeSnippet;

Say hi to me on Twitter @haseeb_xrd 🐦
Adios!