BETA

Qrunchの投稿プレビュー画面でコードを等幅表示する

投稿日:2019-03-01
最終更新:2019-03-01

Qrunch の投稿プレビュー画面でコードを等幅表示する

TL;DR

編集画面でコードプレビューが見づらい問題

見づらくない?

以下は youtube-dl のヘルプメッセージを貼り付けたもの。見づらい。

投稿後の画面ではこうなっている

Qrunch において <code> タグの内容を等幅フォントを用いて表示する を設定しているのでこうなる。見やすい。

編集画面でもコードを等幅表示したい

Stylus で解決!

こうなる。

折返しを無効化する版だとこうなる、この辺りはお好みで。

やり方

Stylus インストール

入れてください。

qrunch.io 向けのCSSを作成

qrunch.io に移動後、追加されたボタンから「次のスタイルを書く」

以下を貼り付けて保存。折返無しにしたい場合は、コメントアウトしている word-wrapwhite-space を有効化。

#editor code {    
  font-family: 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;  
}

おしまい。

その他やりたいこと

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@17numberの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!