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
}

これで、シンタックスハイライト部が横スクロール可能になりました。

以上です。

コメント

カテゴリー

最近の投稿