Qrunchの投稿画面にウェブフォントを適用する

公開日:2019-03-01
最終更新:2019-03-01

Qrunch の投稿画面にウェブフォントを適用

TL;DR

  • Chrome ユーザー対象
    • Firefox にも Stylus あるので多分いける
  • Stylus をインストール
  • CDN で配信されているウェブフォントを Stylus で qrunch.io 向けに適用

前回までのあらすじ

ざっくり:投稿プレビューのコードが等幅表示で見やすくなった!

これが

こうなった

気になる

プレビュー見ればホワイトスペースのズレは無いんだけど、エディタ側が等幅フォントじゃない。

エディタ側に等幅フォントを適用

等幅フォント 適用

前回 作成した CSS 設定に以下を追加

#editor div.CodeMirror-sizer {  
  font-family: Courier New, Courier, Lucida Typewriter, monospace;  
}

こうなる。等幅にはなったが、見づらい気がする。

等幅ウェブフォント Fira Code 適用

FiraCode を使ってみる。どうせなので、プレビュー側のコードも FiraCode にしておく。

@import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);  
#editor div.CodeMirror-sizer {  
  font-family: Fira Code;  
}  

#editor code {    
  font-family: Fira Code, Courier New, Courier, Lucida Typewriter, monospace;  
  font-style: normal;  
  font-variant: normal;  
  font-weight: 400;  
  /*word-wrap: normal;  
  white-space: pre;*/  
}

こうなる。こっちの方が見やすい(気がする)。

Fira Code 適用してるので、↓のコードは(ローカルでは)画像のように見える。

a = 3  
b = 2  
a >= b  
c = {a => b}

最終結果

こうなった

@import url(https://cdn.jsdelivr.net/gh/tonsky/[email protected]/distr/fira_code.css);  
#editor div.CodeMirror-sizer {  
  font-family: Fira Code;  
}  

#editor code {    
  font-family: Fira Code, Courier New, Courier, Lucida Typewriter, monospace;  
  font-style: normal;  
  font-variant: normal;  
  font-weight: 400;  
  /*word-wrap: normal;  
  white-space: pre;*/  
}    
#editor pre {  
  line-height: 1.25em;  
}

おしまい。

補足

自分の環境(フォント)が変わるだけで、他ユーザーの閲覧時にも Fira Code で表示されるわけじゃない

参考

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@17numberの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする