Fix invalid HTML markup for line tokens (use span + CSS instead of div).

3 files changed, 6 insertions, 4 deletions

diff --git a/lib/coderay/encoders/html.rb b/lib/coderay/encoders/html.rb
index 5c90453..c59ee03 100644
--- a/lib/coderay/encoders/html.rb
+++ b/lib/coderay/encoders/html.rb
@@ -271,9 +271,9 @@ module Encoders
     # whole lines to be highlighted, eg. a deleted line in a diff
     def begin_line kind
       if style = @css_style[@last_opened ? [kind, *@opened] : kind]
-        @out << style.sub('<span', '<div')
+        @out << style.sub('<span class="', '<span class="line ')
       else
-        @out << '<div>'
+        @out << '<span class="line">'
       end
       @opened << kind
       @last_opened = kind if @options[:css] == :style
@@ -285,7 +285,7 @@ module Encoders
           'that is not open. Open are: %p.' % [kind, @opened[1..-1]]
       end
       if @opened.pop
-        @out << '</div'
+        @out << '</span>'
         @last_opened = @opened.last if @last_opened
       end
     end
diff --git a/lib/coderay/styles/alpha.rb b/lib/coderay/styles/alpha.rb
index a57b0c4..d7b9da0 100644
--- a/lib/coderay/styles/alpha.rb
+++ b/lib/coderay/styles/alpha.rb
@@ -41,6 +41,7 @@ table.CodeRay td { padding: 2px 4px; vertical-align: top; }
 .CodeRay .line_numbers a:target, .CodeRay .no a:target { color: blue !important; }
 .CodeRay .line_numbers .highlighted, .CodeRay .no .highlighted { color: red; }
 .CodeRay .no { padding: 0px 4px; }
+.CodeRay .line { display: block; float: left; width: 100%; }
 .CodeRay .code { width: 100%; }
 .CodeRay .code pre { overflow: auto; }
     MAIN
diff --git a/lib/coderay/styles/cycnus.rb b/lib/coderay/styles/cycnus.rb
index 7427662..1c5b604 100644
--- a/lib/coderay/styles/cycnus.rb
+++ b/lib/coderay/styles/cycnus.rb
@@ -32,12 +32,13 @@ table.CodeRay td { padding: 2px 4px; vertical-align: top; }
 }
 .CodeRay .line_numbers .highlighted, .CodeRay .no .highlighted { color: red; }
 .CodeRay .no { padding: 0px 4px; }
+.CodeRay .line { display: block; float: left; width: 100%; }
 .CodeRay .code { width: 100%; }
 .CodeRay .code pre { overflow: auto; }
     MAIN
 
     TOKEN_COLORS = <<-'TOKENS'
-.debug { color:white ! important; background:blue ! important; }
+.debug { color: white !important; background: blue !important; }
 
 .an { color:#007 }
 .at { color:#f08 }