contentful api markdown conversion to HTML

Question

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

Answer 1

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.

Answer 2

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 :)

Answer 3

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

Answer 4

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}}}

Answer 5

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>