tag:crieit.net,2005:https://crieit.net/tags/Prism.js/feed Crieitでタグ「Prism.js」に投稿された最近の記事 2021-01-26T20:25:54+09:00 https://crieit.net/tags/Prism.js/feed tag:crieit.net,2005:PublicArticle/16651 2021-01-26T20:25:54+09:00 2021-01-26T20:25:54+09:00 https://crieit.net/posts/Bulma-Nuxt-Content-Prism-js <h2 id="環境"><a href="#%E7%92%B0%E5%A2%83">環境</a></h2> <ul> <li>nuxt: 2.14.6</li> <li>nuxt/content: 1.9.0</li> <li>prism-themes: 1.5.0</li> <li>nuxt-buefy: 0.4.3</li> </ul> <h2 id="デザイン大崩れ"><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%A4%A7%E5%B4%A9%E3%82%8C">デザイン大崩れ</a></h2> <p>Nuxt/Contentを使っていて、かなり苦戦した。特にNuxt/Contentが内包している、Prism.jsでコードのハイライトを出そうとしたときが辛かった。<br /> <a href="https://crieit.now.sh/upload_images/8ab28d65442b113bed0f81d1e532434a5ff697044862b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8ab28d65442b113bed0f81d1e532434a5ff697044862b.png?mw=700" alt="image" /></a><br /> これ、酷くない？</p> <p>最初、何か設定をミスったのかと思って、prismの導入あたりのドキュメントを見ても問題ないし、じゃあ、何かのバグかっていうと、突拍子もなさすぎて訳わからん。<br /> しばらく悩んで気がついた。<br /> Bulmaのスタイルが当たってるんだ。<br /> どうやらnumberというクラスが競合しているようだ。<br /> （正直、このnumberクラス、ドキュメントにもないし、初めて見た。そして、何というか、今後使うことなさそう……）<br /> 他にもtagというクラスが競合するらしい（未確認）。</p> <p>cssに関しては大の苦手なので、具体的な施策を提示する自信がないのですが、<br /> とりあえず、Bulmaのスタイルより優先度上のセレクタで上書きする感じで無理矢理やりました。</p> <h2 id="結構いました。"><a href="#%E7%B5%90%E6%A7%8B%E3%81%84%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82">結構いました。</a></h2> <p>調べてみたら同じ理由で困った人がちらほら。<br /> <a target="_blank" rel="nofollow noopener" href="https://papadays.com/post/5inybk0imz6r2ycmeoquwn/">Bulmaをやめてしまった人までいる。</a><br /> <a target="_blank" rel="nofollow noopener" href="https://stackoverrun.com/ja/q/9978069">みんな困ってるんだね。</a></p> <h2 id="他にも"><a href="#%E4%BB%96%E3%81%AB%E3%82%82">他にも</a></h2> <p>Nuxt/Content側の話で、見出しがやけに右に寄るなあ、てのもあった（画像2行目）<br /> <a href="https://crieit.now.sh/upload_images/7878ba53b27b21fcc3ce1b5c3b49da2e5ff6971d71552.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/7878ba53b27b21fcc3ce1b5c3b49da2e5ff6971d71552.png?mw=700" alt="image" /></a><br /> 見出しのリンク（h2 > a > span）にiconというクラスが割り当てられていて、そこにBulmaのクラスが当たって幅を持ってしまっていた。<br /> まあ、そもそもNuxt/Contentは「<a target="_blank" rel="nofollow noopener" href="https://content.nuxtjs.org/ja/displaying#style">こういう感じで生成するから自分でデザインしてね</a>」なので良いのだが（自分ではなくBulmaが勝手にやってしまった、というのはあるけど）</p> <h2 id="感想"><a href="#%E6%84%9F%E6%83%B3">感想</a></h2> <p>Nuxt/Contentもprismも自分の預かり知らないところでHTMLを構成するので、意図せずCSSフレームワークと競合するのはしんどいなあという感想です。<br /> Nuxt/Contentは<a href="#他にも">上記の通り</a>なんだけど、prismは元々のデザインがあるから辛いなあと。<br /> あと、これでBulmaを辞めるという決断になると、同時にbuefyを辞めるという事になるので、結構辛いなあ。</p> hammhiko