SGML

Markdown Code Block Examples

codeblock0 codeblock1
Basic code bock examples
codeblock2 codeblock3
Code block at the begin of a markdown file
over-indented-codeblock0 over-indented-codeblock1
Lines in code blocks beginning with quadspaces or tabs
codeblock-in-list1
Nested code blocks in lists
codeblock-after-list0 codeblock-after-list1
Separation of code blocks directly following lists by a dummy HTML comment block
lazy-blank-lines-in-code-blocks0 lazy-blank-lines-in-code-blocks1 lazy-blank-lines-in-code-blocks3
Blank lines (not starting with quadspace or tab) in code blocks
xml-codeblock0
Blocks of HTML or XML verbatim code
fenced-codeblock0 fenced-codeblock1 fenced-codeblock2 fenced-codeblock3
Fenced code block examples
Note: To produce HTML from the example markdown sources, copy and paste an example source, store it into a file with the ".md" file extension, and invoke
sgmlproc <your-file.md>
where <your-file.md> is replaced by the actual file used for storing.

codeblock0

This demonstrates that

	code blocks actually need to be separated
	by a blank line
from preceding text (see hanging-indent.txt)

Rendered HTML

<p>This demonstrates that
</p><pre><code>code blocks actually need to be separated
by a blank line
</code></pre><p>from preceding text (see hanging-indent.txt)
</p>

codeblock1

This demonstrates that

	while it doesn't have to (see codeblock0.txt),
	a code block can be separated by a blank line

from following text

Rendered HTML

<p>This demonstrates that
</p><pre><code>while it doesn't have to (see codeblock0.txt),
a code block can be separated by a blank line
</code></pre><p>from following text
</p>

codeblock2

	While it doesn't have to (see codeblock3.txt),
	a code block can be separated by a blank line

from following text (markdown doesn't generate different HTML from it).

Rendered HTML

<pre><code>While it doesn't have to (see codeblock3.txt),
a code block can be separated by a blank line
</code></pre><p>from following text (markdown doesn't generate different HTML from it).
</p>

codeblock3

	While it doesn't have to (see codeblock0.txt),
	a code block can be separated by a blank line
from following text.

Rendered HTML

<pre><code>While it doesn't have to (see codeblock0.txt),
a code block can be separated by a blank line
</code></pre><p>from following text.
</p>

over-indented-codeblock0

This shows that

	code block lines
		having tabs or quadspaces at the begin of code lines
		    have those over-indentation preserved in
		        the output

Rendered HTML

<p>This shows that
</p><pre><code>code block lines
	having tabs or quadspaces at the begin of code lines
	    have those over-indentation preserved in
	        the output
</code></pre>

over-indented-codeblock1

-	Likewise,

			over-indented code lines
			     are preserved
						in nested code blocks

Rendered HTML

<ul><li><p>Likewise,
</p><pre><code>	over-indented code lines
	     are preserved
				in nested code blocks
</code></pre></li></ul>

codeblock-in-list1

- this list has a codeblock

		in a line that would be the first list continuation line
	that is, the first list continuation line comes after the
	code block (same as codeblock0.txt, but in list).
- this continues the list

Rendered HTML

<ul><li><p>this list has a codeblock
</p><pre><code>in a line that would be the first list continuation line
</code></pre><p>that is, the first list continuation line comes after the
code block (same as codeblock0.txt, but in list).
</p></li><li>this continues the list
</li></ul>

codeblock-after-list0

-	As the authors of pandoc and PHP Markdown Extra point out

	there's a conflict in using a code block after
	a list,

	when you don't want the code block to be part of 
	a list item, ie. the indentation rules
	make the 2nd (and 3rd) paragraph of this text
	continuation paragraphs of a list item, and there's
	no way to put it at the top level, short of placing
	additional top level text after the list.

Rendered HTML

<ul><li><p>As the authors of pandoc and PHP Markdown Extra point out
</p><p>there's a conflict in using a code block after
a list,
</p><p>when you don't want the code block to be part of 
a list item, ie. the indentation rules
make the 2nd (and 3rd) paragraph of this text
continuation paragraphs of a list item, and there's
no way to put it at the top level, short of placing
additional top level text after the list.
</p></li></ul>

codeblock-after-list1

-	To deal with the problem of codeblocks after lists,
-	Pandoc's author suggest to place 

<!-- an HTML comment -->

	as non-visible content terminating a list

Rendered HTML

<ul><li>To deal with the problem of codeblocks after lists,
</li><li>Pandoc's author suggest to place 
</li></ul><!-- an HTML comment -->
<pre><code>as non-visible content terminating a list
</code></pre>

lazy-blank-lines-in-code-blocks0

-  We shall demonstrate that

        in a code block, just as a properly indented blank line,
         
        a blank line without indentation is 

        taken to be part of the code block if followed by 
        further code block lines  

Rendered HTML

<ul><li><p>We shall demonstrate that
</p><pre><code>in a code block, just as a properly indented blank line,
 
a blank line without indentation is 

taken to be part of the code block if followed by 
further code block lines  
</code></pre></li></ul>

lazy-blank-lines-in-code-blocks1

-  We shall demonstrate that

        in a code block, just as a two properly indented blank lines,


        two blank lines without indentation are


        taken to be part of the code block if followed by 
        further code block lines  

Rendered HTML

<ul><li><p>We shall demonstrate that
</p><pre><code>in a code block, just as a two properly indented blank lines,


two blank lines without indentation are


taken to be part of the code block if followed by 
further code block lines  
</code></pre></li></ul>

lazy-blank-lines-in-code-blocks3

-   This is like lazy-blank-lines-in-code-blocks and demonstrates that

        in a code block, just as a properly indented blank line,
         
        a blank line without indentation is 

        taken to be part of the code block,

    with text following the code block which is continuation text to
    the text preceding the code block.

Rendered HTML

<ul><li><p>This is like lazy-blank-lines-in-code-blocks and demonstrates that
</p><pre><code>in a code block, just as a properly indented blank line,
 
a blank line without indentation is 

taken to be part of the code block,
</code></pre><p>with text following the code block which is continuation text to
the text preceding the code block.
</p></li></ul>

xml-codeblock0

The following XML fragment needs to be quoted:

	<bibo:Article rdf:about="http://dx.doi.org/">
	  <dc:title>Vorfahrt f&#252;r Fahr&#228;der : macht die Stadt fahrradfreundlich&#33;</dc:title>
	  <dc:date>2012</dc:date>
	  <dcterms:isPartOf><bibo:Journal><dc:title>ZEIT Wissen</dc:title></bibo:Journal></dcterms:isPartOf>
	  <bibo:volume>&#160;</bibo:volume>
	  <bibo:contribution>
	    <bibo:Contribution>
	      <bibo:role rdf:resource="http://purl.org/ontology/bibo/roles/author" />
	      <bibo:contributor><foaf:Person foaf:name="Gruber&#44; Helen"/></bibo:contributor>
	      <bibo:position>1</bibo:position>
	    </bibo:Contribution>
	  </bibo:contribution>
	</bibo:Article>

Rendered HTML

<p>The following XML fragment needs to be quoted:
</p><pre><code>&#60;bibo:Article rdf:about="http://dx.doi.org/"&#62;
  &#60;dc:title&#62;Vorfahrt f&#38;#252;r Fahr&#38;#228;der : macht die Stadt fahrradfreundlich&#38;#33;&#60;/dc:title&#62;
  &#60;dc:date&#62;2012&#60;/dc:date&#62;
  &#60;dcterms:isPartOf&#62;&#60;bibo:Journal&#62;&#60;dc:title&#62;ZEIT Wissen&#60;/dc:title&#62;&#60;/bibo:Journal&#62;&#60;/dcterms:isPartOf&#62;
  &#60;bibo:volume&#62;&#38;#160;&#60;/bibo:volume&#62;
  &#60;bibo:contribution&#62;
    &#60;bibo:Contribution&#62;
      &#60;bibo:role rdf:resource="http://purl.org/ontology/bibo/roles/author" /&#62;
      &#60;bibo:contributor&#62;&#60;foaf:Person foaf:name="Gruber&#38;#44; Helen"/&#62;&#60;/bibo:contributor&#62;
      &#60;bibo:position&#62;1&#60;/bibo:position&#62;
    &#60;/bibo:Contribution&#62;
  &#60;/bibo:contribution&#62;
&#60;/bibo:Article&#62;
</code></pre>

fenced-codeblock0

The following is a gfm-style fenced code block

```
Code text goes here
```

Rendered HTML

<p>The following is a gfm-style fenced code block
</p><pre><code>Code text goes here
</code></pre>

fenced-codeblock1

- The following is a gfm-style fenced code block in a list item

	```
	Code text goes here
	```

Rendered HTML

<ul><li><p>The following is a gfm-style fenced code block in a list item
</p><pre><code>Code text goes here
</code></pre></li></ul>

fenced-codeblock2

The following is a gfm-style fenced code block in a block quote

> ```
> Code text goes here
> ```

Rendered HTML

<p>The following is a gfm-style fenced code block in a block quote
</p><blockquote><pre><code>Code text goes here
</code></pre></blockquote>

fenced-codeblock3

The following is a gfm-style fenced code block

```javascript
console.log("Code text goes here")
```

producing a `code` element with the `class="javascript"` attribute.

Rendered HTML

<p>The following is a gfm-style fenced code block
</p><pre><code class="javascript">console.log("Code text goes here")
</code></pre><p>producing a <code>code</code> element with the <code>class="javascript"</code> attribute.
</p>