diff options
Diffstat (limited to 'public/post/2018/08')
| -rw-r--r-- | public/post/2018/08/30/markdown-guide-modified/index.html | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/public/post/2018/08/30/markdown-guide-modified/index.html b/public/post/2018/08/30/markdown-guide-modified/index.html new file mode 100644 index 0000000..b52a19e --- /dev/null +++ b/public/post/2018/08/30/markdown-guide-modified/index.html @@ -0,0 +1,250 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Markdown Guide (modified) | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Markdown Guide (modified)</span></h1> +<h2 class="author">Open Source</h2> +<h2 class="date">2018/08/30</h2> +<p class="terms"> + + + Categories: <a href="/categories/example">Example</a> + + + + Tags: <a href="/tags/markdown">Markdown</a> + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <h1 id="an-h1-header">An h1 header</h1> +<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> +<h2 id="an-h2-header">An h2 header</h2> +<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 tabindex="0"><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> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span><span style="color:#f92672">import</span> time +</span></span><span style="display:flex;"><span><span style="color:#75715e"># Quick, count to ten!</span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">10</span>): +</span></span><span style="display:flex;"><span> <span style="color:#75715e"># (but not *too* quick)</span> +</span></span><span style="display:flex;"><span> time<span style="color:#f92672">.</span>sleep(<span style="color:#ae81ff">0.5</span>) +</span></span><span style="display:flex;"><span> print i +</span></span></code></pre></div><h3 id="an-h3-header">An h3 header</h3> +<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"><a href="#fn:1" class="footnote-ref" role="doc-noteref">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 canvas</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>(The above is the caption for the table.)</p> +<p>A horizontal rule follows.</p> +<hr> +<p>Here’s a definition list:</p> +<dl> +<dt>apples</dt> +<dd>Good for making applesauce.</dd> +<dt>oranges</dt> +<dd>Citrus!</dd> +<dt>tomatoes</dt> +<dd>There’s no “e” in tomatoe.</dd> +</dl> +<p>(Put a blank line between each term/definition pair to spread +things out more.)</p> +<p>and images can be specified like so:</p> +<p><img src="/images/partywizard.gif" alt="example image" title="An exemplary image"></p> +<p>Inline math equations go in like so: \(\omega = d\phi / dt\). +Display math should get its own line and be put in in +double-dollarsigns:</p> +<p>$$I = \int \rho R^{2} dV$$</p> +<p>And note that you can backslash-escape any punctuation characters +which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p> +<h4 id="images-auto-center">Images auto center:</h4> +<p><img src="http://emojis.slackmojis.com/emojis/images/1475875185/1223/party-dinosaur.gif?1475875185" alt="Party"></p> +<div class="footnotes" role="doc-endnotes"> +<hr> +<ol> +<li id="fn:1"> +<p>Footnote text goes here. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> +</li> +</ol> +</div> + + <a href="/"> >> Home</a> + </main> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + |