CSSだけでブログ記事内にソースコードを綺麗に表示してみる。

良くブログ記事とかでカッコ良くソースコードが書かれているのを見かける。

このアメブロでも実装してみようと思ったけれど、外部のJavascriptを持ってこようとするとひどく面倒くさい事が書かれていたので一時断念。

そこでCSSで簡易だが装飾してみた。

• .source {
• background: #333;
• counter-reset: count;
• padding: 0 10px 10px 0;
• }
• .source li {
• text-indent: -3em;
• margin-left: 3em;
• border-bottom: 1px dotted #999;
• }
• .source li:before {
• text-indent: 0em;
• content: counters(count,".");
• counter-increment: count;
• width: 3em;
• text-align: center;
• display: inline-block;
• color: #999;
• }

↑のCSSを追加して、記事編集の"HTML表示"から…

• <ul class="source">
• <li>あああ</li>
• <li>いいい</li>
• <li>ううう</li>
• <li>えええ</li>
• <li>おおお</li>
• </ul>

と記述すると今使っているような見栄えになります。