· 1分で読了
prismjs を shiki に変更する
# フロントエンド この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。
shiki は、コードの構文をハイライトするためのパッケージです。他のパッケージ(highlightjs、prismjs)と比べて比較的新しく、あまり知られていません。shiki は TextMate grammar をトークナイザーの定義として使用しており、他の場所から直接利用でき、追加のカスタム言語を作成する必要がありません。統一された標準があるため、拡張も簡単です。
さらに、サポートされている構文が豊富で設定も簡単で、内蔵のテーマも多くあります。これにより、もともと使用していた prismjs をスムーズに置き換えることができました。gatsby-remark-shiki をインストールし、設定を適用するだけで完了です。素晴らしいですね。
いくつかの小さな問題が発生しました:
- もともと react の highlight を使用していたため、すべてを jsx または tsx に変更する必要があります。
c++を使用している場合は、cppに変更する必要があります。
成果を見てみましょう:
const Component = () => <MyComponent /> 関連記事
- 超リンクの下線をもっときれいに見せる:text-underline-offsetデフォルトでは下線が文字にかなり近く、こういう見た目を好まないデザイナーもいる。僕自身も、あまりきれいだとは思っていない。
- なぜウェブは Pixel Perfect を追求すべきではないのかPixel Perfect が本当に重要なときだけそれを気にすべきであり、そうでなければ往々にして双方にとって損な結果になる。
- CSS の HSL で色を書こう!(そしてより良い方法)Web開発において、従来の HEX や RGB の色表現は広く使われているものの、読みやすさや直感性に欠ける問題があり、P3 のような広色域では表現力にも限界がある。HSL(色相、彩度、明度)は、より直感的に色を定義できる方法であり、開発者が色を理解し調整しやすくしてくれる。HSL は色相・彩度・明度の3つの軸で色を表すため、特にデザインシステムにおいて、カラーパレットの明度変化をより自然に扱える。
- line-heightを1およびellipsisを設定しないようにしたい本文では、なぜウェブデザインにおいて line-height を 1 に設定することが推奨されないのか、また ellipsis を使用する際に直面する言語の問題について探ります。