❄️

Snowsight の全角スペースをユーザースタイルで可視化する

に公開
CSS
Snowflake
usercss
snowsight
userstyles
tech

Intro

下記の記事ではブラウザ設定変更で乗り切っています。
https://zenn.dev/churadata/articles/c92b5aac996cfb

この記事では、ユーザースタイルで全角スペースを可視化する方法を説明します。

環境

  • ブラウザ: Google Chrome 126.0.6478.62
  • 適用方法: Stylus
  • フォント: Ricty Diminished Regular

フォントは HackGen でも UDEV Gothic でもなんでもいいと思います。

方法

Dev Tools で見る限り、Snowsight のエディタ部分は apercu-mono-regular でレンダリングされているようなので、こいつを全角スペース (U+3000) だけ @font-face で Ricty Diminished に上書きします。

@-moz-document domain(app.snowflake.com) {
    @font-face {
        font-family: 'apercu-mono-regular';
        src: local('RictyDiminished-Regular');
        unicode-range: U+3000;
    }
}

結果

Discussion