New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/jquery-litelighter-super-light-weight-syntax-highlight-plugin/
jQuery Litelighter : Super light weight Syntax Highlight Plugin
Litelighter is a super light weight yet powerful syntax highlighting plugin for jQuery and Zepto. It comes with light and dark themes and js, html, css languages by default. It is super easy to extend! Check below for more languages.
$pt = $('#listingsTable1').powertable( controller: '#tableController', moveDisabled: ['condition'], fixedColumns: ['description'], fixedRows: [0] );
<!-- This is a comment --> <table> <tr> <th data-ptcolumn="description">Description</th> <th data-ptcolumn="type">Type</th> <th data-ptcolumn="purchased">Purchased</th> <th data-ptcolumn="condition">Condition</th> <th data-ptcolumn="modelnum">Model #</th> <th data-ptcolumn="serialnum">Serial #</th> <th data-ptcolumn="assignedto">Assigned To</th> <th data-ptcolumn="lang">Language</th> </tr> </table> <style type="text/css"> body font-size: 12px; background-color: #005500; #myelement line-height: 22px; font-size: 2em; </style> <script type="text/javascript"> /* here is some script */ if(myvar == "foobar") for(i=1; i < myarr.length; i++) // some output $('#myEl').removeClass('highlight'); return "2012-06-23".match( /^(\d4)\-(\d2)\-(\d2)$/ ); </script>
/* pt specific styles: ptfixed, ptdragover, ptdraghandle, ptshowhide */ table tr th.ptfixed font-size: 12%; /* a fixed table header cell */ table tr td.ptfixed color: #8F9657; table .ptdragover height: 100px; width: 100%; table .ptdraghandle font-family: "Sans Serif"; table .ptshowhide:hover /* class given to a generated show/hide link */
// some comments for(i=0; i<10; i++) /* this is some pseudo code */ str += " concat str";
You may include any of the options shown. All are optional.
$('pre').litelighter( clone: true, style: 'mystyle', language: 'css' );
You may specify inline of the html which language and style to use:
<pre data-lllanguage="js" data-llstyle="mystyle"> var i = 2+3; </pre>
// Whether to clone the existing object (true or false) clone: false, // Which style to use. light and dark are available by default style: 'light', // which language to use. generic, js, html, css are available by default language: 'generic', // how many spaces represent a tab, defaults to 4 tab: ' '
// Initialize a litelighter instance $el.litelighter(); // Enable a litelighter $el.litelighter('enable'); // Disable a litelighter $el.litelighter('disable'); // Destroy a litelighter $el.litelighter('destroy'); // Get or set an option. When value is provided a Set takes place // If only the key is provided the value will be retrieved $el.litelighter('option', key, value); // If at any time you need the original code $el.data('llcode');
Adding languages is as simple as adding a new entry to an object. The library currently provide generic, js, css, html. Generic is simple C style highlighter. The new entry should be formatted as follows:
$.litelighter.languages.cfml = comment: re: /(\<\;\!\-\-\-([\s\S]*?)\-\-\-\>\;)/g, style: 'comment' , cftag: re: /(\<\;\/?cf\w(., tag: re: /(\<\;\/?(?!cf)\w(., string: (\".*?\"))/g, style: 'string' , keywords: re: /(false, sql: re: /(?:\<cfquery.*?\>)([\s\S]+?)(?:\<\/cfquery\>)/gi, language: 'sql' ;
Then your language will be available. To embed a different language take a look at the sql entry. The regular expression finds the start and end delimiters with non-captures, and captures the body of the sub language. The “language” key points the match to the new language. The embed option is only needed when sub tokens are allowed, for instance in a tag with attributes, we would like our attributes to be styled as strings. Keep in mind it is a good idea to borrow definitions from the core languages (generic, js, css, html). This way when they are updated so are yours.
<!--- This is a comment ---> <div class="myclass">This is some html<div> <cfset myvar = null> <cfquery datasource="mydsn" name="myname"> select * from myTable </cfquery>
The keys to the new object do not matter, but the “style” properties much match an entry in your style.
Adding styles is similar to languages, but you will be specifying css styles to each entry. You will want to provide at least the styles provided here as they are used by the standard languages, but you may also want more.
$.litelighter.styles.mystyle = code: 'background-color:#141414;color:#ffffff;', comment: 'color:#999;', string: 'color:#8F9657;', number: 'color:#CF6745;', keyword: 'color:#6F87A8;', operators: 'color:#9e771e;' ;
