Skip to main content

Gatsbyの太文字の表示バグの正体

· 5 min read

結論: remark-parse のバージョンが8系から9系に上がった時にこの問題が発生するようになった


作業記録ログ

やらないといけないことがある時に限って細かいことが気になり始めた。 そうです。昨日の引き続きの太文字の動き。

この現象ね。 CleanShot20220223at234425

英語は単語と単語の間にスペースが入るので問題なさそうだけど、日本語の場合文の一部分だけ太文字にする場合に表示崩れが起きるので困るんだよなあ。

下記の文章で再現ができる

この記事では実際に**[Shopify](https://www.shopify.jp/)**にアプリをインストールして宛名印刷を行う手順を説明させていただきます。

1、2分あれば過去の注文情報から宛名を作成することができます。

まずはじめに**[Shopifyのアプリストア](https://apps.shopify.com/?locale=ja)**に遷移します。

まあ要するに太文字にスペースが入っていないということです。

ちなみに、このブログはTyporaで書いて、docusaurusで表示しているんだけど、上記の事象は発生しない。

となるとこれはGatsbyの問題なのではという話になってくる。

remarkの動きを見るのが良さそうだなと思った。Playgroundを調べるとあった。

下記のIssueのコメントのリンクで試すことができる。 https://github.com/remarkjs/remark/issues/447#issuecomment-580256529

code sandboxで開いてまずびっくりしたのが再現しないというね。remark-parse のバージョンを変えてみる。 下記の画像のようにドロップダウンを変更するとバージョンを簡単に変えることができる。

CleanShot20220224at132212@2x

昨日の作業ログにあったが、9系と6系が混在しており、うまく動いていなかった。

remark-parse "^9.0.0"
remark-parse "^6.0.3"
remark-parse "^9.0.0"
remark-parse@^6.0.3:
remark-parse/-/remark-parse-6.0.3.tgz"
remark-parse@^9.0.0:
remark-parse/-/remark-parse-9.0.0.tgz"
remark-parse "^9.0.0"

9系に変えてみる

CleanShot20220224at132546@2x

再現した。ということはこれは Gatsby が内部で依存しているremark-parseの問題であって、このバージョンを変える必要がある。 ちなみに最新の10系でも同じ問題が発生していた。8系では発生していないので 8から9系へのメジャーバージョンアップ時に発生したバグっぽい。

とりあえず、どういう原因で太文字が正しく表示されないのかわかって少しスッキリした。 次の動きとしては remark-parse の問題でわかったことを下記のスレッドにコメントしてもいいかもしれない

https://github.com/remarkjs/remark/issues/908

本日の作業

labelmake.jp

pdfme

  • [Can't press Bulk update Field Names button #44]

    docusaurusの box-sizing: border-box; が影響していた

    https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing というのがあるが使ったことがなかった。 borderを使ったレイアウトで使えそう。むしろ今もUIのborderがずれている問題があるし

明日の作業

labelmake.jp

life

確定申告 #169

[] PLG プロダクト・レッド・グロース #102


日記