この記事でできるようになること 完成イメージは以下の状態 CSSのcontent: counterを使ってみる JavaScriptで行ごとにdivで囲む CSSで付け足したdivごとにカウントアップ [おまけ]コードブロック左上に言語名を表示するCSS この記事でできるようになること はてなブログのコードブロックに行番号を表示 はてなブログのコードブロックの偶数行のみ背景色をつける [おまけ]はてなブログのコードブロックの左上に言語名を表示する 最初は行番号のみで考えていましたがついでに縞々もやってみました。 完成イメージは以下の状態 要件 JavaScriptで追加する方法もあるみたいだけどCSSでやりたい シンタックスハイライトははてな標準で十分 highlight.jsなどのライブラリは使いたくない CSSのcontent: counterを使ってみる body { counter
![【2020年更新】はてなブログで書いたコードブロックに行番号を表示する方法(CSS+JavaScript) - 自動化厨のプログラミングメモブログ │ CODE:LIFE](https://cdn-ak-scissors.b.st-hatena.com/image/square/53a8ca3ee3ba7084fd8ad4974aa00b5d7774817d/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmaru0014%2F20180522%2F20180522222246.png)