CSS Trick: Display Language Name in Code Snippet

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

If you write tutorials or blogs about programing, often you have code examples in a “pre” tag, such as <pre class="python">…</pre>. For example, see: Python, Ruby, Perl: Print Version String from Script.

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

html css code snippet with language name screenshot
Code Snippet with language name shown.

Here's a CSS code that does it.

pre.python:after {
    content:"Python₂";
    position:relative;
    bottom:-1em;
    right:-2ex;
    float:right;
    color:gray;
    background-color:hsl(0,0%,95%)
}
blog comments powered by Disqus