diff options
Diffstat (limited to 'build/posts/markdown-examples')
| -rw-r--r-- | build/posts/markdown-examples/index.html | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/build/posts/markdown-examples/index.html b/build/posts/markdown-examples/index.html new file mode 100644 index 0000000..f6c0a03 --- /dev/null +++ b/build/posts/markdown-examples/index.html @@ -0,0 +1,227 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> + <link rel="icon" href="data:,"> + <title>Markdown Examples in wruby</title> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 +auto;max-width:650px;padding:1rem;}blockquote{background:#eee;border-left:4px + solid;color:black;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts,#menu{list-style:none;padding:0;}.posts li{margin-bottom:8px;}.posts li span{display:block;font-size:90%;}#menu li{display:inline-block;margin-right:8px;}.footnotes{font-size:90%;}</style> +</head> + +<nav> + <a href="/">Home</a><span> | </span><a href="#menu">Menu ↓</a> +</nav> + +<main> + +<h1 id="markdown-examples-in-wruby">Markdown Examples in wruby</h1> + +<p>2024-07-20</p> + +<h2 id="an-h2-header">An h2 header</h2> + +<p>Paragraphs are separated by a blank line.</p> + +<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists +look like:</p> + +<ul> + <li>this one</li> + <li>that one</li> + <li>the other one</li> +</ul> + +<p>Note that — not considering the asterisk — the actual text +content starts at 4-columns in.</p> + +<blockquote> + <p>Block quotes are +written like so.</p> + + <p>They can span multiple paragraphs, +if you like.</p> +</blockquote> + +<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all +in chapters 12–14”). Three dots … will be converted to an ellipsis. +Unicode is supported. ☺</p> + +<h3 id="an-h3-header">An h3 header</h3> + +<p>Here’s a numbered list:</p> + +<ol> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ol> + +<p>Note again how the actual text starts at 4 columns in (4 characters +from the left side). Here’s a code sample:</p> + +<pre><code># Let me re-iterate ... +for i in 1 .. 10 { do-something(i) } +</code></pre> + +<p>As you probably guessed, indented 4 spaces. By the way, instead of +indenting the block, you can use delimited blocks, if you like:</p> + +<pre><code>define foobar() { + print "Welcome to flavor country!"; +} +</code></pre> + +<p>(which makes copying & pasting easier). You can optionally mark the +delimited block for Pandoc to syntax highlight it:</p> + +<pre><code class="language-python">import time +# Quick, count to ten! +for i in range(10): + # (but not *too* quick) + time.sleep(0.5) + print i +</code></pre> + +<h4 id="an-h4-header">An h4 header</h4> + +<p>Now a nested list:</p> + +<ol> + <li> + <p>First, get these ingredients:</p> + + <ul> + <li>carrots</li> + <li>celery</li> + <li>lentils</li> + </ul> + </li> + <li> + <p>Boil some water.</p> + </li> + <li> + <p>Dump everything in the pot and follow +this algorithm:</p> + + <pre><code>find wooden spoon +uncover pot +stir +cover pot +balance wooden spoon precariously on pot handle +wait 10 minutes +goto first step (or shut off burner when done) +</code></pre> + + <p>Do not bump wooden spoon or it will fall.</p> + </li> +</ol> + +<p>Notice again how text always lines up on 4-space indents (including +that last line which continues item 3 above).</p> + +<p>Here’s a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local +doc</a>, and to a <a href="#an-h2-header">section heading in the current +doc</a>. Here’s a footnote <sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup>.</p> + +<p>Tables can look like this:</p> + +<table> + <thead> + <tr> + <th>size</th> + <th>material</th> + <th>color</th> + </tr> + </thead> + <tbody> + <tr> + <td>9</td> + <td>leather</td> + <td>brown</td> + </tr> + <tr> + <td>10</td> + <td>hemp</td> + <td>natural</td> + </tr> + <tr> + <td>11</td> + <td>glass</td> + <td>transparent</td> + </tr> + </tbody> +</table> + +<p>Table: Shoes, their sizes, and what they’re made of.</p> + +<p>A horizontal rule follows.</p> + +<hr /> + +<p>Here’s a definition list:</p> + +<dl> + <dt>apples</dt> + <dd>Good for making applesauce. +oranges</dd> + <dd>Citrus! +tomatoes</dd> + <dd>There’s no “e” in tomatoe.</dd> +</dl> + +<p>Again, text is indented 4 spaces. (Put a blank line between each +term/definition pair to spread things out more.)</p> + +<p>Here’s a “line block”:</p> + +<table> + <tbody> + <tr> + <td>Line one</td> + </tr> + <tr> + <td>Line too</td> + </tr> + <tr> + <td>Line tree</td> + </tr> + </tbody> +</table> + +<p>and images can be specified like so:</p> + +<p><img src="https://placekitten.com/480/480" alt="example image" title="An exemplary image" /></p> + +<p>And note that you can backslash-escape any punctuation characters +which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p> +<div class="footnotes" role="doc-endnotes"> + <ol> + <li id="fn:1" role="doc-endnote"> + <p>Footnote text goes here. <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p> + </li> + </ol> +</div> +</main> +<hr/> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/about">About</a></li> + <li><a href="/index.atom">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://wruby.btxx.org">wruby</a>. <br> + Maintained with ♥ for the web. <br> + The content for this site is <a + href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> + The <a href="https://git.sr.ht/~bt/wruby">code for this project</a> + is <a href="https://git.sr.ht/~bt/wruby/tree/master/item/LICENSE">MIT</a>. + </small> +</footer> |