Notice: Undefined index: HTTP_USER_AGENT in /home/kPherox/public_html/blog.kr-kp.com/wordpress/wp-content/themes/cocoon-master/lib/utils.php on line 1624
preに行番号を追加してスクロールで動かないようにする – kPherox Blog
Notice: Undefined index: HTTP_USER_AGENT in /home/kPherox/public_html/blog.kr-kp.com/wordpress/wp-content/themes/cocoon-master/lib/utils.php on line 1214
Notice: Undefined index: HTTP_USER_AGENT in /home/kPherox/public_html/blog.kr-kp.com/wordpress/wp-content/themes/cocoon-master/lib/utils.php on line 1624
class="post-template-default single single-post postid-171 single-format-standard public-page page-body categoryid-24 ff-rounded-mplus-1c fz-18px fw-400 hlt-center-logo-wrap ect-entry-card-wrap rect-entry-card-wrap no-scrollable-sidebar no-scrollable-main sidebar-right mblt-slide-in author-admin mobile-button-slide-in no-mobile-sidebar" itemscope itemtype="https://schema.org/WebPage">

preに行番号を追加してスクロールで動かないようにする

スポンサーリンク

preに行番号つけたかった。この方法でいくつも書くとするとCGIやJSに頼る必要があると思います

このページのpreに適用しています。

Demo

<!document html>
<html>
    <head>
        <!-- sample code -->
        <title>Hello, World!</title>
    </head>

    <body>
        <h1>Hello, World!</h1>
        <p>Sticks and stones may break my bones, but word will never harm me.</p>
    </body>
</html>

Demo code

このDemoのHTMLとCSS

HTML

<pre class="line-number line-number-<行数|今回は12>">
<code>&lt;!document html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;!-- sample code --&gt;
        &lt;title&gt;Hello, World!&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;h1&gt;Hello, World!&lt;/h1&gt;
        &lt;p&gt;Sticks and stones may break my bones, but word will never harm me.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;</code>
</pre>

CSS

pre.line-number {
    overflow-y: hidden;
    line-height: 1.3em;
    position: relative;
    width: 100%;
    padding: 0;
    display: flex;
}

pre.line-number > code {
    overflow-x: auto;
    display: block;
    padding: .3em;
    flex: 1;
}

pre.line-number::before {
    background-color: rgba(186,186,186,0.1);
    content: "1A";
    width: 2em;
    position: sticky;
    display: block;
    padding: .3em;
    padding-right: .5em;
    color: gray;
    font-weight: bold;
    text-align: right;
    word-wrap: break-word;
    white-space: pre-line;
}

pre.line-number-12::before {
    content: "1A 2A 3A 4A 5A 6A 7A 8A 9A 10A 11A 12A";
}

実際の運用

この方法ではpreの行数が変わる度にCSSを書き換える必要がある。WordPressのカスタムCSSのような形で書き換えられるようにしてないと少し厳しい
各行をspanで囲ってカウンターで行数を表示する方が行数を調べる手間がかからないので楽だろうと思う
preの行数を自動でカウントするプラグインでも作って導入すればWordPressに関してはこの方法で十分か

謝辞

以下のサイトを参考にさせてもらいました

Programming
kPherox

普段は艦これとかデレステとか遊んでます。Twitterアカウントの年齢制限に引っかかって@kPheroxはロック中です(´・ω・`)

触ったことのある言語: Java, Scala, Node.js/JavaScript, CoffeeScript, PHP, Python, Swift, C#

利用経験のあるフレームワーク: Laravel(PHP), Play Framework(Scala), Cocoa(Swift), Perfect(Swift)

kPheroxをフォローする
kPherox Blog

コメント