2023/04/18(火) [n年前の日記]
#2 [prog] Pandocに渡すgithub風cssについて
Pandocというツールを使うと、Markdownファイルをhtmlに変換できる。その際、github風の見た目になるcssを指定することで、出力されるhtmlをgithub風にすることができるのだけど。
昔の解説記事で紹介されていた件のcssは、一部で画像を使っていて、しかし、その画像の入手先URLが今では違ってしまったようで、画像を入手できなくてちょっと困ってしまった。
諦めきれずにググってたら、github上に置いてくれていた方が居たようで。ありがたや。助かった。ということでメモ。
_pandoc-md2github1html/css at master - tukiyo/pandoc-md2github1html - GitHub
上記のページから、以下の3つのファイルを入手できる。
ちなみに、Pandoc を使った、gfm (github上で規定されてるMarkdown風記法)からhtml5への変換は以下。
昔の解説記事で紹介されていた件のcssは、一部で画像を使っていて、しかし、その画像の入手先URLが今では違ってしまったようで、画像を入手できなくてちょっと困ってしまった。
諦めきれずにググってたら、github上に置いてくれていた方が居たようで。ありがたや。助かった。ということでメモ。
_pandoc-md2github1html/css at master - tukiyo/pandoc-md2github1html - GitHub
上記のページから、以下の3つのファイルを入手できる。
- dirty-shade.png
- github.css
- para.png
ちなみに、Pandoc を使った、gfm (github上で規定されてるMarkdown風記法)からhtml5への変換は以下。
pandoc hoge.md -f gfm -t html5 -s --self-contained -c github.css -o hoge.html
- hoge.md : 入力ファイル名。
- -f gfm : 入力ファイルがgfm形式であると指定。
- -t html5 : 出力ファイルがhtml5であると指定。
- -s : Standaloneのs。html文書として完結してる状態で出力。これをつけないと、htmlタグやbodyタグが無い状態で出力されてしまう。
- --self-contained : css や画像ファイルを内包したhtmlファイルとして出力。
- -c github.css : cssを指定。この場合、github.css を使えと指定している。
- -o hoge.html : 出力ファイル名の指定。
◎ css内に画像を含めたい :
コレって、画像が別ファイルとして必要になっているけれど、css内に画像を含めておくことはできないのだろうか。
ググってみたら、Data URI scheme という技があるらしい。画像をbase64に変換して、"data:image/png;base64,..." と記述することで内包できるのだとか。
_表示速度改善 Data URIスキーム | 前編 仕組みとメリット
_Data URLスキームとは何なのか？便利な理由と扱うときの注意点 | PisukeCode - Web開発まとめ
_CSSのbackgroundに画像を直接埋め込む方法 | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
_Data URI scheme - Wikipedia
画像をbase64に変換する作業は、以下のページを使わせてもらった。ありがたや。
_画像をData URI schemeでテキストに変換するツール - PEKO STEP
つまり、前述の github.css の中で、以下のように記述すれば画像ファイルを別途用意しなくて済む、ということになるのだろうか。
試してみたところ、hrタグの見た目はたしかに変わったけれど…。h1 や h2 タグの周辺は、どう記述すればいいのか…。
ググってみたら、Data URI scheme という技があるらしい。画像をbase64に変換して、"data:image/png;base64,..." と記述することで内包できるのだとか。
_表示速度改善 Data URIスキーム | 前編 仕組みとメリット
_Data URLスキームとは何なのか？便利な理由と扱うときの注意点 | PisukeCode - Web開発まとめ
_CSSのbackgroundに画像を直接埋め込む方法 | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
_Data URI scheme - Wikipedia
画像をbase64に変換する作業は、以下のページを使わせてもらった。ありがたや。
_画像をData URI schemeでテキストに変換するツール - PEKO STEP
つまり、前述の github.css の中で、以下のように記述すれば画像ファイルを別途用意しなくて済む、ということになるのだろうか。
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
/* background: url("para.png") no-repeat 10px center; */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZ0lEQVQ4T2NkoBAwUqifAZsBgkBDZwJxKBbDK4Bincji2AzYDVTggqQIpAYkdg+I09ENRTdACajgLpoi+hoAspwiL4AMAHljFRAbQ71CkheQvZ8GjY1RAxjAqZXohETVQCQqn1GcGwEpnyMREv2DmQAAAABJRU5ErkJggg==") no-repeat 10px center;
text-decoration: none;
}
hr {
/* background: transparent url("dirty-shade.png") repeat-x 0 0; */
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAIklEQVQIW2NkQAXGMC4jkjhcECh2FiaBIghSDJLAEARJAABzRgM4pXO10AAAAABJRU5ErkJggg==") repeat-x 0 0;
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}
試してみたところ、hrタグの見た目はたしかに変わったけれど…。h1 や h2 タグの周辺は、どう記述すればいいのか…。
[ ツッコむ ]
以上です。