Add initial Haml highlighting.

seancribbs · Oct 2, 2008 · 9aa33b5 · 9aa33b5
1 parent 09e8d4d
commit 9aa33b5
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 1 deletion.
diff --git a/haml.js b/haml.js
@@ -0,0 +1,33 @@
+CodeHighlighter.addStyle('haml', {
+  preserve: {
+    exp: /\B~(?=[\s\w])\B/
+  },
+  comment: {
+    exp: /\B\/[^\n]*/
+  },
+  classDiv: {
+    exp: /\.\w+\b/
+  },
+  idDiv: {
+    exp: /\#\w+\b/
+  },
+  doctype: {
+    exp: /^!!![^\n]*/
+  },
+  tag: {
+    exp: /\%\w+\b/
+  },
+  emit: {
+    exp: /\B=(?=[\s\w])/
+  },
+  interpolate: {
+    exp: /\B(==)\B([^\n]*)/,
+    replacement: "<span class='interpolate'>$1</span><span class='string'>$2</span>"
+  },
+  symbol: {
+    exp: /:\w+/
+  },
+  string: {
+    exp: /"[^"]*"|'[^']*'/
+  }
+})
diff --git a/test/code.css b/test/code.css
@@ -16,3 +16,19 @@ code.erlang .variable {
   color: rgb(62,135,227); }
 code.erlang .keyword, code.erlang .pp, code.erlang .punctuation {
   color: rgb(226,137,100); }
+
+code.haml .tag {
+  color: rgb(137,189,255); }
+code.haml .idDiv {
+  color: rgb(62,135,227); }
+code.haml .classDiv {
+  color: rgb(226,137,100); }
+code.haml .comment {
+  color: rgb(174,174,174);
+  font-style: italic; }
+code.haml .preserve, code.haml .interpolate, code.haml .emit {
+  color: rgb(226,137,100); }
+code.haml .string {
+  color: rgb(101,176,66); }
+code.haml .symbol {
+  color: orange; }
diff --git a/test/code.sass b/test/code.sass
@@ -15,4 +15,21 @@ code.erlang
   .variable
     color: rgb(62,135,227)
   .keyword, .pp, .punctuation
-    color: rgb(226,137,100)
+    color: rgb(226,137,100)
+
+code.haml
+  .tag
+    color: rgb(137,189,255)
+  .idDiv
+    color: rgb(62,135,227)
+  .classDiv
+    color: rgb(226,137,100)
+  .comment
+    color: rgb(174,174,174)
+    font-style: italic
+  .preserve, .interpolate, .emit
+    color: rgb(226,137,100)
+  .string
+    color: rgb(101,176,66)
+  .symbol
+    color: orange
diff --git a/test/haml.html b/test/haml.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'>
+  <head>
+    <title>Haml code highlighting test</title>
+    <link href='code.css' rel='stylesheet' type='text/css' />
+    <script src="code_highlighter.js" type="text/javascript"></script>
+    <script src="../haml.js" type="text/javascript"></script>
+  </head>
+<body>
+<pre><code class="haml">!!! Strict
+%html{html_attrs}
+  %head
+    %title A test Haml page
+  %body
+    #content{:style => "width: 960px"}
+      .left
+        Left box
+        ~ preserve_this
+      .right
+        Right box
+        = emit_output
+    #footer.clear
+      Footer
+      == #{copyright} Interpolated text
+      / A Haml content
+</code></pre>
+</body>
+</html>