html: Improve block rendering

org/html.go

@@ -33,7 +33,9 @@ var listTags = map[string][]string{
 
 func NewHTMLWriter() *HTMLWriter {
 	return &HTMLWriter{
-		HighlightCodeBlock: func(source, lang string) string { return html.EscapeString(source) },
+		HighlightCodeBlock: func(source, lang string) string {
+			return fmt.Sprintf("<pre>%s<pre>", html.EscapeString(source))
+		},
 	}
 }
 
@@ -110,17 +112,31 @@ func (w *HTMLWriter) writeLines(lines []Node) {
 }
 
 func (w *HTMLWriter) writeBlock(b Block) {
-	w.WriteString("<code>")
-	lang := ""
-	if len(b.Parameters) >= 1 {
-		lang = b.Parameters[0]
+	switch b.Name {
+	case "SRC":
+		lines, lang := []string{}, "text"
+		if len(b.Parameters) >= 1 {
+			lang = b.Parameters[0]
+		}
+		for _, n := range b.Children {
+			lines = append(lines, n.(Line).Children[0].(Text).Content)
+		}
+		w.WriteString(fmt.Sprintf(`<code class="src src-%s">`, lang) + "\n")
+		w.WriteString(w.HighlightCodeBlock(strings.Join(lines, "\n"), lang))
+		w.WriteString("\n</code>\n")
+	case "EXAMPLE":
+		w.WriteString(`<pre class="example">` + "\n")
+		w.writeNodes(b.Children...)
+		w.WriteString("\n</pre>\n")
+	case "QUOTE":
+		w.WriteString("<blockquote>\n")
+		w.writeNodes(b.Children...)
+		w.WriteString("\n</blockquote>\n")
+	case "CENTER":
+		w.WriteString(`<div style="text-align: center; margin-left: auto; margin-right: auto;">` + "\n")
+		w.writeNodes(b.Children...)
+		w.WriteString("\n</div>\n")
 	}
-	lines := []string{}
-	for _, n := range b.Children {
-		lines = append(lines, n.(Line).Children[0].(Text).Content)
-	}
-	w.WriteString(w.HighlightCodeBlock(strings.Join(lines, "\n"), lang))
-	w.WriteString("</code>\n")
 }
 
 func (w *HTMLWriter) writeFootnoteDefinition(f FootnoteDefinition) {

org/testdata/example.html

@@ -23,7 +23,9 @@
 <li><p>unordered list item 3 - and a <a href="https://example.com">link</a> and some lines of text</p>
 <ol>
 <li><p>and another subitem</p>
-<code>echo with a block</code>
+<code class="src src-sh">
+<pre>echo with a block<pre>
+</code>
 </li>
 <li><p>and another one with a table</p>
 <table>
@@ -62,6 +64,21 @@
 </ol>
 </li>
 </ul>
+<h2>blocks</h2>
+<code class="src src-bash">
+<pre>echo a bash source block<pre>
+</code>
+<code class="src src-text">
+<pre>a source block without a language
+and a second line
+and a third one<pre>
+</code>
+<pre class="example">
+an example blockwith multiple lines
+</pre>
+<blockquote>
+Mongodb is very webscale
+</blockquote>
 <h2>Footnotes</h2>
 <ul>
 <li>normal footnote reference <sup class="footnote-reference"><a href="#footnote-1">1</a></sup></li>

org/testdata/example.org

@@ -51,6 +51,25 @@ this one is cheating a little as tags are ALWAYS printed right aligned to a give
   2. regular link [[https://example.com][example.com]] link with description
   3. regular link to a file (image) [[file:my-img.png]]
   4. auto link, i.e. not inside =\[[square brackets]\]= https://www.example.com
+** blocks
+#+BEGIN_SRC bash
+echo a bash source block
+#+END_SRC
+
+#+BEGIN_SRC
+a source block without a language
+and a second line
+and a third one
+#+END_SRC
+
+#+BEGIN_EXAMPLE foo bar baz
+an example block
+with multiple lines
+#+END_EXAMPLE
+
+#+BEGIN_QUOTE
+Mongodb is very webscale
+#+END_QUOTE
 ** Footnotes
 - normal footnote reference [fn:1]
 - further references to the same footnote should not [fn:1] render duplicates in the footnote list