From 71ff710d34e5cf39aa5767147907fac421b15292 Mon Sep 17 00:00:00 2001 From: piti6 Date: Sat, 30 May 2026 20:00:09 +0900 Subject: [PATCH 1/2] add rider-style code highlighting --- articles/config-epub-jp.yml | 4 +- articles/style.css | 94 +++++++++++++++++++++++++++++++ articles/style.scss | 107 ++++++++++++++++++++++++++++++++++++ 3 files changed, 203 insertions(+), 2 deletions(-) diff --git a/articles/config-epub-jp.yml b/articles/config-epub-jp.yml index c11183d..bb5c2ab 100644 --- a/articles/config-epub-jp.yml +++ b/articles/config-epub-jp.yml @@ -173,8 +173,8 @@ imagedir: images_jp # font_ext: ["ttf", "woff", "otf"] # ソースコードハイライトを利用する (rouge,pygmentsには外部gemが必要) -# highlight: -# html: "rouge" +highlight: + html: "rouge" # latex: "listings" # カタログファイル名を指定する diff --git a/articles/style.css b/articles/style.css index 4bcaad4..20e02f2 100644 --- a/articles/style.css +++ b/articles/style.css @@ -152,6 +152,100 @@ th { background: #f8f9fa; font-weight: 600; } +/* --- Rouge syntax highlighting --- */ +table.highlight, +.rouge-table { + border: 0; + width: 100%; + margin-bottom: 16px; + background: #191a1c; + border-radius: 6px; + overflow: hidden; + font-size: 0.9em; } + +table.highlight td, +.rouge-table td { + border: 0; + padding: 0; + vertical-align: top; } + +.rouge-gutter { + width: 1%; + color: #808080; + background: #191a1c; + border-right: 1px solid #404040; + text-align: right; + user-select: none; } + +.rouge-gutter pre, +.rouge-code pre { + margin: 0; + padding: 0.75em 1em; + border: 0; + border-radius: 0; + overflow-x: auto; + line-height: 1.6; } + +.rouge-code { + width: 99%; } + +.rouge-code pre { + background: #191a1c; + color: #bdbdbd; } + +.highlight .k, +.highlight .kd, +.highlight .kn, +.highlight .kp, +.highlight .kr { + color: #6c95eb; + font-weight: 400; } + +.highlight .kt { + color: #6c95eb; + font-weight: 400; } + +.highlight .nc { + color: #c191ff; } + +.highlight .nf { + color: #39cc9b; } + +.highlight .n, +.highlight .p { + color: #bdbdbd; } + +.highlight .s, +.highlight .s1, +.highlight .s2 { + color: #c9a26d; } + +.highlight .m, +.highlight .mi, +.highlight .mf { + color: #ed94c0; } + +.highlight .c, +.highlight .c1, +.highlight .cm { + color: #85c46c; + font-style: italic; } + +.highlight .cp { + color: #6c95eb; } + +.highlight .na, +.highlight .no, +.highlight .nv, +.highlight .vc, +.highlight .vi, +.highlight .vg { + color: #66c3cc; } + +.highlight .o, +.highlight .ow { + color: #bdbdbd; } + /* --- Links --- */ a { color: #2563eb; diff --git a/articles/style.scss b/articles/style.scss index 900f67b..9487667 100644 --- a/articles/style.scss +++ b/articles/style.scss @@ -109,6 +109,113 @@ div.footnote { } } +// Rouge syntax highlighting +table.highlight, +.rouge-table { + border: 0; + width: 100%; + margin-bottom: $paragraph-margin-bottom; + background: #191a1c; + border-radius: 6px; + overflow: hidden; +} + +table.highlight td, +.rouge-table td { + border: 0; + padding: 0; + vertical-align: top; +} + +.rouge-gutter { + width: 1%; + color: #808080; + background: #191a1c; + border-right: 1px solid #404040; + text-align: right; + user-select: none; +} + +.rouge-gutter pre, +.rouge-code pre { + margin: 0; + padding: 0.75em 1em; + overflow-x: auto; +} + +.rouge-code { + width: 99%; +} + +.rouge-code pre { + background: #191a1c; + color: #bdbdbd; +} + +.highlight .k, +.highlight .kd, +.highlight .kn, +.highlight .kp, +.highlight .kr { + color: #6c95eb; + font-weight: 400; +} + +.highlight .kt { + color: #6c95eb; + font-weight: 400; +} + +.highlight .nc { + color: #c191ff; +} + +.highlight .nf { + color: #39cc9b; +} + +.highlight .n, +.highlight .p { + color: #bdbdbd; +} + +.highlight .s, +.highlight .s1, +.highlight .s2 { + color: #c9a26d; +} + +.highlight .m, +.highlight .mi, +.highlight .mf { + color: #ed94c0; +} + +.highlight .c, +.highlight .c1, +.highlight .cm { + color: #85c46c; + font-style: italic; +} + +.highlight .cp { + color: #6c95eb; +} + +.highlight .na, +.highlight .no, +.highlight .nv, +.highlight .vc, +.highlight .vi, +.highlight .vg { + color: #66c3cc; +} + +.highlight .o, +.highlight .ow { + color: #bdbdbd; +} + // ヘッダ .tb-header { background-image: url(images/html_header.jpg); From 77783f54cd9b1ac5610d75df1e9bf59fd649758a Mon Sep 17 00:00:00 2001 From: piti6 Date: Mon, 29 Jun 2026 16:11:18 +0900 Subject: [PATCH 2/2] fix review comments for web highlighting --- articles/config-epub-jp.yml | 6 ++++-- articles/style.scss | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/articles/config-epub-jp.yml b/articles/config-epub-jp.yml index bb5c2ab..561ebb6 100644 --- a/articles/config-epub-jp.yml +++ b/articles/config-epub-jp.yml @@ -173,8 +173,8 @@ imagedir: images_jp # font_ext: ["ttf", "woff", "otf"] # ソースコードハイライトを利用する (rouge,pygmentsには外部gemが必要) -highlight: - html: "rouge" +# highlight: +# html: "rouge" # latex: "listings" # カタログファイル名を指定する @@ -469,6 +469,8 @@ pdfmaker: # という構成にする必要がある(インデントさせる) # webmaker: + highlight: + html: "rouge" stylesheet: ["style.css", "style-web.css"] # TechBooster Re:VIEW-Template独自設定 diff --git a/articles/style.scss b/articles/style.scss index 9487667..333f53b 100644 --- a/articles/style.scss +++ b/articles/style.scss @@ -114,10 +114,11 @@ table.highlight, .rouge-table { border: 0; width: 100%; - margin-bottom: $paragraph-margin-bottom; + margin-bottom: $font-size; background: #191a1c; border-radius: 6px; overflow: hidden; + font-size: 0.9em; } table.highlight td, @@ -140,7 +141,10 @@ table.highlight td, .rouge-code pre { margin: 0; padding: 0.75em 1em; + border: 0; + border-radius: 0; overflow-x: auto; + line-height: 1.6; } .rouge-code {