Updated examples in readme.

1 files changed, 197 insertions, 73 deletions

diff --git a/README.md b/README.md
index 32d3dca..8aa660c 100644
--- a/README.md
+++ b/README.md
@@ -50,100 +50,224 @@ Good to go.
 
 ## Basic tags
 
-    a                      <a></a>
-    a.x                    <a class="x"></a>
-    a#q.x                  <a id="q" class="x"></a>
-    a#q.x.y.z              <a id="q" class="x y z"></a>
-    #q                     \n<div id="q">\n</div>
-    .x                     \n<div class="x">\n</div>
-    #q.x                   \n<div id="q" class="x">\n</div>
-    #q.x.y.z               \n<div id="q" class="x y z">\n</div>
+    a                        <a></a>
+    a.x                      <a class="x"></a>
+    a#q.x                    <a id="q" class="x"></a>
+    a#q.x.y.z                <a id="q" class="x y z"></a>
+    #q                       <div id="q">
+                             </div>
+    .x                       <div class="x">
+                             </div>
+    #q.x                     <div id="q" class="x">
+                             </div>
+    #q.x.y.z                 <div id="q" class="x y z">
+                             </div>
 
 ## Empty tags
 
-    a/                     <a/>
-    a/.x                   <a class="x"/>
-    a/#q.x                 <a id="q" class="x"/>
-    a/#q.x.y.z             <a id="q" class="x y z"/>
+    a/                       <a/>
+    a/.x                     <a class="x"/>
+    a/#q.x                   <a id="q" class="x"/>
+    a/#q.x.y.z               <a id="q" class="x y z"/>
 
 ## Self-closing tags
 
-    input type=text        \n<input type="text"/>
-    img                    \n<img/>
-    img>metadata/*2        \n<img>\n<metadata/>\n<metadata/>\n</img>
+    input type=text          <input type="text"/>
+    img                      <img/>
+    img>metadata/*2          <img>
+                                 <metadata/>
+                                 <metadata/>
+                             </img>
 
 ## Siblings
 
-    a+b                    <a></a><b></b>
-    a+b+c                  <a></a><b></b><c></c>
-    a.x+b                  <a class="x"></a><b></b>
-    a#q.x+b                <a id="q" class="x"></a><b></b>
-    a#q.x.y.z+b            <a id="q" class="x y z"></a><b></b>
-    a#q.x.y.z+b#p.l.m.n    <a id="q" class="x y z"></a><b id="p" class="l m n"></b>
+    a+b                      <a></a>
+                             <b></b>
+    a+b+c                    <a></a>
+                             <b></b>
+                             <c></c>
+    a.x+b                    <a class="x"></a>
+                             <b></b>
+    a#q.x+b                  <a id="q" class="x"></a>
+                             <b></b>
+    a#q.x.y.z+b              <a id="q" class="x y z"></a>
+                             <b></b>
+    a#q.x.y.z+b#p.l.m.n      <a id="q" class="x y z"></a>
+                             <b id="p" class="l m n"></b>
 
 ## Tag expansion
 
-    table+                 \n<table>\n<tr>\n<td>\n</td>\n</tr>\n</table>
-    dl+                    \n<dl>\n<dt>\n</dt>\n<dd>\n</dd>\n</dl>
-    ul+                    \n<ul>\n<li>\n</li>\n</ul>
-    ul++ol+                \n<ul>\n<li>\n</li>\n</ul>\n<ol>\n<li>\n</li>\n</ol>
-    ul#q.x.y m=l+          \n<ul id="q" class="x y" m="l">\n<li>\n</li>\n</ul>                 
+    table+                   <table>
+                                 <tr>
+                                     <td>
+                                     </td>
+                                 </tr>
+                             </table>
+    dl+                      <dl>
+                                 <dt></dt>
+                                 <dd></dd>
+                             </dl>
+    ul+                      <ul>
+                                 <li></li>
+                             </ul>
+    ul++ol+                  <ul>
+                                 <li></li>
+                             </ul>
+                             <ol>
+                                 <li></li>
+                             </ol>
+    ul#q.x.y m=l+            <ul id="q" class="x y" m="l">
+                                 <li></li>
+                             </ul>
 
 ## Parent > child
 
-    a>b                    <a><b></b></a>
-    a>b>c                  <a><b><c></c></b></a>
-    a.x>b                  <a class="x"><b></b></a>
-    a#q.x>b                <a id="q" class="x"><b></b></a>
-    a#q.x.y.z>b            <a id="q" class="x y z"><b></b></a>
-    a#q.x.y.z>b#p.l.m.n    <a id="q" class="x y z"><b id="p" class="l m n"></b></a>
-    #q>.x                  \n<div id="q">\n<div class="x">\n</div>\n</div>
-    a>b+c                  <a><b></b><c></c></a>
-    a>b+c>d                <a><b></b><c><d></d></c></a>
+    a>b                      <a><b></b></a>
+    a>b>c                    <a><b><c></c></b></a>
+    a.x>b                    <a class="x"><b></b></a>
+    a#q.x>b                  <a id="q" class="x"><b></b></a>
+    a#q.x.y.z>b              <a id="q" class="x y z"><b></b></a>
+    a#q.x.y.z>b#p.l.m.n      <a id="q" class="x y z"><b id="p" class="l m n"></b></a>
+    #q>.x                    <div id="q">
+                                 <div class="x">
+                                 </div>
+                             </div>
+    a>b+c                    <a>
+                                 <b></b>
+                                 <c></c>
+                             </a>
+    a>b+c>d                  <a>
+                                 <b></b>
+                                 <c><d></d></c>
+                             </a>
 
 ## Multiplication
 
-    a*1                    <a></a>
-    a*2                    <a></a><a></a>
-    a/*2                   <a/><a/>
-    a*2+b*2                <a></a><a></a><b></b><b></b>
-    a*2>b*2                <a><b></b><b></b></a><a><b></b><b></b></a>
-    a>b*2                  <a><b></b><b></b></a>
-    a#q.x>b#q.x*2          <a id="q" class="x"><b id="q" class="x"></b><b id="q" class="x"></b></a>
-    a#q.x>b/#q.x*2         <a id="q" class="x"><b id="q" class="x"/><b id="q" class="x"/></a>
+    a*1                      <a></a>
+    a*2                      <a></a>
+                             <a></a>
+    a/*2                     <a/>
+                             <a/>
+    a*2+b*2                  <a></a>
+                             <a></a>
+                             <b></b>
+                             <b></b>
+    a*2>b*2                  <a>
+                                 <b></b>
+                                 <b></b>
+                             </a>
+                             <a>
+                                 <b></b>
+                                 <b></b>
+                             </a>
+    a>b*2                    <a>
+                                 <b></b>
+                                 <b></b>
+                             </a>
+    a#q.x>b#q.x*2            <a id="q" class="x">
+                                 <b id="q" class="x"></b>
+                                 <b id="q" class="x"></b>
+                             </a>
+    a#q.x>b/#q.x*2           <a id="q" class="x">
+                                 <b id="q" class="x"/>
+                                 <b id="q" class="x"/>
+                             </a>
 
 ## Properties
 
-    a x                    <a x=""></a>
-    a x=                   <a x=""></a>
-    a x=""                 <a x=""></a>
-    a x=y                  <a x="y"></a>
-    a x="y"                <a x="y"></a>
-    a x="()"               <a x="()"></a>
-    a x m                  <a x="" m=""></a>
-    a x= m=""              <a x="" m=""></a>
-    a x=y m=l              <a x="y" m="l"></a>
-    a/ x=y m=l             <a x="y" m="l"/>
-    a#foo x=y m=l          <a id="foo" x="y" m="l"></a>
-    a.foo x=y m=l          <a class="foo" x="y" m="l"></a>
-    a#foo.bar.mu x=y m=l   <a id="foo" class="bar mu" x="y" m="l"></a>
-    a/#foo.bar.mu x=y m=l  <a id="foo" class="bar mu" x="y" m="l"/>
-    a x=y+b                <a x="y"></a><b></b>
-    a x=y+b x=y            <a x="y"></a><b x="y"></b>
-    a x=y>b                <a x="y"><b></b></a>
-    a x=y>b x=y            <a x="y"><b x="y"></b></a>
-    a x=y>b x=y+c x=y      <a x="y"><b x="y"></b><c x="y"></c></a>
+    a x                      <a x=""></a>
+    a x=                     <a x=""></a>
+    a x=""                   <a x=""></a>
+    a x=y                    <a x="y"></a>
+    a x="y"                  <a x="y"></a>
+    a x="()"                 <a x="()"></a>
+    a x m                    <a x="" m=""></a>
+    a x= m=""                <a x="" m=""></a>
+    a x=y m=l                <a x="y" m="l"></a>
+    a/ x=y m=l               <a x="y" m="l"/>
+    a#foo x=y m=l            <a id="foo" x="y" m="l"></a>
+    a.foo x=y m=l            <a class="foo" x="y" m="l"></a>
+    a#foo.bar.mu x=y m=l     <a id="foo" class="bar mu" x="y" m="l"></a>
+    a/#foo.bar.mu x=y m=l    <a id="foo" class="bar mu" x="y" m="l"/>
+    a x=y+b                  <a x="y"></a>
+                             <b></b>
+    a x=y+b x=y              <a x="y"></a>
+                             <b x="y"></b>
+    a x=y>b                  <a x="y"><b></b></a>
+    a x=y>b x=y              <a x="y"><b x="y"></b></a>
+    a x=y>b x=y+c x=y        <a x="y">
+                                 <b x="y"></b>
+                                 <c x="y"></c>
+                             </a>
 
 ## Parentheses
 
-    (a)                    <a></a>
-    (a)+(b)                <a></a><b></b>
-    a>(b)                  <a><b></b></a>
-    (a>b)>c                <a><b></b></a>
-    (a>b)+c                <a><b></b></a><c></c>
-    z+(a>b)+c+k            <z></z><a><b></b></a><c></c><k></k>
-    (a)*2                  <a></a><a></a>
-    ((a)*2)                <a></a><a></a>
-    ((a)*2)                <a></a><a></a>
-    (a>b)*2                <a><b></b></a><a><b></b></a>
-    (a+b)*2                <a></a><b></b><a></a><b></b>
+    (a)                      <a></a>
+    (a)+(b)                  <a></a>
+                             <b></b>
+    a>(b)                    <a><b></b></a>
+    (a>b)>c                  <a><b></b></a>
+    (a>b)+c                  <a><b></b></a>
+                             <c></c>
+    z+(a>b)+c+k              <z></z>
+                             <a><b></b></a>
+                             <c></c>
+                             <k></k>
+    (a)*2                    <a></a>
+                             <a></a>
+    ((a)*2)                  <a></a>
+                             <a></a>
+    ((a))*2                  <a></a>
+                             <a></a>
+    (a>b)*2                  <a><b></b></a>
+                             <a><b></b></a>
+    (a+b)*2                  <a></a>
+                             <b></b>
+                             <a></a>
+                             <b></b>
+
+## Filter: HTML with comments
+
+    a.b|c                    <!-- .b -->
+                             <a class="b"></a>
+                             <!-- /.b -->
+    #a>.b|c                  <!-- #a -->
+                             <div id="a">
+                                 <!-- .b -->
+                                 <div class="b">
+                                 </div>
+                                 <!-- /.b -->
+                             </div>
+                             <!-- /#a -->
+
+## Filter: HAML
+
+    a|haml                   %a
+    a#q.x.y.z|haml           %a#q.x.y.z
+    a#q.x x=y m=l|haml       %a#q.x{:x => "y", :m => "l"}
+    div|haml                 %div
+    div.footer|haml          .footer
+    .footer|haml             .footer
+    p>a href=#+br|haml       %p
+                                 %a{:href => "#"}
+                                 %br
+
+## Filter: Hiccup
+
+    a|hic                    [:a]
+    a#q.x.y.z|hic            [:a#q.x.y.z]
+    a#q.x x=y m=l|hic        [:a#q.x {:x "y", :m "l"}]
+    .footer|hic              [:div.footer]
+    p>a href=#+br|hic        [:p
+                                 [:a {:href "#"}]
+                                 [:br]]
+    #q>(a*2>b)+p>b|hic       [:div#q
+                                 [:a [:b]]
+                                 [:a [:b]]
+                                 [:p
+                                     [:b]]]
+
+## Filter: escape
+
+    script src=&quot;|e      &lt;script src="&amp;quot;"&gt;
+                             &lt;/script&gt;