aboutsummaryrefslogtreecommitdiff
path: root/build/markdown-examples
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-06-07 10:27:38 -0400
committerBradley Taunt <bt@btxx.org>2024-06-07 10:27:38 -0400
commit8a3e4e5207f59d42bfd6075e3792267266c86e71 (patch)
treef54d760781244072ff66564b011fef18dbf4a3de /build/markdown-examples
parent8c47200dd81639b7cb1a3a165f4bb2eec2517970 (diff)
Homepage changes, README updates, swap to lowdown, cleanup
Diffstat (limited to 'build/markdown-examples')
-rw-r--r--build/markdown-examples/index.html205
1 files changed, 95 insertions, 110 deletions
diff --git a/build/markdown-examples/index.html b/build/markdown-examples/index.html
index 1e28801..44f972e 100644
--- a/build/markdown-examples/index.html
+++ b/build/markdown-examples/index.html
@@ -7,7 +7,7 @@
<title>Markdown Examples in barf</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;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}</style>
+ <style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}.footnotes{font-size:90%;}</style>
</head>
<nav>
@@ -15,21 +15,21 @@
</nav>
<main>
-<h1>Markdown Examples in barf</h1>
+<h1 id="markdown-examples-in-barf">Markdown Examples in barf</h1>
<p>2023-01-05</p>
-<p>This following was lifted from <a href="https://github.com/karlb/smu">https://github.com/karlb/smu</a></p>
-<h1><code>smu</code> Syntax</h1>
+<p>This following was lifted from <a href="https://github.com/karlb/smu">https:&#47;&#47;github.com&#47;karlb&#47;smu</a></p>
+<h1 id="syntax"><code>smu</code> Syntax</h1>
<p>smu was started as a rewrite of
<a href="http://daringfireball.net/projects/markdown/">markdown</a> but became something
more lightweight and consistent. It differs from <a href="https://commonmark.org/">CommonMark</a> in the following ways:</p>
<ul>
<li>No support for <em>reference style links</em></li>
<li>Stricter indentation rules for lists</li>
-<li>Lists don't end paragraphs by themselves (blank line needed)</li>
-<li>Horizontal rules (<code>&lt;hr&gt;</code>) must use <code>- - -</code> as syntax</li>
+<li>Lists don&#8217;t end paragraphs by themselves (blank line needed)</li>
+<li>Horizontal rules (<code>&#60;hr&#62;</code>) must use <code>- - -</code> as syntax</li>
<li>Code fences have stricter syntax</li>
</ul>
-<p>Patches that increase the CommonMark compatibility are welcome as long as they don't increase the code complexity significantly.</p>
+<p>Patches that increase the CommonMark compatibility are welcome as long as they don&#8217;t increase the code complexity significantly.</p>
<p>This project is a fork of the <a href="https://github.com/gottox/smu">original smu</a> by
<a href="https://eboland.de">Enno Boland (gottox)</a>. The main differences to the
original smu are:</p>
@@ -43,55 +43,40 @@ original smu are:</p>
<li>Keep HTML comments in output</li>
<li>Improved spec compliance for lists</li>
<li>Nesting code block in blockquotes works</li>
-<li>"Empty" lines in lists behave identically, no matter how much whitespace they contain</li>
+<li>&#8220;Empty&#8221; lines in lists behave identically, no matter how much whitespace they contain</li>
<li>No backslash escapes in code blocks</li>
<li>Use first number as start number for ordered lists</li>
-</ul>
-</li>
+</ul></li>
<li>Added a simple test suite to check for compliance and avoid regressions</li>
</ul>
-<h2>Inline patterns</h2>
+<h2 id="inline-patterns">Inline patterns</h2>
<p>There are several patterns you can use to highlight your text:</p>
<ul>
-<li><p>Emphasis</p>
-
+<li><p>Emphasis
<ul>
<li>Surround your text with <code>*</code> or <code>_</code> to get <em>emphasised</em> text:
-<pre><code>This *is* cool.
-This _is_ cool, too.
-</code></pre>
-</li>
+This <em>is</em> cool.
+This <em>is</em> cool, too.</li>
<li>Surround your text with <code>**</code> or <code>__</code> to get <strong>strong</strong> text:
-<pre><code>This **is** cool.
-This __is__ cool, too.
-</code></pre>
-</li>
+This <strong>is</strong> cool.
+This <strong>is</strong> cool, too.</li>
<li>Surround your text with <code>***</code> or <code>___</code> to get <strong><em>strong and emphasised</em></strong> text:
-<pre><code>This ***is*** cool.
-This ___is___ cool, too.
-</code></pre>
-</li>
-<li>But this example won't work as expected:
-<pre><code>***Hello** you*
-</code></pre>
-<p>This is a wontfix bug because it would make the source too complex.
+This <strong><em>is</em></strong> cool.
+This <strong><em>is</em></strong> cool, too.</li>
+<li>But this example won&#8217;t work as expected:
+*<strong>Hello</strong> you*
+This is a wontfix bug because it would make the source too complex.
Use this instead:
-</p>
-<pre><code>***Hello*** *you*
-</code></pre>
-</li>
-</ul>
-</li>
+<strong><em>Hello</em></strong> <em>you</em></li>
+</ul></p></li>
<li><p>inline Code</p>
<p>You can produce inline code by surrounding it with backticks.</p>
-<pre><code>Use `rm -rf /` if you're a N00b.
-Use ``rm -rf /`` if you're a N00b.
-Use ```rm -rf /``` if you're a N00b.
-</code></pre>
-<p>Double and triple backticks can be used if the code itself contains backticks.</p>
-</li>
+<p>Use <code>rm -rf &#47;</code> if you&#8217;re a N00b.
+Use <code>rm -rf &#47;</code> if you&#8217;re a N00b.
+Use <code>rm -rf &#47;</code> if you&#8217;re a N00b.</p>
+<p>Double and triple backticks can be used if the code itself contains backticks.</p></li>
</ul>
-<h2>Titles</h2>
+<h2 id="titles">Titles</h2>
<p>Creating titles in smu is very easy. There are two different syntax styles. The
first is underlining with at least three characters:</p>
<pre><code>Heading
@@ -102,10 +87,10 @@ Topic
</code></pre>
<p>This is very intuitive and self explaining. The resulting sourcecode looks like
this:</p>
-<pre><code>&lt;h1&gt;Heading&lt;/h1&gt;
-&lt;h2&gt;Topic&lt;/h2&gt;
+<pre><code>&#60;h1&#62;Heading&#60;&#47;h1&#62;
+&#60;h2&#62;Topic&#60;&#47;h2&#62;
</code></pre>
-<p>Use the following prefixes if you don't like underlining:</p>
+<p>Use the following prefixes if you don&#8217;t like underlining:</p>
<pre><code># h1
## h2
### h3
@@ -113,31 +98,31 @@ this:</p>
##### h5
###### h6
</code></pre>
-<h2>Links</h2>
-<p>The simplest way to define a link is with simple <code>&lt;&gt;</code>.</p>
-<pre><code>&lt;http://s01.de&gt;
+<h2 id="links">Links</h2>
+<p>The simplest way to define a link is with simple <code>&#60;&#62;</code>.</p>
+<pre><code>&#60;http:&#47;&#47;s01.de&#62;
</code></pre>
<p>You can do the same for E-Mail addresses:</p>
-<pre><code>&lt;yourname@s01.de&gt;
+<pre><code>&#60;yourname@s01.de&#62;
</code></pre>
<p>If you want to define a label for the url, you have to use a different syntax</p>
-<pre><code>[smu - simple mark up](http://s01.de/~gottox/index.cgi/proj_smu)
+<pre><code>[smu - simple mark up](http:&#47;&#47;s01.de&#47;~gottox&#47;index.cgi&#47;proj_smu)
</code></pre>
<p>The resulting HTML-Code</p>
-<pre><code>&lt;a href=&quot;http://s01.de/~gottox/index.cgi/proj_smu&quot;&gt;smu - simple mark up&lt;/a&gt;&lt;/p&gt;
+<pre><code>&#60;a href="http:&#47;&#47;s01.de&#47;~gottox&#47;index.cgi&#47;proj_smu"&#62;smu - simple mark up&#60;&#47;a&#62;&#60;&#47;p&#62;
</code></pre>
-<h2>Lists</h2>
+<h2 id="lists">Lists</h2>
<p>Defining lists is very straightforward:</p>
<pre><code>* Item 1
* Item 2
* Item 3
</code></pre>
<p>Result:</p>
-<pre><code>&lt;ul&gt;
-&lt;li&gt;Item 1&lt;/li&gt;
-&lt;li&gt;Item 2&lt;/li&gt;
-&lt;li&gt;Item 3&lt;/li&gt;
-&lt;/ul&gt;
+<pre><code>&#60;ul&#62;
+&#60;li&#62;Item 1&#60;&#47;li&#62;
+&#60;li&#62;Item 2&#60;&#47;li&#62;
+&#60;li&#62;Item 3&#60;&#47;li&#62;
+&#60;&#47;ul&#62;
</code></pre>
<p>Defining ordered lists is also very easy:</p>
<pre><code>1. Item 1
@@ -151,50 +136,43 @@ continously counted. If you want a list starting at 2, you could write:</p>
2. Item 3
</code></pre>
<p>and get the following HTML which will render with the numbers 2, 3, 4:</p>
-<pre><code>&lt;ol start=&quot;2&quot;&gt;
-&lt;li&gt;Item 1&lt;/li&gt;
-&lt;li&gt;Item 2&lt;/li&gt;
-&lt;li&gt;Item 3&lt;/li&gt;
-&lt;/ol&gt;
-</code></pre>
-<h2>Code &amp; Blockquote</h2>
-<p>Use the <code>&gt; </code> as a line prefix for defining blockquotes. Blockquotes are
+<pre><code>&#60;ol start="2"&#62;
+&#60;li&#62;Item 1&#60;&#47;li&#62;
+&#60;li&#62;Item 2&#60;&#47;li&#62;
+&#60;li&#62;Item 3&#60;&#47;li&#62;
+&#60;&#47;ol&#62;
+</code></pre>
+<h2 id="code-blockquote">Code &#38; Blockquote</h2>
+<p>Use the <code>&#62;</code> as a line prefix for defining blockquotes. Blockquotes are
interpreted as well. This makes it possible to embed links, headings and even
other quotes into a quote:</p>
-<pre><code>&gt; Hello
-&gt; This is a quote with a [link](http://s01.de/~gottox)
+<pre><code>&#62; Hello
+&#62; This is a quote with a [link](http:&#47;&#47;s01.de&#47;~gottox)
</code></pre>
<p>Result:
-</p>
-<pre><code>&lt;blockquote&gt;&lt;p&gt;
-Hello
-This is a quote with a &lt;a href=&quot;http://s01.de/~gottox&quot;&gt;link&lt;/a&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-</code></pre>
+
+ Hello
+ This is a quote with a link
+ </p>
<p>You can define a code block with a leading Tab or with <strong>4</strong> leading spaces</p>
-<pre><code> this.is(code)
+<pre><code> this.is(code)
this.is(code, too)
</code></pre>
<p>Result:
-</p>
-<pre><code>&lt;pre&gt;&lt;code&gt;this.is(code)&lt;/code&gt;&lt;/pre&gt;
-&lt;pre&gt;&lt;code&gt;this.is(code, too)
-&lt;/code&gt;&lt;/pre&gt;
-</code></pre>
-<p>Please note that you can't use HTML or smu syntax in a code block.</p>
+ this.is(code)
+ this.is(code, too)
+ </p>
+<p>Please note that you can&#8217;t use HTML or smu syntax in a code block.</p>
<p>Another way to write code blocks is to use code fences:</p>
<pre><code>```json
-{&quot;some&quot;: &quot;code&quot;}
+{"some": "code"}
```
</code></pre>
-<p>This has two advantages:</p>
-
-<ul>
-<li>The optional language identifier will be turned into a <code>language-</code> class name</li>
-<li>You can keep the original indentation which helps when doing copy &amp; paste</li>
-</ul>
-<h2>Tables</h2>
+<p>This has two advantages:
+* The optional language identifier will be turned into a <code>language-</code> class name
+* You can keep the original indentation which helps when doing copy &#38; paste</p>
+<h2 id="tables">Tables</h2>
<p>Tables can be generated with the following syntax:</p>
<pre><code>| Heading1 | Heading2 |
| -------- | -------- |
@@ -213,41 +191,48 @@ the table body.</p>
| :------- | :------: | -------: |
| Left | Center | Right |
</code></pre>
-<h2>Other interesting stuff</h2>
+<h2 id="footnotes">Footnotes</h2>
+<p>Here is an example of using Markdown footnotes<sup id="fnref1"><a href="#fn1" rel="footnote">1</a></sup>. And incase you were looking for more examples, here is another one<sup id="fnref2"><a href="#fn2" rel="footnote">2</a></sup>.</p>
+<h2 id="other-interesting-stuff">Other interesting stuff</h2>
<ul>
<li><p>to insert a horizontal rule simple add <code>- - -</code> into an empty line:</p>
-<pre><code>Hello
-- - -
-Hello2
-</code></pre>
+<p>Hello</p>
+<hr/>
+<p>Hello2</p>
<p>Result:
-</p>
-<pre><code>&lt;p&gt;
+
Hello
-&lt;hr /&gt;
-</code></pre>
-<pre><code>Hello2&lt;/p&gt;
-</code></pre>
-</li>
+</p>
+<p>Hello2</p></li>
<li><p>Any ASCII punctuation character may escaped by precedeing them with a
backslash to avoid them being interpreted:</p>
-<pre><code>!&quot;#$%&amp;'()*+,-./:;&lt;=&gt;?@[]^_`{|}~\
-</code></pre>
-</li>
+<p>!&#8221;#$%&#38;&#8217;()*+,-.&#47;:;&#60;=&#62;?@[]^_`{|}~\</p></li>
<li><p>To force a linebreak simple add two spaces to the end of the line:</p>
-<pre><code>No linebreak
+<p>No linebreak
here.
-But here is
-one.
-</code></pre>
-</li>
+But here is<br/>
+one.</p></li>
</ul>
-<h2>embed HTML</h2>
+<h2 id="embed-html">embed HTML</h2>
<p>You can include arbitrary HTML code in your documents. The HTML will be
passed through to the resulting document without modification. This is a good
-way to work around features that are missing in smu. If you don't want this
+way to work around features that are missing in smu. If you don&#8217;t want this
behaviour, use the <code>-n</code> flag when executing smu to stricly escape the HTML
tags.</p>
+<div class="footnotes">
+<hr/>
+<ol>
+
+<li id="fn1">
+<p>This is the first footnote&#160;<a href="#fnref1" rev="footnote">&#8617;</a></p>
+</li>
+
+<li id="fn2">
+<p>Just like I promised - another footnote example&#160;<a href="#fnref2" rev="footnote">&#8617;</a></p>
+</li>
+
+</ol>
+</div>
<footer role="contentinfo">
<hr>
<h3 id="menu">Menu Navigation</h3>