web-dev-qa-db-ja.com

HTMLへの満足のいくAPIマークダウン変換

マークダウンテキストをコンテンツの多いAPIからHTMLコードに変換してHTMLページに表示する簡単な方法はありますか？ページダウンや同様のテクニックを試してみましたが、どれもうまくいかないようです。

markdowncontentful
14
Vineeta Mehta

私はContentfulのカスタマーサクセスマネージャーです-

よくある質問 で、言語ごとの推奨パーサーのリストを確認できます。

また、「Talk to Us」リンクをクリックして、UI経由でインターコムにメッセージを送信してください:)

15
Meghan F.

私は遅れていることを知っていますが、ハンドルバーを使用した解決策は次のとおりです。

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

次に、index.hbsテンプレートで、{{{}}}を使用してエスケープを防ぐことにより、この場合はマークダウン変数（entry.fields.body）を呼び出すことができます。

{{{entry.fields.body}}}
3
Kyriediculous

これが私が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>
        );
    }
}

マークダウンコンテンツは、NewsDetailタグのbody属性に保存されます（コンテンツのあるデータ構造をアプリの構造にマッピングする短い関数を介して）。

HTMLページには、marked関数を取り込むための次のスクリプトタグがあります。

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

私はReactMarkdownモジュールを使用しました：reactアプリもある場合： https://github.com/rexxars/react-markdown

例：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')
)

小道具にマークダウンを渡し、子コンポーネント内でこのモジュールを使用しています。

1
margarita

また、reactアプリでマルガリータと同じことをしましたが、子コンポーネントで、満足のいくものからマークダウンを引き出しました。

React-markdownパッケージをインストールしました

と

npm installreact-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;

お役に立てれば

0
Stefan T