React markdown を使う

はじめに

ngx-markdown を使ってたけどroot module に import しきゃないけなく、また marked も使う為 vendor.js が大きくなったから移行する。

install

npm install react-markdown

mdファイル内でhtmlを書いてる場合うまく描画されない為以下もインストール

npm install rehype-raw

使用例

import * as React from 'react';
import * as ReactMarkdown from 'react-markdown'
import * as RehypeRaw from 'rehype-raw'
import { ReactCardOrigin } from './card-origin'

type prop = {
  articleText:string
}

export const ReactItemArticle:React.FC<prop> = prop => {
  return (
    <ReactCardOrigin>
      <ReactMarkdown
        className="markdown-body"
        linkTarget="_blank"
        children={prop.articleText}
        skipHtml={false}
        rehypePlugins={[RehypeRaw]}
      />
    </ReactCardOrigin>
  );
}

結果

肥大化した。もうやらん。