Code formating in datoCMS Structured Text in Gatsby

Question

I'm making a Gatsby blog with datoCms. Previously I kept all my posts as .md files and formated the code blocks with Prism.js. I converted all my blog posts into records of a Post model in datoCms - added and formatted the markdown body in a Structured Text. It is displayed on my site like so:

...
export const query = graphql`
  query($locale: String!) {
    allDatoCmsPost(sort: {date: DESC}) {
      edges {
        next {
          slug
        }
        previous {
          slug
        }
        node {
          title
          slug
          readingTime
          date(formatString: "DD MMMM YYYY")
          featuredLabel
          featured {
            gatsbyImageData(width: 750)
          }
          tags {
            name
          }
          markdown {
            value
          }
        }
      }
    }
...
...
...
return (
  <div className={postStyles.html}>
      <StructuredText data={posting.markdown}/>
  </div>
)

I tried adding style from a scss module - works fine - but doesn't support syntax highlighting. Inspecting the html on site shows no syntax-specific styles so maybe that isn't supported?? This is my styles module, and all the different ways I tried to get to a variable color

.html {
  font-size: 16px;
  font-family: 'CourierPrime', monospace;
  p, h1, h2, h3, div, ul, li, a, span {
    font-size: 16px;
    font-family: 'CourierPrime', monospace;
  }
  h1 {
    font-size: 24px;
    text-decoration: underline dashed 2px var(--secondary-color);
    text-underline-offset: 4px;
  }
  h2 {
    font-size: 22px;
    font-weight: 1000;
    text-decoration: underline dashed 3px var(--secondary-color);
    text-underline-offset: 4px;
  }
  h3 {
    font-size: 20px;
    font-weight: 600;
    text-decoration: underline dashed 3px var(--secondary-color);
    text-underline-offset: 4px;
  }
  code {
    background-color: var(--highlight);
    color: var(--primary-color);
    padding: 4px;
    border-radius: 1px;
    word-wrap: break-word; 
    letter-spacing: 1.15px;
    font-size: 14px;
  } 
  pre code {
    background-color: #1f1f42;
    color: white;
    display: block;
    padding: 0.5rem;
    margin: 1rem;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    line-height: 1.5;
    max-width: 70vw;
    min-width: 300px;

    span[class*="variable"]{
      color: red;
    }
    // .variable {
    //   color: red;
    // }
    // .token.variable {
    //   color: red;
    // }
    // span.token.variable {
    //   color: red;
    // }
  }
}

The rendered html :

<pre data-language="c">
  <code>...</code>
</pre>

Am I supposed to be using Rich Text for post body? Are there any plugins that would help here? Maybe I didn't config my prism.js right when switching to datoCms?

Answer 1

you are on the right path to achieving syntax highlighting with a StructuredText field. All should work fine if all has been setup correctly.

Here are two ways I suggest you can use to achieve syntax highlighting. Hopefully it helps you and others with similar issues.

import { renderNodeRule, StructuredText } from "react-datocms";
import { isCode } from "datocms-structured-text-utils";
import Prism from "prismjs";
import SyntaxHighlight from "components/SyntaxHighlight"; // Update the path to the custom syntax highligher component depending on your project

<StructuredText
    data={data.posting.markdown}
    customNodeRules={[
        // Use a Prism syntax highlighter component for code blocks
        renderNodeRule(isCode, ({ node, key }) => {
            return (
                <Prism
                    key={key}
                    code={node.code}
                    language={node.language || "unknown"}
                    highlightLines={node.highlight}
                    showLineNumbers={node.code.split(/\n/).length > 10}
                />
            );
        }),

        // Use a custom syntax highlighter component for code blocks
        renderNodeRule(isCode, ({ node, key }) => {
            return (
                <SyntaxHighlight
                    key={key}
                    code={node.code}
                    language={node.language || "unknown"}
                    linesToBeHighlighted={node.highlight}
                />
            );
        }),
    ]}
/>;