Syntax Highlighting RichText with Hygraph CMS and Next.js

Prerequisites

• highlight.js
• Hygraph CMS Rich Text Renderer
• (Optional) Tailwind CSS with Typography Plugin

_app.js Configuration

// _app.js

import "highlight.js/styles/base16/material-darker.css";

Layout Configuration

// Layout.js;

import { useEffect } from "react";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
hljs.registerLanguage("javascript", javascript);

function Layout({ children }) {
  useEffect(() => {
    hljs.highlightAll();
  }, [{ children }]);

  return (
    <div>
      <main className="container">
        <Navbar />
        {children}
        <Footer />
      </main>
    </div>
  );
}

export default Layout;

Syntax Highlighting

// GraphQl Function

content {
  raw
}

// [slug].js

import { RichText } from "@graphcms/rich-text-react-renderer";

function ArticlePage({ article }) {
  return (
    <div className="container prose prose-lg">
      <h1>{article.title}</h1>
      <RichText
        content={article.content.raw.children}
        renderers={{
          code_block: ({ children }) => (
            <pre>
              <code className="js">{children}</code>
            </pre>
          ),
        }}
      />
    </div>
  );
}

export default ArticlePage;