aboutsummaryrefslogtreecommitdiff
path: root/build/markdown-examples
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-01-19 09:02:37 -0500
committerBradley Taunt <bt@btxx.org>2024-01-19 09:02:37 -0500
commit886271bb3b9a07295ecf7c6c8878fb52bdeff9b4 (patch)
tree0a970c59d236acc018248edd5ff3eb37442c0602 /build/markdown-examples
Initial commit for cgit platform
Diffstat (limited to 'build/markdown-examples')
-rw-r--r--build/markdown-examples/index.html263
1 files changed, 263 insertions, 0 deletions
diff --git a/build/markdown-examples/index.html b/build/markdown-examples/index.html
new file mode 100644
index 0000000..7f3e178
--- /dev/null
+++ b/build/markdown-examples/index.html
@@ -0,0 +1,263 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" href="data:,">
+ <title>Markdown Examples in barf</title>
+ <link href="https://barf.bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom 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>
+</head>
+
+<nav>
+ <a href="#menu">Menu &darr;</a>
+</nav>
+
+<main>
+<h1>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>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>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>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>
+<ul>
+<li>Support for code fences</li>
+<li>Improved <a href="https://commonmark.org/">CommonMark</a> compatibility. E.g.
+<ul>
+<li>Code blocks need four spaces indentation instead of three</li>
+<li>Skip empty lines at end of code blocks</li>
+<li>Ignore single spaces around code spans</li>
+<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>No backslash escapes in code blocks</li>
+<li>Use first number as start number for ordered lists</li>
+</ul>
+</li>
+<li>Added a simple test suite to check for compliance and avoid regressions</li>
+</ul>
+<h2>Inline patterns</h2>
+<p>There are several patterns you can use to highlight your text:</p>
+<ul>
+<li><p>Emphasis</p>
+
+<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>
+<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>
+<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.
+Use this instead:
+</p>
+<pre><code>***Hello*** *you*
+</code></pre>
+</li>
+</ul>
+</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>
+</ul>
+<h2>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
+=======
+
+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;
+</code></pre>
+<p>Use the following prefixes if you don't like underlining:</p>
+<pre><code># h1
+## h2
+### h3
+#### h4
+##### 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;
+</code></pre>
+<p>You can do the same for E-Mail addresses:</p>
+<pre><code>&lt;yourname@s01.de&gt;
+</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)
+</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;
+</code></pre>
+<h2>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;
+</code></pre>
+<p>Defining ordered lists is also very easy:</p>
+<pre><code>1. Item 1
+2. Item 2
+3. Item 3
+</code></pre>
+<p>Only the first number in a list is meaningful. All following list items are
+continously counted. If you want a list starting at 2, you could write:</p>
+<pre><code>2. Item 1
+2. Item 2
+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
+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)
+</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>
+<p>You can define a code block with a leading Tab or with <strong>4</strong> leading spaces</p>
+<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>
+<p>Another way to write code blocks is to use code fences:</p>
+<pre><code>```json
+{&quot;some&quot;: &quot;code&quot;}
+```
+</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>Tables can be generated with the following syntax:</p>
+<pre><code>| Heading1 | Heading2 |
+| -------- | -------- |
+| Cell 1 | Cell2 |
+</code></pre>
+<p>Aligning the columns make the input nicer to read, but is not necessary to get
+correct table output. You could just write</p>
+<pre><code>| Heading1 | Heading2 |
+| --- | --- |
+| Cell 1 | Cell2 |
+</code></pre>
+<p>To align the content of table cells, use <code>|:--|</code> for left, <code>|--:|</code> for right
+and <code>|:--:|</code> for centered alignment in the row which separates the header from
+the table body.</p>
+<pre><code>| Heading1 | Heading2 | Heading3 |
+| :------- | :------: | -------: |
+| Left | Center | Right |
+</code></pre>
+<h2>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>Result:
+</p>
+<pre><code>&lt;p&gt;
+Hello
+&lt;hr /&gt;
+</code></pre>
+<pre><code>Hello2&lt;/p&gt;
+</code></pre>
+</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>
+<li><p>To force a linebreak simple add two spaces to the end of the line:</p>
+<pre><code>No linebreak
+here.
+But here is
+one.
+</code></pre>
+</li>
+</ul>
+<h2>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
+behaviour, use the <code>-n</code> flag when executing smu to stricly escape the HTML
+tags.</p>
+<footer role="contentinfo">
+ <hr>
+ <h3 id="menu">Menu Navigation</h3>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="/about">About</a></li>
+ <li><a href="/websites">Websites</a></li>
+ <li><a href="https://git.sr.ht/~bt/barf">Source Code</a></li>
+ </ul>
+ <small>
+ Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
+ The <a href="https://git.sr.ht/~bt/barf">code for this site</a> is <a href="https://git.sr.ht/~bt/barf/tree/master/item/LICENSE">MIT</a>.
+ </small>
+</footer> \ No newline at end of file