Sometimes using a pre element is not the optimal choice for handling preformatted text. We can turn
preformatted text into a list with jQuery. Here's the code:
$(document).ready(function() {
$('pre.css').each(function() {
var $html = $(this).html();
$(this).replaceWith('<ol class="css">' + $html + '</ol>');
});
$('ol.css').each(function() {
var items = [];
var oldHTML = $(this).html();
var lines = oldHTML.split(/\r\n|\n/);
for(var i=0; i<lines.length; i++) {
var item;
if(lines[i].indexOf('{') != -1 || lines[i].indexOf('}') != -1) {
item = '<li>'+lines[i]+'</li>';
} else {
item = '<li class="indent">' + lines[i] + '</li>';
}
items.push(item);
}
for(var j=0; j<items.length; j++) {
if(items[j] == '<li></li>' || items[j] == '<li class="indent"></li>') {
items.pop(items[j]);
}
}
var newHTML = items.join('');
$(this).html(newHTML);
});
});
Basically, I've simply replaced a pre element with an ol element. Then I've split up its contents
into several lines and formatted them accordingly. You can see the result
here.
Note
This demo doesn't work in Internet Explorer.