こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作のチュートリアルや技術ブログでは、コードスニペットの見やすさが記事の品質を大きく左右します。
単にpreタグやcodeタグで囲むだけでは、長文コードの可読性が低く、読者が離脱する原因にもなりかねません。
そこで今回は、CSSだけで実現できる軽量なシンタックスハイライト風デザインをご紹介します。
外部ライブラリを使わず、ブログやポートフォリオでもサクッと導入できる実装を目指します。
CSSでシンタックスハイライト風に
コードブロックをpreタグとcodeタグで囲み、クラス名を付与してスタイル制御します。
背景色や行間を整えるだけで、コードの可読性は大幅に向上します。
さらに、HTMLタグや属性、文字列に色を付けることで視認性アップが可能です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用：行番号やコピーボタンを追加する
より読みやすくするために、以下の工夫もおすすめです。
- 擬似要素で行番号を付ける
- 右上に「コピー」ボタンを配置する
- ホバー時に行背景を強調する
まとめ
シンタックスハイライト風スタイリングのポイント
ライブラリを使わずにCSSだけで実現可能。
タグや属性に手動で色分けすることで軽量かつ高い自由度を確保。
コードの可読性を高めると記事全体のクオリティも底上げされます。
タグや属性に手動で色分けすることで軽量かつ高い自由度を確保。
コードの可読性を高めると記事全体のクオリティも底上げされます。
satokotadesignキャンペーン実施中！
