Markdown is a way to style text on the web, similar to what the Prismic Rich Text field does. With markdown, you can format the text as you’d do in a text editor, assigning usual properties such as bold or italics, adding images, and creating lists or checklists.
Prismic doesn't offer any native markdown editor for the moment, but this doesn't mean you can't use markdown.
1. Add a field for the markdown text
Inside your Custom Type, add a Rich Text field that only allows preformatted text as explained in this article Adding custom embed or html code for your raw Markdown text.
2. Add markdown to the new field
Once you added the field, go to your documents, add the markdown and publish it. Here is an example of what the field will look like in the document's field.
3. Query your content and save the markdown text in a variable
Once you have markdown available in your Prismic document, you need to query that page. After querying your document, store the markdown field in a variable. In this example, we're using ReactJS.
import { RichText } from 'prismic-reactjs'
const rawMarkdown = RichText.asText(doc.data.markdown)
The rendering of the field is going to depend on the technology that you are using. Check out our developer docs to see how to template according to your technology.
4. Parse the raw markdown
Now that we have the raw markdown text, we can parse it into HTML. You'll need to use a tool according to the technology you are using to parse the markdown. In this example, we'll be using the react-markdown package that allows you to render markdown as pure React components.
Import the react-markdown package and use it to render the markdown text. We have passed the Prismic document object (containing the markdown field) into our App component in the example below.
import React from "react";
import { RichText } from 'prismic-reactjs'
import ReactMarkdown from "react-markdown";
const markdownComponent = (doc) => {
const rawMarkdown = RichText.asText(doc.data.markup)
return (
<div className="App">
<ReactMarkdown source={rawMarkdown} />
</div>
);
}
export default markdownComponent;
And that's it! You should now see the rendered html from your markdown field. Here is an example of what the rendered response might look like:
