Håkon Underbakke

I came across an interesting challenge recently while I was building a flexible searchable list component. I wanted it to work so that you could pass any JSX or react components into the list, and be able to search it just like a normal string. I came up with a neat recursive function to help me out, let’s go through it step by step.

Building the function

The goal of this recursive function is to end up returning a string. Javascript will read the react node as either an array of objects (and possibly strings), a single object, or a string. Let’s first check if the node is an array, and then return each of the plain strings, while running the function again on each of the objects (nodes).

Case: Multiple children

In the case of multiple children, reactNode will be an array.

const getRecursiveChildText = reactNode => {
    if (Array.isArray(reactNode)) {
        // Multiple children
        let joinedNodes = [];
        reactNode.forEach(node => {
            if (typeof node === "object") joinedNodes.push(getRecursiveChildText(node));
            else if (typeof node === "string") joinedNodes.push(node);
        });
        return joinedNodes.join(" ");
    }
};

Now that we’ve dealt with the case of it being an array, let’s deal with the cases of it being a single child.

Case: Single children

In the case of a single child, it will either be an object (new node) or a string.

const getRecursiveChildText = reactNode => {
    const children = reactNode.props.children;
    if (Array.isArray(reactNode)) {
        // Multiple children
        let joinedNodes = [];
        reactNode.forEach(node => {
            if (typeof node === "object") joinedNodes.push(getRecursiveChildText(node));
            else if (typeof node === "string") joinedNodes.push(node);
        });
        return joinedNodes.join(" ");
    }
    if (typeof children === "object") {
        // Found direct child
        return getRecursiveChildText(children);
    }
    if (typeof children === "string") {
        // Found searchable string
        return reactNode.props.children;
    }
};

Finished function

To finish the function off, let’s just add a little failsafe above the single child checks. I have also added a very simple search function, just to demonstrate how getRecursiveChildText might be used.

const getRecursiveChildText = reactNode => {
    const children = reactNode.props.children || undefined;
    if (Array.isArray(reactNode)) {
        // Multiple children
        let joinedNodes = [];
        reactNode.forEach(node => {
            if (typeof node === "object") joinedNodes.push(getRecursiveChildText(node));
            else if (typeof node === "string") joinedNodes.push(node);
        });
        return joinedNodes.join(" ");
    }
    if (children === undefined) {
        if (typeof reactNode === "string") return reactNode;
        else return " ";
    }
    if (typeof children === "object") {
        // Found direct child
        return getRecursiveChildText(reactNode.props.children);
    }
    if (typeof children === "string") {
        // Found searchable string
        return reactNode.props.children;
    }
};

const searchNode = (node, que) => {
    const searchableText = getRecursiveChildText(node);
    if (searchableText.toUpperCase().search(que.toUpperCase()) >= 0){
       /// found match...
       return true;
    }
    return false;
}

THIS ARTICLE IS OUTDATED. I’m currently using a different, better setup. Please refer to this article instead.

The problem: WordPress’ REST API supplies the blogpost’s body as a string of HTML. This makes things a bit more complicated when trying to add most of the react syntax-highlighting packages, seeing as most of them are wrapper components.

The solution: Highlight.js gives us a function, highlightBlock(), which takes an HTML node, tries its best to automatically detect the language and then applies syntax highlighting.

How to set it up

The first step is to install highlight.js

npm i highlight.js

Then, in a callback after receiving the blogpost and putting it into state, initiate highlight.js using hljs.highlightBlock() on every instance of pre code

import React from "react";
import axios from "axios";
import hljs from "highlight.js";

class App extends React.Component {
  componentDidMount(){
    axios
      .get(
        `${siteURL}/wp-json/wp/v2/posts/?include[]=${this.state.postID}`
      )
      .then(res => res.data)
      .then(blogPost => {
        this.setState({
            blogPost: blogPost,
            loaded: true
        }, this.initiateSyntaxHighlighting);
      });
  }
  initiateSyntaxHighlighting = () => {
    document.querySelectorAll("pre code").forEach(block => {
      hljs.highlightBlock(block);
    }); 
  }
  // ...
}

I use axios in this example to retrieve my post, but the important part is just the initiateSyntaxHighlighting() method.

Choosing a theme

Go to highlightjs.org and pick a theme you like by clicking on the style-name under the demo. Once you find one you like (I use atom-one-dark), go ahead and download the relevant stylesheet from here. Once you’ve downloaded the stylesheet, include it into your project.

If you want to apply some extra styles to the code-box, you can easily do that using the following selector:

.wp-block-code code{
  font-size: 0.7em;
  padding: 13px;
}

Adding line-numbers

To add line-numbers, we are going to use CSS – but first we need to modify our code a bit so that we can target each line individually.

  initiateSyntaxHighlighting = () => {
        const codes = document.querySelectorAll("pre code");
        codes.forEach(block => {
           hljs.highlightBlock(block);
           const lines = block.innerHTML.split("\n");
           const newLines = [];
           lines.forEach(line => {
              newLines.push(`<div class="code-line">${line}</div>`);
           });
           block.innerHTML = newLines.join("\n");
        });
  }

What we do here is first make an array of each line by splitting the innerHTML of each block. Then we loop through this array, and wrap the line with a div called .code-line. Finally, we update the innerHTML of the code-block to newLines.join("\n").

In our CSS, we now need to create a counter.

.wp-block-code code {
  counter-reset: line;
  padding: 17px 40px; 
}
.wp-block-code code .code-line{
  display: inline-block; // important to prevent each line from becoming a paragraph.
  position: relative;
}
.wp-block-code code .code-line:before{
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  position: absolute;
  top: 0;
  left: -30px;
  opacity: 0.5;
}

By resetting the counter on each code, and incrementing on each .code-line, we get an accurate line count positioned to the left of the line.

My thoughts

Highlight.js does a pretty subpar job at detecting the language, as I expected. The upside to this is that it usually does decent syntax-highlighting even though it gets the language wrong. I’m sure there are many better solutions to this problem, but it was a relatively straight forward and easy fix to my problem, and so I’m happy with it. If you want a quick fix for this specific scenario, then I’d definitely suggest this method.