Result
コード見せたいけどSyntax highlight使うほどじゃない時とかに。gistでいいんじゃ、と言われたらそれまでですが。
jQuery
;(function ( $, window, document, undefined ) { 'use strict'; var pluginName = 'lineLine', defaults = { startsFrom: 0, className: 'lineline' }; //オプションセッティング function Plugin( element, options ) { this.element = element; this.options = $.extend( {}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { var self = this; var lines = $(self.element).html().split('\n'); var lineCount = lines.length; //textareaをtableにする var html = '<div class="' + self.options.className + '"><table class="' + self.options.className + '-code" border="0" cellspacing="0" cellpadding="0">'; //ナンバリング for (var i = self.options.startsFrom; i < lineCount; i++){ html += '<tr><td class="' + self.options.className + '-numbers">' + (i + 1) + '</td><td class="' + self.options.className + '-lines">' + lines[i] + '</td></tr>'; } html += '</table></div>'; $(self.element).before(html); $(self.element).remove(); }; $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); };})( jQuery, window, document );//textareaを指定$('textarea').lineLine(); |
css
.lineline{ max-height: 300px; width: 700px; margin: 50px auto 0; background: #ececec; padding: 20px; overflow: auto; text-align: left; }.lineline-numbers { width: 20px; border-right: 1px solid #ccc; padding-right: 5px; color: #777; }.lineline-lines{ padding-left: 20px; white-space: pre; white-space: -moz-pre; white-space: -pre; white-space: -o-pre; word-wrap: break-word; } .lineline-code{ font-family: 'Consolas'; font-size: 12px; line-height: 18px; width: 100%; white-space: nowrap; } |
html
via
add line number to textarea or code or any dom element lineLine
