Result
シンタックスハイライターの簡易版みたいな。行毎にspanで括る
css
pre {/*全体の設定*/ font-family: monospace; background-color: #fff; width: 27.5em; margin: 4em auto; padding: 0.5em; border-radius: .25em; box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.45); line-height: 0; counter-reset: line; } pre span {/*行をブロック化*/ display: inline-block; width:100%; line-height: 1.5rem; } pre span:before {/*疑似要素で行数を挿入。行数はcontent: counterで自動挿入*/ counter-increment: line; content: counter(line); display: inline-block; border-right: 1px solid #ddd; padding: 0 .5em; margin-right: .5em; color: #888; }
html
<div class="container"> <pre> <span>def print_hi(name)</span> <span> puts "Hi, #{name}"</span> <span>end</span> <span></span> <span>print_hi('Tom')</span> <span>#=> prints 'Hi, Tom' to STDOUT.</span> </pre> </div>