Left Arrowback

Contenful & graphQL: renderMark

August 29th, 2021

I've been currently working on modifying the JSON object sent to graphQL from the contentfulAPI. The issue started with the code being sent back as a string and I'm currently working towards a solution. The code is in this repo: https://github.com/robert-s-hogan/portfolio-rework-with-gatsby/blob/master/src/templates/blog.js and starts around line 27. I'm currently running a bunch of default JS .replace() functions to modify the JSON object one by one. I guarantee there is a better way to do this but this is what I have for now.

The following code allows manipulation of the CODE (<>) block in contentful.

BLOG: Contentful & graphQL: Code Block

I ended up using a combination of the h6 and Code block for the time being. That was the best solution I could come up with at the time. I started off using the normal text which is a <p> tag. By default the <p> tag is wrapped around the <code> HTML when the renderMark [MARKS.CODE] is called. This was a bit annoying because I didn't even realize that the <p> tag was selected /rant. Since its a blog, the <p> tag is fairly common so I decided to use the <h6> instead.

BLOG: Contentful and GraphQL: renderMark Query

Here is the code used to target the <h6> and <code> content blocks:


const options={ renderMark:{ [ MARKS.CODE ]:text=>
{ 
if(text.length>
0){ return (
  <div
    className="code-block">

  <pre>

  <code>
{ formatString(text) }
  </code>

  </pre>

  </div>
);
 } },  }, 

Above is the working output (pending fix).

Left Arrowback

Made by Robert 2018