Markdown: support floating images

With a minor enhancement to the support for specifying image
dimensions, images can now be "float"ed to the left or right
or even centered in their own block.

Add the ability to generate a <br clear="all" /> with 3 or
more spaces on the end of a line rather than a plain <br />
with only 2.

Document these additions as well.

Signed-off-by: Kyle J. McKay <mackyle@gmail.com>

Markdown.pl

@@ -1141,6 +1141,7 @@ sub _RunSpanGamut {
     $text = _DoItalicsAndBoldAndStrike($text);
 
     # Do hard breaks:
+    $text =~ s/ {3,}\n/<br clear=\"all\"$opt{empty_element_suffix}\n/g;
     $text =~ s/ {2,}\n/<br$opt{empty_element_suffix}\n/g;
 
     return $text;
@@ -1487,22 +1488,31 @@ sub _MakeIMGTag {
     defined($title) or $title="";
     return "" unless $url ne "";
 
-    my $result = $g_escape_table{'<'}."img src=\"" . _EncodeAttText($url) . "\"";
+    my ($w, $h, $lf, $rt) = (0, 0, '', '');
-    my ($w, $h) = (0, 0);
     ($alt, $title) = (_strip($alt), _strip($title));
-    if ($title =~ /^(.*)\(([1-9][0-9]*)[xX\xd7]([1-9][0-9]*)\)$/os) {
+    if ($title =~ /^(.*)\((<?)([1-9][0-9]*)[xX\xd7]([1-9][0-9]*)(>?)\)$/os) {
-	($title, $w, $h) = (_strip($1), $2, $3);
+	($title, $w, $h, $lf, $rt) = (_strip($1), $3, $4, $2, $5);
-    } elsif ($title =~ /^(.*)\(\?[xX\xd7]([1-9][0-9]*)\)$/os) {
+    } elsif ($title =~ /^(.*)\((<?)\?[xX\xd7]([1-9][0-9]*)(>?)\)$/os) {
-	($title, $h) = (_strip($1), $2);
+	($title, $h, $lf, $rt) = (_strip($1), $3, $2, $4);
-    } elsif ($title =~ /^(.*)\(([1-9][0-9]*)[xX\xd7]\?\)$/os) {
+    } elsif ($title =~ /^(.*)\((<?)([1-9][0-9]*)[xX\xd7]\?(>?)\)$/os) {
-	($title, $w) = (_strip($1), $2);
+	($title, $w, $lf, $rt) = (_strip($1), $3, $2, $4);
+    } elsif ($title =~ /^(.*)\((?!\))(<?)(>?)\)$/os) {
+	($title, $lf, $rt) = (_strip($1), $2, $3);
     }
+    my $result = '';
+    $result .= $g_escape_table{'<'}."center".$g_escape_table{'>'}
+	if $lf && $rt;
+    $result .= $g_escape_table{'<'}."img src=\"" . _EncodeAttText($url) . "\"";
+    $result .= " align=\"left\"" if $lf && !$rt;
+    $result .= " align=\"right\"" if $rt && !$lf;
     $result .= " alt=\"" . _EncodeAttText($alt) . "\"" if $alt ne "";
     $result .= " width=\"$w\"" if $w != 0;
     $result .= " height=\"$h\"" if $h != 0;
     $result .= " title=\"" . _EncodeAttText($title) . "\"" if $title ne "";
     $result .= " /" unless $opt{empty_element_suffix} eq ">";
     $result .= $g_escape_table{'>'};
+    $result .= $g_escape_table{'<'}."/center".$g_escape_table{'>'}
+	if $lf && $rt;
     return $result;
 }
 

syntax.md

@@ -209,6 +209,9 @@ character in a paragraph into a `<br />` tag.
 When you *do* want to insert a `<br />` break tag using Markdown, you
 end a line with two or more spaces, then type return.
 
+If you end a line with three or more spaces then a `<br clear="all" />`
+tag will be generated instead of the plain `<br />` tag.
+
 Yes, this takes a tad more effort to create a `<br />`, but a simplistic
 "every line break is a `<br />`" rule wouldn't work for Markdown.
 Markdown's email-style [blockquoting][bq] and multi-paragraph [list items][l]
@@ -1220,6 +1223,28 @@ The first dimension sets the "width" attribute and the second
 dimension sets the "height" attribute.  The dimensions are then
 removed from the "title" attribute.
 
+To float an image to the left or right include a "(<)" for left or
+"(>)" for right at the end of the title like so:
+
+      [id]: url/to/image  "Optional title attribute (<)"
+      [id]: url/to/image  "Optional title attribute (>)"
+
+These can be combined with the image dimensions like so:
+
+      [id]: url/to/image  "Optional title attribute (<512x342)"
+      [id]: url/to/image  "Optional title attribute (<?x342)"
+      [id]: url/to/image  "Optional title attribute (<512x?)"
+      [id]: url/to/image  "Optional title attribute (512x342>)"
+      [id]: url/to/image  "Optional title attribute (?x342>)"
+      [id]: url/to/image  "Optional title attribute (512x?>)"
+
+Providing both the "float left" (<) and "float right" (>) annotations
+at the same time will cause the image to end up centered in its
+own "div" like so:
+
+      [id]: url/to/image  "Optional title attribute (<>)"
+      [id]: url/to/image  "Optional title attribute (<512x342>)"
+
 It's possible to wrap the url when it's specified in a reference.
 Both of these examples: