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.

src/component/code.js

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">
      {props.code}
    </SyntaxHighlighter>
  );
};

src/index.js

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.
  libraries.html2react.processors.push(image);
  libraries.html2react.processors.push(CodeHighlighter);
};
...
...

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");
}</code></pre>
<!-- /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 WP.com an additional block for code called “SyntaxHighlighter”.

Again:

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

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: https://bundlephobia.com/[email protected]

So I would add code-splitting to your extension. That way, only when your component is present, the library is loaded: https://docs.frontity.org/learning-frontity/code-splitting

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: https://github.com/frontity/frontity/pull/238