CSS: Display Language Name in Code Snippet

By Xah Lee. Date: . Last updated: .

If you write tutorials or blogs about programing, often you have code examples in a pre tag, such as <pre class="python"></pre>.

You can make the language name displayed around the border, like this.

xx = "this is string"

yy = 'another string'

print(xx, yy)

Code

pre.python944:before {
 content: "python";
 position: relative;
 top: -5px;
 right: 0;
 float: right;
 text-shadow: 2px 2px 2px white;
}