Trouble formating <pre> using Prism in Gatsby

Developing with Prismic
1

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:

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.

4

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

5

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.

6

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.

7

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