html.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /*
  2. ===============================================================================
  3. Chili is the jQuery code highlighter plugin
  4. ...............................................................................
  5. LICENSE: http://www.opensource.org/licenses/mit-license.php
  6. WEBSITE: http://noteslog.com/chili/
  7. Copyright 2008 / Andrea Ercolino
  8. ===============================================================================
  9. */
  10. {
  11. _name: 'html'
  12. , _case: false
  13. , _main: {
  14. doctype: {
  15. _match: /<!DOCTYPE\b[\w\W]*?>/
  16. , _style: "color: #CC6600;"
  17. }
  18. , ie_style: {
  19. _match: /(<!--\[[^\]]*\]>)([\w\W]*?)(<!\[[^\]]*\]-->)/
  20. , _replace: function( all, open, content, close ) {
  21. return "<span class='ie_style'>" + this.x( open ) + "</span>"
  22. + this.x( content, '//style' )
  23. + "<span class='ie_style'>" + this.x( close ) + "</span>";
  24. }
  25. , _style: "color: DarkSlateGray; font-weight: bold;"
  26. }
  27. , comment: {
  28. _match: /<!--[\w\W]*?-->/
  29. , _style: "color: #4040c2;"
  30. }
  31. , script: {
  32. _match: /(<script\s+[^>]*>)([\w\W]*?)(<\/script\s*>)/
  33. , _replace: function( all, open, content, close ) {
  34. return this.x( open, '//tag_start' )
  35. + this.x( content, 'js' )
  36. + this.x( close, '//tag_end' );
  37. }
  38. }
  39. , style: {
  40. _match: /(<style\s+[^>]*>)([\w\W]*?)(<\/style\s*>)/
  41. , _replace: function( all, open, content, close ) {
  42. return this.x( open, '//tag_start' )
  43. + this.x( content, 'css' )
  44. + this.x( close, '//tag_end' );
  45. }
  46. }
  47. // matches a starting tag of an element (with attrs)
  48. // like "<div ... >" or "<img ... />"
  49. , tag_start: {
  50. _match: /(<\w+)((?:[?%]>|[\w\W])*?)(\/>|>)/
  51. , _replace: function( all, open, content, close ) {
  52. return "<span class='tag_start'>" + this.x( open ) + "</span>"
  53. + this.x( content, '/tag_attrs' )
  54. + "<span class='tag_start'>" + this.x( close ) + "</span>";
  55. }
  56. , _style: "color: navy; font-weight: bold;"
  57. }
  58. // matches an ending tag
  59. // like "</div>"
  60. , tag_end: {
  61. _match: /<\/\w+\s*>|\/>/
  62. , _style: "color: navy;"
  63. }
  64. , entity: {
  65. _match: /&\w+?;/
  66. , _style: "color: blue;"
  67. }
  68. }
  69. , tag_attrs: {
  70. // matches a name/value pair
  71. attr: {
  72. // before in $1, name in $2, between in $3, value in $4
  73. _match: /(\W*?)([\w-]+)(\s*=\s*)((?:\'[^\']*(?:\\.[^\']*)*\')|(?:\"[^\"]*(?:\\.[^\"]*)*\"))/
  74. , _replace: "$1<span class='attr_name'>$2</span>$3<span class='attr_value'>$4</span>"
  75. , _style: { attr_name: "color: green;", attr_value: "color: maroon;" }
  76. }
  77. }
  78. }