Trouble formating <pre> using Prism in Gatsby

I’m having trouble getting Prism working with the Remark transformer in Gatsby as described here:

The issue seems to be that Prism works off the <code> tag but Prismic outputs <pre> markdown. I set up an HTML Serializer to place a <code> tag with a language-js class inside the preformat tag per this:
https://prismic.io/docs/reactjs/beyond-the-api/html-serializer

I also had to add this Prism hook to maintain line breaks:

However white space is removed and also Prism isn’t picking up the Javascript code, presumably because it needs raw text rather than (serialized) HTML.

I think what I need is for prismic-reactjs Elements to return raw text rather than HTML. Is this possible?

I take it I’m going about this the wrong way, but any insight would be appreciated. Or perhaps this is a question more for the Prism or Gatsby folks.

Hi Michael,

Welcome to Prismic community, I will try to help you on this.

I don’t think that will need to use an HTML serialiser, and you might need to use a dedicated structured text field in your custom type where you can only add a ‘pre’ tag.

Then in your project you will pass this field as text as shown here:

https://prismic.io/docs/gatsby/rendering/rendering-the-rich-text-or-title-field#10_0-output-as-plain-text

Then wrap it in the correct tags like we do in our Slice machine documentation:

Please let us know if that doesn’t fix the problem.

Fares

Great thanks that works. So the way to get text was just to add another field and have it render asText. Thanks!

Now I just need to figure out how to use slices to intersperse my fields with code. I take it I’ll need to manually add multiple fields to each document, e.g. if I have to embed two code blocks my code will end up looking like:

{RichText.render(project.project_description)}
<pre>
    <code class='language-js'>
        {RichText.asText(project.code)}
    </code>
</pre>
{RichText.render(project.project_description_2)}
<pre>
    <code class='language-js'>
        {RichText.asText(project.code_2)}
    </code>
</pre>

etc.

Ok I’m guessing I should create a container slice field (e.g. body) that could then contain repeatable Rich Text description as well as code slices.

Hi,

Happy to hear that the proposed solution was useful.

I think mean that want to create a sliceZone as “e.g.body” that contains the repeatable Rich Text “description”.
Basically, you use Slices like building blocks for you page, you would have a text slice and a code slice and intersperse them as you need in your document.

To learn more about Slices I can recommend you to have a look at this page as well as this video to learn how to use Slices.

Please let us know if you have any doubts,
Fares