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;  
}

おしまい。

その他やりたいこと

参考

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

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

0件のコメント

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

技術ブログをはじめよう

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

技術ブログを開設する

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

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

Markdownで書ける

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

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

技術ブログ開設

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

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