Cycle of Tech

週１投稿目指してます。

自分が投稿した記事をあまり見ないせいで全然気づきませんでした。ちらっと自分の記事を見るとあら不思議、コードもh3タグも何もかもが単純なdivで出力した時と変わらない表示になっていたじゃないですか。

htmlのパースにはhtml-react-parserを使っていたのですが、これの問題かとdevtoolを確認しても正しくHTMLタグは設定されている...

どうしたもんかと調べるとhtml-react-parserにはこんなふうに置換する機能があるようだと

import parse, { domToReact } from 'html-react-parser';

const html = `
  <p id="main">
    <span class="prettify">
      keep me and make me pretty!
    </span>
  </p>
`;

const options = {
  replace({ attribs, children }) {
    if (!attribs) {
      return;
    }

    if (attribs.id === 'main') {
      return <h1 style={{ fontSize: 42 }}>{domToReact(children, options)}</h1>;
    }

    if (attribs.class === 'prettify') {
      return (
        <span style={{ color: 'hotpink' }}>
          {domToReact(children, options)}
        </span>
      );
    }
  },
};

parse(html, options);

え!?みんなこんなことしてmicroCMSからデータ取得して表示するの!?と。そんなわけないでしょともう少し調べるとこんな記事が...

どうやらtailwindの仕様らしく、addonを追加して対象の部分にこんなstyleを設定するだけでちゃんと表示されました

<div className="prose lg:prose-xl">{parse(data.content)}</div>

終わってみればなんてことないもの、これを解決するのに結構時間がかかりました...なんならzennの記事を見つけれてなかったらまだ解決してないかも...

microCMSで作った記事にスタイルが反映されていなかった【tailwind】