diff options
Diffstat (limited to 'build/markdown-examples/index.html')
| -rw-r--r-- | build/markdown-examples/index.html | 81 |
1 files changed, 78 insertions, 3 deletions
diff --git a/build/markdown-examples/index.html b/build/markdown-examples/index.html index 44f972e..25683ea 100644 --- a/build/markdown-examples/index.html +++ b/build/markdown-examples/index.html @@ -16,12 +16,17 @@ <main> <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 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> @@ -29,13 +34,17 @@ more lightweight and consistent. It differs from <a href="https://commonmark.org <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> @@ -49,10 +58,14 @@ original smu are:</p> </ul></li> <li>Added a simple test suite to check for compliance and avoid regressions</li> </ul> + <h2 id="inline-patterns">Inline patterns</h2> + <p>There are several patterns you can use to highlight your text:</p> + <ul> -<li><p>Emphasis +<li><p>Emphasis</p> + <ul> <li>Surround your text with <code>*</code> or <code>_</code> to get <em>emphasised</em> text: This <em>is</em> cool. @@ -68,29 +81,39 @@ This <strong><em>is</em></strong> cool, too.</li> This is a wontfix bug because it would make the source too complex. Use this instead: <strong><em>Hello</em></strong> <em>you</em></li> -</ul></p></li> +</ul></li> <li><p>inline Code</p> + <p>You can produce inline code by surrounding it with backticks.</p> + <p>Use <code>rm -rf /</code> if you’re a N00b. Use <code>rm -rf /</code> if you’re a N00b. Use <code>rm -rf /</code> if you’re a N00b.</p> + <p>Double and triple backticks can be used if the code itself contains backticks.</p></li> </ul> + <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 ======= 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 @@ -98,127 +121,179 @@ this:</p> ##### h5 ###### h6 </code></pre> + <h2 id="links">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 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><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 id="code-blockquote">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: 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) this.is(code, too) </code></pre> + <p>Result: this.is(code) this.is(code, too) </p> + <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: * 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 & paste</p> + <h2 id="tables">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 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> + <p>Hello</p> + <hr/> + <p>Hello2</p> + <p>Result: Hello </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> -<p>!”#$%&’()*+,-./:;<=>?@[]^_`{|}~\</p></li> + +<p>!”#$%&’()*+,-./:;<=>?@[]<sup>_`{|}~\</sup></p></li> <li><p>To force a linebreak simple add two spaces to the end of the line:</p> + <p>No linebreak here. But here is<br/> one.</p></li> </ul> + <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 behaviour, use the <code>-n</code> flag when executing smu to stricly escape the HTML tags.</p> + <div class="footnotes"> <hr/> <ol> |