いやー，めでたい．ついに，TexLive 2019がreleaseされた．それにしても，TeXってこんなに人気があったのだ．世の中がみんなお祝いしてる，凄いぞ，TeX．．．．と思ったら，全然違った．．．これでまた年齢計算が複雑になる．システム担当者は大変である．まぁ，西暦を使用すればいいだけの話ではあるが．．．．．というわけで，今回はTeXの話，ではなくて，ブログのCodeBlockの長い行がwrapされるのは２行と間違うことがあるので，scrollbarをつけましょうという話である．
Wrap or scroll?
以前の記事でも触れたように（How to automatically embed R plot in blog created by Hugo via ox-hugo），このサイトは，ox-hugoというorg-modeのパッケージで書いて，Hugoという静的サイトジェネレーター（themeはacademic）で作っているのだが，code blockの長い行がwrapされて，つまり，折り畳まれて表示されるようになっていた．Rのcodeで示してみると，こんな感じである．
これは３行のcodeであるが，はっきり言って見にくい．．．．．
行番号を入れるという方法もあるが，それよりもscrollbarをつけて横にスライドさせる方が分かりやすい．つまり，こうである．
boxplot(data_melt.df$Drug1 ~ data_melt.df$Day, xlab = "", main = "Drug1", xaxt="n", cex.axis=1.5, ylab="Relative value", cex.lab = 1.5, pch=16, cex = 1.5)
axis(1,at=c(1,2,3),formatC(c("Control", "Day1", "Day7")), cex.axis=1.5)
beeswarm(data_melt.df$Drug1 ~ data_melt.df$Day, pch = 16, ad = TRUE, cex=1.5, col=c("black", "green","blue"))
これなら，確実に１行を把握できる．
ここ（Fix How Your Blog’s Code is Displayed on Mobile）を見るともっと分かりやすく書いてある．
How to add horizontal scrollbar
Ref
- Fix How Your Blog’s Code is Displayed on Mobile
- Prevent wrapping in code blocks #467
- added horizontal scrolling for code #1
上記のサイトを参考に以下のようにscrollbarをセットアップすることにした．
academic theme version
まず，Hugoのthemeであるacademic のversionを以下のように調べてみると，
less themes/academic/data/academic.toml
# Academic
version = "2.4.0"
ふ，古い．latest versionは，4.2である．2018年8月に導入してから8ヶ月ほどで2.4から4.2までreleaseされており，開発スピードが並ではない．それは喜ぶべきことなのだが，問題は，私が全くそれについて行けてないことである．（ToT)
最新版ではdirectory構造もかなり変わっている．horizontal scrollbarをつけるのを機会に全部をupgradeしようとしてみたが，なかなかうまくいかない．Customize style (CSS) に書いてあるとおりにしようとしても，古いversionでは相当するdirectoryそのものが存在しない．
cssの変更
というわけで，academic themeのupgradeはサクッと諦めて姑息策を取ることにした． Prevent wrapping in code blocks #467 を参考にして，
/Data/hogeblog/fugablog/themes/academic/layouts/partials/css/academic.css
を
/Data/hogeblog/fugablog/static/css/academic_scrollbar.css
として保存した．変更箇所は以下の通り
--- /Data/hogeblog/fugablog/themes/academic/layouts/partials/css/academic.css 2018-08-16 00:55:10.000000000 +0900
+++ /Data/hogeblog/fugablog/static/css/academic_scrollbar.css 2019-05-02 00:05:10.000000000 +0900
@@ -178,9 +178,16 @@
border-color: rgb(248, 248, 248);
}
+/* pre code { */
+/* white-space: pre; /\* Override Bootstrap to preserve line breaks in code. *\/ */
+/* overflow-x: auto; */
+/* } */
+
+/* See http://seankross.com/notes/css-for-code/ */
pre code {
- white-space: pre; /* Override Bootstrap to preserve line breaks in code. */
- overflow-x: auto;
+ overflow: auto;
+ word-wrap: normal;
+ white-space: pre;
}
hr {
これで，ox-hugoでの
は，以下のように表示されるようになる．
boxplot(data_melt.df$Drug1 ~ data_melt.df$Day, xlab = "", main = "Drug1", xaxt="n", cex.axis=1.5, ylab="Relative value", cex.lab = 1.5, pch=16, cex = 1.5)
axis(1,at=c(1,2,3),formatC(c("Control", "Day1", "Day7")), cex.axis=1.5)
beeswarm(data_melt.df$Drug1 ~ data_melt.df$Day, pch = 16, ad = TRUE, cex=1.5, col=c("black", "green","blue"))
-nをつけて行番号をつけると
こうなる．
|
|
なんとか，これで，code blockにhorizontal scrollbarをつけることができた．次に時間ができたときにacademic themeをupgradeして追いつこう．．．いつになることやら．．．(^^;;;;;;
