16

Is there any simple way to convert markdown text from contentful api to render into html code to be display on html page. I have tried using pagedown and some similar techniques , but none seem to work for me .

svassr
  • 5,538
  • 5
  • 44
  • 63
Vineeta Mehta
  • 458
  • 1
  • 4
  • 10

5 Answers5

18

I'm a customer success manager at Contentful -

You can check out a list of recommended parsers by language on the our FAQ.

Also, feel free to send us messages on Intercom via our UI by clicking the 'Talk to Us' link :)

Meghan F.
  • 189
  • 2
  • 1
    Don't know if Contentful is stil around though (2018), the chat is silent as a ghost town. – Fellow Stranger Apr 06 '18 at 20:21
  • 1
    @FellowStranger we're still here. check out www.contentfulcommunity.com, www.contentful.com/slack, www.contentful.com/contact, the in app chat, submit a support ticket, or come to a meetup to get ahold of us! – CharlieC Jun 01 '18 at 21:16
3

Here's how I did it with React:

class NewsDetail extends React.Component {
    render() {
        const body = marked(this.props.body || "");
        return (
                <div className="news-detail">
                <h2>{this.props.title}</h2>
                <div dangerouslySetInnerHTML={ { __html: body } }></div>
                </div>
        );
    }
}

The markdown content is stored in the body attribute of the NewsDetail tag (via a short function that maps contentful data structure to my app structure).

The HTML page has this script tag to pull in the marked function:

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
Eric Clack
  • 1,886
  • 1
  • 15
  • 28
  • It's probably also worth mentioning that you should sanitize the markdown before setting the elements html directly. You could use DOMPurify to get the sanitised output this would prevent a XSS attack. – David B Jul 22 '22 at 23:14
3

I know I'm late but here's the solution using handlebars:

var marked = require('marked');
marked.setOptions({
  renderer: new marked.Renderer(),
  sanitize: true,
  smartLists: true,
  smartypants: true
});

//Home
router.get('/', (req, res) => {
  client.getEntry('<ENTRY_ID>')
  .then( (entry)=> {
    entry.fields.body = marked(entry.fields.body);
    res.render('static/index',
     {
       entry: entry,
       user: req.user
     });
  }).catch( (err) => {
    console.log(err);
  })
});

Then in our index.hbs template we can call the markdown variable in this case (entry.fields.body) by using {{{}}} to prevent escaping. 

{{{entry.fields.body}}}
Kyriediculous
  • 99
  • 2
  • 12
2

I have used ReactMarkdown module: in case you also have a react app: https://github.com/rexxars/react-markdown

Example: npm install --save react-markdown

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)

I am passing markdown through props and using this module inside of my child component.

margarita
  • 884
  • 1
  • 10
  • 21
0

I also did the same as margarita in a react app but in the child component and I pulled my markdown from contentful.

I installed react-markdown package

with

npm install react-markdown

import React from "react";
import ReactMarkdown from "react-markdown";

const AboutIntro = (props) => {
    return (
        <div>

            <h2 className="about__intro-title">
                {props.aboutTitle}
            </h2>

            <ReactMarkdown>
                {props.aboutCopy}
            </ReactMarkdown>

        </div>
    )
}
export default AboutIntro;

hope this helps

Stefan T
  • 111
  • 8