Markdown is a way to style text on the web that can be converted directly into HTML, similar to what the Prismic Rich Text field does. With markdown you can give format to 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 sort of native markdown editor for the moment, but this doesn't mean you can't use markdown. Here's an example on how to do it.
 

1. Add a field for the markdown text

Inside your Custom Type, add a field for your raw Markdown text. We recommend using a Rich Text field that only allows preformatted text as explained in this article Adding custom embed or html code.
 

2. Add your markdown to the new field

Once you added the field, add some markdown to your page & publish the document in Prismic. Here is an example of what the field will look like when you enter your markdown to the field.

3. Query your content and save the markdown text in a variable

Once you have markdown available in your Prismic document. Then in your application you will need to query that page. This article won't cover how to query your content, but you can explore the Prismic documentation to learn more about this.

Once you've queried your document, the first step will be to store the markdown text in a variable. For the rest of the article, we'll be showing you how to do this using ReactJS.

💡Take into account that 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. For example, here's the documentation for ReactJS.

Here is an example of how to save the value from a Rich Text field.  In this case the Rich Text field that was setup in step 1 has the API ID of markdown:

import { RichText } from 'prismic-reactjs'

const rawMarkdown = RichText.asText(doc.data.markdown)

 Now that we have the raw markdown text, we can parse it into HTML.
 

4. Use a third party tool to parse the raw markdown

From here you'll need to search for a third party tool according to the technology that you are using that will parse the markdown. Since we're working with React 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. In the example below we have passed the Prismic document object (containing the markdown field) into our App  component.

import React from "react";
import { RichText } from 'prismic-reactjs'
import ReactMarkdown from "react-markdown";

function App(doc) {

 const rawMarkdown = RichText.asText(doc.data.markup)

  return (
    <div className="App">
      <ReactMarkdown source={rawMarkdown} />
    </div>
  );
}

export default App;

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:

Did this answer your question?