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.
