1. ホーム
  2. javascript

[解決済み] AngularJSでMarkdownをHTMLに変換する

2022-02-15 16:05:35

質問

Contentful APIを使用して、あるコンテンツを取り込んでいます。コンテンツはjsonオブジェクトとしてNodeサーバーに届き、NodeサーバーはそれをAngularフロントエンドに渡します。jsonオブジェクトのコンテンツは、未処理のマークダウンテキストを含んでいます。

例えば、Angularの呼び出しは次のようになります。

var id = "asdf76f7g68sd7g";
$http.get("/api/article/" + id).then(function(res){
  $scope.article = res.data;
});

そうすると、$scope.articleのオブジェクトは次のようになります。

$scope.article = {
  title: "Some title",
  content: "Lorem ipsum [dolor](http://google.com) sit amet, consectetur adipiscing elit. Integer iaculis turpis ut enim eleifend venenatis. Proin nec ante quis nulla porta finibus. Suspendisse at [mauris](http://google.com) nisi."
};

そして、私のHTMLでは、このようなコンテンツを表示します。

<p>{{article.title}}</p>
<p>{{article.content}}</p>

ここでの問題は、マークダウンがHTMLに変換されず、オブジェクトに表示されているようにレンダリングされることです。どのようにすれば、任意のマークダウンをHTMLに変換し、その結果をレンダリングできるのでしょうか?

どのように解決するのですか?

最も簡単な方法は、MarkdownをレンダリングできるAngularディレクティブを見つけることでしょう。

Googleで簡単に検索すると https://github.com/btford/angular-markdown-directive . これで問題は解決です。