Qiita APIから取得した投稿内容を自分のサイトに表示するときコードブロックに行番号を表示させたかったので、JavaScriptを使わず実装する方法を考えた。 <div class="code-frame" data-lang="JavaScript"> <div class="code-lang"><span class="bold">app.js</span></div> <div class="highlight"><pre><span></span> <span class="k">for</span><span class="p">(</span><span class="kd">let</span> <span class="nx">url</span> <span class="k">of</span> <span class="nx">urls</span><span
![CSSでコードブロックの行番号を表示する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/03f0919adedc4c52fea54b5622b865ab8d67012d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJUUzJTgxJUE3JUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgzJTk2JUUzJTgzJUFEJUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgxJUFFJUU4JUExJThDJUU3JTk1JUFBJUU1JThGJUI3JUUzJTgyJTkyJUU4JUExJUE4JUU3JUE0JUJBJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wMTgyZmVhZGMzNzZiMjUxZjQ0ZGRlYmYxOWQ4ZGQ1ZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBSaWEwMTMwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01MjNjNGNhYmFiNDRhYTYwZWIwNDA5NDFmM2ExYzA2Ng%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dfe15e94a999fe629fea4ae1620619b83)