Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 8th, 2012  |  syntax: None  |  size: 2.73 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <title>small syntax highlighting</title>
  3. <style>
  4. /* syntax highlighting styles, shameless ripoff off github ;-) */
  5. body{font-family:sans-serif;}
  6. pre{color:#333;font-size:120%;background:#fff;width:100%;overflow-x:auto;padding:5px;}
  7. /* regexp */
  8. .f-1, .f-1 * {color:#092;}
  9. /* string */
  10. .f1,.f1 * {color:#d14;}
  11. /* comment */
  12. .f2,.f2 * {color:#999;font-style:italic;}
  13. /* keyword */
  14. .f3,.f3 * {color:#000;font-weight: 700;}
  15. /* predefined object */
  16. .f4,.f4 * {color:#08B;}
  17. /* number */
  18. .f5,.f5 * {color:#099;}
  19. /* bracket, operator */
  20. .f6 {color:#000;}
  21. </style>
  22. <div>
  23. <h2>Code with syntax highlighting:</h2>
  24. <pre id="ret">/* index.js */
  25.  
  26. function(c,r){return c.replace(r,function(f,i){for(i=7;~i*!arguments[i--];);return i?'<t class=f'+i+'>'+f.replace('<','&lt;')+'</t>':''})}
  27.  
  28. /* annotated.js */
  29.  
  30. function(
  31.   c, // code
  32.   r  // regexp
  33. ){
  34.   return c.replace(r,
  35.     // use a replace callback
  36.     function(
  37.       f, // full match
  38.       i  // counter
  39.     ){
  40.       for(
  41.         // initialize counter (with count of regexp arguments)
  42.         i=6;
  43.         // only continue until i is other than -1 (~i becomes 0)
  44.         // and arguments[i] is not present (!'' becomes true coerces to 1),
  45.         // decrease counter
  46.         ~i * !arguments[i--]
  47.       // found something?
  48.       return f ?
  49.         // encapsulate it with a t-tag adding the corresponding class name
  50.         '<t class=f' + i + '>' +
  51.           // replace "<" so it will not be interpreted as a tag
  52.           f.replace('<','&lt;') +
  53.           '</t>' :
  54.         // otherwise return empty string
  55.         '';
  56.   })
  57. }
  58.  
  59. </pre>
  60. </div>
  61.  
  62. <script>
  63.   // RegExp to detect regexp, strings, comments, keywords, predefined object, numbers and operators
  64.   var re = /(?![\d\w]\s*)(\/[^\/\*][^\n\/]*\/[gi])|(".*?"|'.*?')|(\/\/.*?\n|\/\*[\x00-\xff\u00\uffff]*?\*\/)|(?:\b)(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|volatile|while|with)(?:\b)|(?:\b)(Array|Boolean|Date|Function|Math|Number|Object|RegExp|String|document|window|arguments)(?:\b)|(\d[\d\.eE]*)|([\x28-\x2b\x2d\x3a-\x3f\x5b\x5d\x5e\x7b-\x7e]+|\x2f|(?=\D)\.(?=\D))/g;
  65.   // syntax highlighting filter
  66.   var myFunction = function(c,r){return c.replace(r,function(f,i){for(i=7;~i*!arguments[i--];);return i?'<t class=f'+i+'>'+f.replace('<','<')+'</t>':''})}
  67.   // test it on the textual contents of the pre tag with the id "ret"
  68.   var ret = document.getElementById( "ret" );
  69.   ret.innerHTML = myFunction(ret.firstChild.data.replace(/&/g,'&'),re);
  70. </script>