Code Examples With Word Wrap Indicators

by sapegin

HTML

<ol class="code">
<li>(function($){</li>
<li>    socialLikes.prototype = {</li>
<li>        init: function() {</li>
<li>            this.pageUrl = window.location.href;</li>
<li>            this.container = $('.social-likes');</li>
<li>            var this_ = this;</li>
<li>            this.counters = {};</li>
<li>
</li>
<li>            this.container.find('li').each(function(){</li>
<li>                var buttonWrapper = $(this);</li>
<li>                var classes = buttonWrapper[0].className.split(' ');</li>
<li>                for (var classIdx = 0; classIdx < classes.length; classIdx++) {</li>
<li>                    var cls = classes[classIdx];</li>
<li>                    switch(cls) {</li>
<li>                        case 'twitter':</li>
<li>                            if (!this_.counters.twiter) {</li>
<li>                                $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + escape(this_.pageUrl) + '&callback=?', function(data){ this_.updateCount(cls, data.count); });</li>
<li>                                this_.counters.twiter = true;</li>
<li>                            }</li>
<li>
</li>
<li>                            this_.initButton({</li>
<li>                                urlParam: 'url',</li>
<li>                                textParam: 'text',</li>
<li>                                additionalParams: ['via', 'related'],</li>
<li>                                popupUrl: 'http://twitter.com/share',</li>
<li>                                pupupWidth: 550,</li>
<li>                                popupHeight: 450</li>
<li>                            }, buttonWrapper, cls);</li>
<li>
</li>
<li>                            break;</li>
<li>                    }</li>
<li>                }</li>
<li>            }</li>
<li>        });</li>
<li>    }</li>
<li>})(jQuery);</li>
</ol>

CSS

.code {
    font-family: monospace;
    }
.code, .code li {
    margin: 0;
    padding: 0;
    }
.code, .code li:after {
    background: #efefef;
    }
.code li {
    display: block;
    line-height: 1.5;
    min-height: 1.5em;
    overflow: hidden;
    position: relative;
    padding-right: 1em;
    white-space: pre-wrap;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;    
    }
.code li:before, .code li:after {
    position: absolute;
    right: 0;
    width: .9em;
    }
.code li:before {
    content: "↩ ↩ ↩ ↩ ↩ ↩ ↩ ↩ ↩ ↩";
    top: 0;
    color: red;
    }
.code li:after {
    content: "";
    bottom: 0;
    height: 1.5em;
    }
.code i {
    width: 2em;
    display: inline-block;
    }