JavaScriptを有効にしてください

【highlight.js】コードブロックを横スクロール対応させる

 ·  ☕ 1 分で読めます
Photo by Tom Swinnen from Pexels

Photo by Tom Swinnen from Pexels

このあいだwordpressにhighlight.jsを導入しましたが、
そのままだとコードが右端で折り返し改行されてしまい、見にくい。。
インデントとかがぐちゃぐちゃになっちゃいます。

ということで

横スクロールに対応させる

wordpressテーマのstyle.cssを編集する
(管理画面のテーマエディターで編集するか、サーバに直接入って編集してもOK)

/* style.css に以下を追記 */
.hljs {
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
}

この記事をまねした
WordPress プラグインなしでシンタックスハイライトさせる方法 highlight.js | VIVA!TANACIO

結果

// 横に長いコード!!!

print('寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路のぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助')

スクロールできてるね?

共有