結論: remark-parse のバージョンが8系から9系に上がった時にこの問題が発生するようになった
作業記録ログ
やらないといけないことがある時に限って細かいことが気になり始めた。 そうです。昨日の引き続きの太文字の動き。
この現象ね。
英語は単語と単語の間にスペースが入るので問題なさそうだけど、日本語の場合文の一部分だけ太文字にする場合に表示崩れが起きるので困るんだよなあ。
下記の文章で再現ができる
この記事では実際に**[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 のバージョンを変えてみる。 下記の画像のようにドロップダウンを変更するとバージョンを簡単に変えることができる。
昨日の作業ログにあったが、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系に変えてみる
再現した。ということはこれは Gatsby が内部で依存しているremark-parseの問題であって、このバージョンを変える必要がある。 ちなみに最新の10系でも同じ問題が発生していた。8系では発生していないので 8から9系へのメジャーバージョンアップ時に発生したバグっぽい。
とりあえず、どういう原因で太文字が正しく表示されないのかわかって少しスッキリした。 次の動きとしては remark-parse の問題でわかったことを下記のスレッドにコメントしてもいいかもしれない
https://github.com/remarkjs/remark/issues/908
本日の作業
labelmake.jp
pdfmeライブラリをlabelmake.jpで使う #1269
ようやく取り掛かれる。一旦ブランチを切ってUIだけでも動かしてみる へんなデータができないように気をつけないといけない
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