Syntax-highlighter extension

In order to create the very first extension for frontity. I thought to create a package / extension for Syntax-highlighter. I did a POC to use this library with fronitity. For which I came across a react library for Syntax-highlighter as well as the prism. Create a html2react processor to process ‘pre’ tags and read the contents of the child ‘code’ element and render that with the SyntaxHighlighter react component.


import React from "react";
import SyntaxHighlighter from "react-syntax-highlighter";

const CodeHighlighter = {
  name: "codehg",
  priority: 1,
  test: node => node.component === "pre",
  process: node => {
    if (node.children.length > 0 && node.children[0].component === "code") {
      node.props.code = node.children[0].children[0].content;
      node.component = TestComponenet;
    return node;

export default CodeHighlighter;

const TestComponenet = props => {
  return (
    <SyntaxHighlighter language="java" showLineNumbers="true">


import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import CodeHighlighter from "./components/code";

const before = ({ libraries }) => {
  // We use html2react to process the <img> tags inside the content HTML.

wp HTML post sample for the code snippet

<!-- wp:code -->
<pre theme="coco"><code>public static void main(String[] args){
    System.out.println("Hello World");
<!-- /wp:code -->

This works well. Now I am planning to create an extension which will read attributes from pre tag like ( I am referring to this react implementation for other properties that are supported )

highlighterType = “prism” | “hljs” NOTE: hljs - syntax highlighter
theme= valid theme supported by respective library.
style= style supported by respective library
showLineNumbers= TRUE | FALSE ( to show line numbers )
startingLineNumber = Starting line number

I would like to get any other inputs from the team. That could be as basic as, whether this use case in itself is a valid use case that qualifies as an extension.

Hey @pandurang, sorry for the delay :slight_smile:

That’s awesome!

Yeah, I think it does.

The things I will explore would be:

  1. How people used to add code blocks before Gutenberg. Was it always a pre tag? Is there any other option?
  2. How Gutenberg code block works.
    • Is it just a pre?
    • Does it have any options?
  3. I know an additional block for code called “SyntaxHighlighter”.


  • Is it a pre?
  • Which options does it have?
  • Why are there two different code blocks in

Finally, I guess you will be using a library like react-syntax-highlighter, right? Those libraries contain a lot of rules for the different languages and are usually huge:[email protected]

So I would add code-splitting to your extension. That way, only when your component is present, the library is loaded:

Maybe including a setting to whiltelist the languages and reduce the bundle size would be great too. People don’t usually blog about 100 different languages, they blog about 2 or 3.

By the way, we’ve just fixed a bug with code-splitting but it’s not released yet. It’ll be included in the next version: