5

As a follow-up to this previous question, I'd like to add a title to a <pre> box, indicating what kind of code is inside it (e.g. R, sh, perl, ...). But I can't use a <div> as in the previous question, because the <pre> is generated by another tool (org-mode export). It looks like this:

<pre class="src src-R">
here <- is(the=code)
</pre>

So I'm hoping to create a src-R class that adds an R title to the <pre> box, in pure CSS, or if that's not possible, using some additional Javascript.

Any pointers appreciated!

Community
  • 1
  • 1
Ken Williams
  • 22,756
  • 10
  • 85
  • 147
  • 2
    it's a shame you can't switch from the `
    ` tag, because the `
    ` tag with a `` tag inside does exactly what you want.
     – Spudley Aug 25 '11 at 14:35

1 Answers1

6

You can do it using only CSS with .src-R:before.

See: http://jsfiddle.net/thirtydot/myAhS/

.src-R:before {
    content: 'R'
}
.src-Perl:before {
    content: 'Perl'
}
.src:before {
    position: absolute;
    top: -10px;
    background: #fff;
    padding: 5px;
    border: 1px solid #000
}
.src {
    position: relative;
    padding: 25px 9px 9px 9px;
    border: 1px solid #000
}

:before works in IE8+ and all modern browsers.

If you need IE7 or lower support, JavaScript will be needed.

thirtydot
  • 224,678
  • 48
  • 389
  • 349