How to add horizontal scrollbar for codeblock in academic theme of hugo

いやー,めでたい.ついに,TexLive 2019がreleaseされた.それにしても,TeXってこんなに人気があったのだ.世の中がみんなお祝いしてる,凄いぞ,TeX....と思ったら,全然違った...これでまた年齢計算が複雑になる.システム担当者は大変である.まぁ,西暦を使用すればいいだけの話ではあるが.....というわけで,今回はTeXの話,ではなくて,ブログのCodeBlockの長い行がwrapされるのは2行と間違うことがあるので,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で示してみると,こんな感じである.

これは3行の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"))

これなら,確実に1行を把握できる.

ここ(Fix How Your Blog’s Code is Displayed on Mobile)を見るともっと分かりやすく書いてある.

How to add horizontal scrollbar

Ref

上記のサイトを参考に以下のように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をつけて行番号をつけると

こうなる.

1
2
3
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"))


なんとか,これで,code blockにhorizontal scrollbarをつけることができた.次に時間ができたときにacademic themeをupgradeして追いつこう...いつになることやら...(^^;;;;;;

Avatar
taipapa
本人ではありません (^^)

Related

Next
Previous
comments powered by Disqus