読者です 読者をやめる 読者になる 読者になる

図描きの備忘録

日々の業務の時間短縮。残業しないで帰る事を目指し、悪戦苦闘中。AutoCAD、Lisp、効率化、自動化、合理的、プログラミング、資産運用勉強中

ソースコードをスマホで見るときに改行しない方法

スマホ表示は横スクロール

こんにちは!

エカキオです!


こちらのブログでは、AutoCAD Lispを度々紹介してきましたが、
最近はスマホでブログを見る方が多いと思っております。

そんな中、PCで作成したLispコードを紹介するのですが、

改行されまくっていて、とても見づらい!!

字下げもクソもあったものではない!!

と、もんもんとしておりました。

ソースコードシンタックスハイライトで綺麗に表示する方法が乗っている
サイトはいくつもあったのですが、私が追い求めていた、スマホで改行なし、
横スクロールで対応する方法について、記載しているサイトを発見しました!

bacon.hatenablog.com

sprint-life.hatenablog.com

ただ、ピッタリやりたかったものと少しずつ違っていましたので、
お二方が書かれているものの良いとこ取りをさせていただきました。
(お二方、勝手に混ぜてすみません。)


求めていたコードはこちら!

で、実際に作ったコードはこちらになります。

pre,code{
   font-size: 85%;
   color:#000;
   background:#EEEEEE;
   /*max-height: 300px;*/
   white-space: pre;
   overflow-x: auto;
   word-wrap: normal;
}

はてな記法で記入しています。

ハイライト表示にするやり方は多くの方が記事にしていますので、
参照していただければと思います。

上記のコードを、

ダッシュボード

デザイン

スパナのマーク

デザインCSSのどこか

にコピペしていただければ使えると思います。

なお、他のCSS要素によって、上手く動かないことがあったらごめんなさい。
CSSの知識が乏しくて、対応策は教えられません!汗)

肝心なのはsplicomさんも書いてますが、

word-wrap: normal;
white-space: pre;

っぽいです。


ぜひぜひスマホ読者を対象とした、コード書きの方は利用ください。


それでは、この辺で。


エカキオ



CSSもちゃんと勉強します…

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

Related Posts Plugin for WordPress, Blogger...