marked

marked

markedは、今回ダウンロードタグブログを作成することによって認識されたダウンロードタグライブラリである.
CLI、ブラウザ、ノード環境で使用可能で、非常に高速なタグダウンロードコンパイラと見なすことができます.gray-matterをStringからオブジェクトに変換した後、contentをマーキングメソッドのパラメータに変換します.

marked(content)

dangerouslySetInnerHTML

dangerouslySetInnerHTMLは、innerHTMLの代わりに応答で使用する方法である.正式なドキュメントでは、コードにHTMLを設定すると、ユーザーがエラーでWebサイト間スクリプト攻撃にさらされる可能性があります.
したがって,応答にHTMLを設定するためにdangerouslySetInnerHTMLと書き,オブジェクトとして伝達することができ,危険性を再認識させる.転送対象のキーは__htmlに設定されています.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

marked + jsx

// ... code 중략
<div className='post-body'>
  // marked에 props로 받아온 content를 넣어줌으로서 스트링을 마크다운으로 변환해 렌더링 해준다.
  <div dangerouslySetInnerHTML={{ __html: marked(content) }}></div>
</div>