2015-12-10 14 views
8

マークダウンテキストを内容の良いAPIからHTMLコードに変換してHTMLページに表示する簡単な方法はありますか?私はpagedownといくつかの似たようなテクニックを使ってみましたが、どれも私にとってはうまくいかないようです。内容の整ったapiマークダウンからHTMLへの変換

+1

コードを書くためにどの言語を使用していますか? Meghanの答えが正しいパッケージを直接指すように追加してください。 – Ivan

答えて

8

私はContentfulでお客様の成功マネージャーだ - あなたはour FAQ上の言語が推奨するパーサのリストをチェックアウトすることができ

。また

、リンク「私たちに相談して」:)

1

をクリックすることで、当社のUIを介して私たちのインターホンにメッセージを送ること自由に感じここでリアクトと私はそれをやった方法は次のとおりです。

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

値下げコンテンツNewsDetailタグのbody属性に格納されます(コンテンツ構造のデータ構造をアプリケーション構造にマップする短い関数を介して)。

HTMLページがマークされた機能に引っ張るために、このスクリプトタグを持っています

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 
2

は、私が遅刻を知っているが、ここでハンドルバーを使用したソリューションです:

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

次にGoogleのインデックスに。 hbsテンプレートでは、{{{}}}を使ってこのケース(entry.fields.body)でマークダウン変数を呼び出して、エスケープを防ぐことができます。

{{{entry.fields.body}}} 
+0

これは、JavaScriptでのテンプレート作成にマークとnunjucksを使用した場合のみです。 どのようなテクノロジースタックを使用していますか? –

+0

@WillHancockこれはexpress + handlebarsビルドのようです。 – MattClaff

関連する問題