AMP HTML 上で、Pygments の シンタックスハイライト を使用していたのですが、
横に長いプログラムの場合、文字が途中で途切れており、スクロールもできなかったので、
スクロールできるようにした際にやったことを記載しておきます。
以下、StackOverFlow の質問がありますが、
How to support scrolling when using pygments with Jekyll - Stack Overflow
pre タグに style を付与することで、横スクロール可能になるようです。
css 記載として、幾つか挙げられてますが、私は以下の記述を追加しました。
// -- selector prefixed to the wrapper div for collision prevention
.highlight pre code * {
white-space: nowrap; // this sets all children inside to nowrap
}
.highlight pre {
overflow-x: auto; // this sets the scrolling in x
}
.highlight pre code {
white-space: pre; // forces <code> to respect <pre> formatting
}
これで、シンタックスハイライト部が横スクロール可能になりました。
以上です。
コメント