.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; }
<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>