CSSでコードブロックのファイル名を表示(pandocのシンタックスハイライト自作)

CSSでコードブロックのファイル名を表示してみました。

昔、WordPress用に自作したものをPandoc用に書き換えてみました。めコードの都合によりhasを使って実装しました。も程度に残しておきます。前半はPandocのシンタックスハイライト説明、後半CSSのコード。

pandocのメイン記事はこちらです。

vscodeでpandoc 3の使い方/商用利用やライセンスは?Re:VIEWとSphinxとの比較

人気記事:電子書籍は半額で安く買える!?おすすめ比較全まとめ)!

1 pandocでコードブロック(シンタックスハイライト)を自作
2 CSSでコードブロックのファイル名を表示(pandoc)

pandocでコードブロック(シンタックスハイライト)を自作

highlight.jsやprismjsを使う場合はこちらを先に参照するとよい気がします。

Update to HTML5 · Issue #3858 · jgm/pandoc

こちらでは通常のやり方を書きます。

まず言語が対応しているか見ます。

pandoc --list-highlight-languages

次のように表示されるはずです。

abc
actionscript
ada
agda
apache
asn1
asp
ats
awk
bash
bibtex
boo
c
changelog
clojure
cmake
coffee
coldfusion
comments
commonlisp
cpp
cs
css
curry
d
default
diff
djangotemplate
dockerfile
dot
doxygen
doxygenlua
dtd
eiffel
elixir
elm
email
erlang
fasm
fortranfixed
fortranfree
fsharp
gcc
glsl
gnuassembler
go
graphql
groovy
hamlet
haskell
haxe
html
idris
ini
isocpp
j
java
javadoc
javascript
javascriptreact
json
jsp
julia
kotlin
latex
lex
lilypond
literatecurry
literatehaskell
llvm
lua
m4
makefile
mandoc
markdown
mathematica
matlab
maxima
mediawiki
metafont
mips
modelines
modula2
modula3
monobasic
mustache
nasm
nim
nix
noweb
objectivec
objectivecpp
ocaml
octave
opencl
orgmode
pascal
perl
php
pike
postscript
povray
powershell
prolog
protobuf
pure
purebasic
python
qml
r
raku
relaxng
relaxngcompact
rest
rhtml
roff
ruby
rust
sass
tcsh
texinfo
toml
typescript
verilog
vhdl
xml
xorg
xslt
xul
yacc
yaml
zsh

今回はJavaScriptだったため、問題なく進みました。javascriptreactもありますね。分けたいとき便利そう。vueに使っても問題ないのかな。

なお、markdownの場合、言語を指定しないとコードブロックが効かないです。

NGです。変換した際に変わりません。

```
```

OKです。言語リストのまま追加しました。大文字と小文字も注意してください。

```javascript
```

コードブロックのスタイルは次のものがあります。

オプションは pygments (既定)、 kate , monochrome, breezeDark, espresso, zenburn, haddock, tango です。
https://pandoc-doc-ja.readthedocs.io/ja/latest/users-guide.html

コードブロックの中身を見たい場合はこうです。

pandoc --print-highlight-style zenburn

白地だったためわかりやすい黒地のzenburnを選びました。

他の見た目のサンプルはこちらのサイトにありました。

Garrick Aden-Buie - Pandoc Syntax Highlighting Examples

なお、自分でカスタマイズしたものを適用することもできます。

VsCodeの同階層に生成されます。

pandoc --print-highlight-style zenburn > codestyle.theme

適用します。

pandoc --highlight-style codestyle.theme

JSONでも同じファイルが作れるようになっていましたね。

pandoc 2.0.4 (2017-12-03) Add –print-highlight-style option. This generates a JSON version of a highlighting style, which can be saved as a .theme file, modified, and used with –highlight-style (#4106, #4096).
https://pandoc.org/releases.html

ただ、なぜかjsonファイルではエラーになって認識しないのです。この解決策はネット上に転がっておらず…謎です。

Unknown highlight-style

ひとまず、.themeを使うことにします。

pandocのコードブロックにファイル名を追加

luaのフィルターを使うか、CSSで普通にやるかのようです

Is there a way in pandoc to include a filename on top of code blocks?

```{.javascript filename="test.js"}
```

ただ、この方法はVsCodeのシンタックスハイライトが消えるので残念です。。javascript:test.jsとqiita風に書ければよかったのですけど…。。

.numberLinesもいらんリンクが入りますね。。

luaのフィルターを使う

やっぱりluaのフィルターを使うのがよさそうです。

PandocにはLuaインタープリタが組み込まれていますので、独立したLuaインストールは通常は不要です。–lua-filterを指定すると呼び出せます。

pandoc --lua-filter=add-filename.lua -o output.html input.md

言語名+ファイル名をテストしたところ、１番上だけうまくいきますね。

```{.python caption="main.py"}
print("Test")
```

```python {caption="main.py"}
print("Test")
```

```python caption="main.py"
print("Test")
```

ただ、スクリプト内をいじればもっと違う指定もできるため、そちらで実装しました。

luaのフィルターを使えば、javascript:test.jsみたくqiita風の実装ができるということですね。

エラー：Could not read highlighting theme xxx.theme

オリジナルのコードブロックを作成しようとthemeファイルを作りましたが、変換できません。

Could not read highlighting theme xxx.theme

The BOM is illegal in JSON
https://github.com/jgm/pandoc/issues/6704

githubを見たところ、BOMありでコケていたようです。そんなつもりはありませんでしがが、BOMありだとコケるようです。。

VsCode上にBOMなしに変更できます。

画面下の青いバーの UTF-8(それ以外になっている可能性も) > Save with Encoding > UTF-8

(追記)別の原因で通らなくなりました。mycodestyle.themeの背景色の指定などを省略すると、同様のエラーがでてダメなようです。

"background-color": "#fff",

↓

"background-color": "#ffffff",

CSSでコードブロックのファイル名を表示(pandoc)

コードの都合によりhasを使って実装しました。

(今はluaのフィルターを使っているため別物になりました。)

/* デフォルトの上書き */
pre > code.sourceCode {
  white-space: pre-wrap;
}

div.sourceCode {
  position: relative;
  padding: 30px 5px;
}

@media (min-width: 576px) {
  pre > code.sourceCode {
    white-space: pre;
  }

  div.sourceCode {
    position: relative;
    padding: 30px;
  }
}

div.sourceCode::before {
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  content: attr(data-filename);
}

div.sourceCode:has(> .html)::before {
  padding: 2px 8px;
  background-color: #d07b3a;
}

div.sourceCode:has(> .css)::before {
  padding: 2px 8px;
  background-color: #8fb0a9;
}

div.sourceCode:has(> .php)::before {
  padding: 2px 8px;
  background-color: #a987aa;
}

div.sourceCode:has(> .javascript)::before {
  padding: 2px 8px;
  background-color: #e5a228;
}

div.sourceCode:has(> .typescript)::before {
  padding: 2px 8px;
  background-color: #8fb0a9;
}

div.sourceCode:has(> .javascriptreact)::before {
  padding: 2px 8px;
  background-image: linear-gradient(120deg, #68b281 0%, #0cbaba 100%);
}

参考になれば幸いです。