diff options
Diffstat (limited to 'build/markdown-examples/index.html')
| -rw-r--r-- | build/markdown-examples/index.html | 263 |
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 ↓</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><hr></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><h1>Heading</h1> +<h2>Topic</h2> +</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><></code>.</p> +<pre><code><http://s01.de> +</code></pre> +<p>You can do the same for E-Mail addresses:</p> +<pre><code><yourname@s01.de> +</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><a href="http://s01.de/~gottox/index.cgi/proj_smu">smu - simple mark up</a></p> +</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><ul> +<li>Item 1</li> +<li>Item 2</li> +<li>Item 3</li> +</ul> +</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><ol start="2"> +<li>Item 1</li> +<li>Item 2</li> +<li>Item 3</li> +</ol> +</code></pre> +<h2>Code & Blockquote</h2> +<p>Use the <code>> </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>> Hello +> This is a quote with a [link](http://s01.de/~gottox) +</code></pre> +<p>Result: +</p> +<pre><code><blockquote><p> +Hello +This is a quote with a <a href="http://s01.de/~gottox">link</a></p> +</blockquote> +</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><pre><code>this.is(code)</code></pre> +<pre><code>this.is(code, too) +</code></pre> +</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 +{"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 & 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><p> +Hello +<hr /> +</code></pre> +<pre><code>Hello2</p> +</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>!"#$%&'()*+,-./:;<=>?@[]^_`{|}~\ +</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 |