How to enable Code Syntax Highlight in React App

6 min readDec 30, 2018

Syntax Highlighting for code snippets is important when you want to make code snippets more readable and more attractive for user particiaption. It wouldn’t be difficult task if you already know how to use CSS and intergate JavaScript Pakcages such as highlight.js in your project.

So I tried to integrate it inside the markdown interpreters in React Application but I couldn’t make them work easily.

I found that there is no sufficent documentation for beginners to implement the syntax highlight features. While reading documentations from some of markdown relevant React packages such as react-markdown and react-marked-markdown.

It was easy after all. But if there were any simple documentations for that it could have saved many developers from repeated search and trials.(I found that many developers are asking the same question and the improvment of documentaition in some packages also)

So I decided to write this article to help future developers with the same problem.

I let TL:DR; first. You just need to do simple two tasks if you just want to save your time. Otherwise, You can read the whole article to understand the process.

Use markdownPreview module from react-marked-markdown to make highlight.js work for your code snippet to be stylable by CSS.

import React from "react";
import { MarkdownPreview } from "react-marked-markdown";<MarkdownPreview 
    value={value}
    markedOptions={{
        langPrefix: "hljs" // # [1]
    }}
/>// 1. separate code snippets with variables, keywords, type etc
// also prefix hljs for class to make them stylable.// You can read more at its official github repository about 
// making boilerplate for makrdown interpreter.

2. Donwload your prefered CSS file for syntax highlighting from cdnjs website and include it inside your main index.html in your React Project.

So the entire task you need to follow are just two phases. But it will be better for you to understand the process with more details.

Before move on, I want to mention that I decided to use react-marked-markdown package instead of react-markdown package for it was much more simpler and worked well for the purpose.

(It seems that its content owner is not actively developing the project anymore . But the markdownPreview module is releatively simple and you may implement your own later if you want. So I think that it will be ok and you can use what you learnt here with other packages also)

[Table of Contents]

Markdown(from react-marked-markdown)
highlight.js
CSS for it to work
Conclusion

1. Markdown(from react-marked-markdown)

Markdown is convenient tool to help you write easily static contents for blog posts, news and documentation etc instead of writing every detail of html on your own.

I assume that you are already familiar with markdown so I wouldn’t explain details about it. Otherwise, you may visit markdowntutorial to start to learn it.

What interest us as React Developers here is how to make React Component to enable code snippet syntax highlighting. We will need React markdown interpreters to make our lifes easier.

I told you that we will use react-marked-markdown package for that. Its doucmentation tells that it supports syntax highlighting with

Syntax highlighting

react-marked-markdown supports syntax highlighting with highlight.js

But it is difficult to find how on your own just reading those two lines. So we have to find on our own with given information and we can do that by reading source code.

We are not sure what to do with those two lines but it seems that we have to understand how markdownPreview component for our purpose.

So you might visit the page and found that there are option for

langPreifx: "hljs" and it does something inside if statements like the image below.

Code Snippet from react-marked-markdown by steadylearner

Comparing it from the official documentation about options below

Options

Behind the scenes, react-marked-markdown uses marked as Markdown parser. So all marked options are available here.

Here is an example with default options :

<MarkdownPreview
  value="# Hey !"
  markedOptions={{
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
   }} />

We can understand that except langPrefix: "hljs " others are all given by default. So what we should do is just to include it like the code snippet in TL:DR; part

<MarkdownPreview 
    value={value}
    markedOptions={{
        langPrefix: "hljs" //
    }}
/>

So we had to write just few lines to prepare for highlight.js to work inside React Markdown intenrpreter.

2. highlight.js

the example of hljs prefix from highlight.js at www.steadylearner.com

But we still have to verify it work or not. At this point, You may already included it in your React project. You can compile the project and use inspect elements(CTRL + SHIF + I) for the component inside your browser, you will see that elements are separted by its role with the help of highlight.js.

(If you have tested the components before it would be simple <code>some html codes here</code> and very different from the above image)

So we found that everything is working fine and what we have to do would be styling each “hljs” prefixed html elements with CSS files.

Maybe we shouldn’t have to understand this details about highlight.js and how it works. But we always have to find how to integrate pacakges from others, if wedecide to include it on your own project like this case for React.

3. CSS for it to work

What we have to do from now on is just to find how to style them with your prefered CSS files and there is a tons of them.

search it easily at cdnjs website.

2. Select on of your favorite CSS file to include in your index.html among the search results.

highlight.js CSS results from cdnjs by steadylearner

3. Write simple code with html <link> tag like example below.

# Include it in Your index.html for your React Project<!DOCTYPE html>
<html lang="en"><head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
</head><body>
  <div id="app"></div>
</body></html>

and everything is ready and you can see your code snippet styled inside your markdown interpreter like screenshot above.

(You may still need to find CSS for other component irrelevant to code snippets to complete this process but you can find them easily with search and I wouldn’t write about it here for that would be different for the purpose of each project and not necessary for this posts.)

4. Conclusion

Before passing through the learning process to enable this process, I thought that it would take much time to make it on my own. But what we really had to do is just to include few lines of codes in your exisitng project.

You may found sometimes we have to find ways to solve problem with seemingly restriced information while reading this post.

Hope this post helped you to solve the problem and What you learnt here could be implemented in other cases also.

Thanks and please share this post with others.

p.s

Did you like my coding style? Work with me. Please, send messages via LinkedIn. I am also the writer of React Package prop-passer you may read How To Write React Efficiently with Prop-Passer
I am also developing React FrontEnd and Rust BackEnd Website www.steadylearner.com. It lacks contents but I would write it again together with real posts written here.

I am not a native English speaker. When some words don’t make sense, grammar problems etc. Please leave a comment below. I will read this post again and edit them right away.