diff options
| author | Volpeon <git@volpeon.ink> | 2021-05-24 20:39:48 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2021-05-24 20:39:48 +0200 |
| commit | a26deffdc9071a5558996948fcecb71d582870d0 (patch) | |
| tree | 7098b3edab52b0084f16d8a367f90a04fcb70948 /content/9thPK7O3xn/misc/design-test.md | |
| parent | Improved link + accent colors (diff) | |
| download | volpeon.ink-a26deffdc9071a5558996948fcecb71d582870d0.tar.gz volpeon.ink-a26deffdc9071a5558996948fcecb71d582870d0.tar.bz2 volpeon.ink-a26deffdc9071a5558996948fcecb71d582870d0.zip | |
Better file structure, remove categories as special concept
Diffstat (limited to 'content/9thPK7O3xn/misc/design-test.md')
| -rw-r--r-- | content/9thPK7O3xn/misc/design-test.md | 319 |
1 files changed, 319 insertions, 0 deletions
diff --git a/content/9thPK7O3xn/misc/design-test.md b/content/9thPK7O3xn/misc/design-test.md new file mode 100644 index 0000000..edf8ae2 --- /dev/null +++ b/content/9thPK7O3xn/misc/design-test.md | |||
| @@ -0,0 +1,319 @@ | |||
| 1 | --- | ||
| 2 | title: "Design Test: Markdown Syntax" | ||
| 3 | --- | ||
| 4 | |||
| 5 | - [Overview](#overview) | ||
| 6 | - [Philosophy](#philosophy) | ||
| 7 | - [Block Elements](#block-elements) | ||
| 8 | - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks) | ||
| 9 | - [Headers](#headers) | ||
| 10 | - [Blockquotes](#blockquotes) | ||
| 11 | - [Lists](#lists) | ||
| 12 | - [Code Blocks](#code-blocks) | ||
| 13 | - [Span Elements](#span-elements) | ||
| 14 | - [Links](#links) | ||
| 15 | - [Emphasis](#emphasis) | ||
| 16 | - [Code](#code) | ||
| 17 | |||
| 18 | |||
| 19 | **Note:** This document is itself written using Markdown; you | ||
| 20 | can [see the source for it by adding '.text' to the URL](/projects/markdown/syntax.text). | ||
| 21 | |||
| 22 | ---- | ||
| 23 | |||
| 24 | ## Overview | ||
| 25 | |||
| 26 | ### Philosophy | ||
| 27 | |||
| 28 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible. | ||
| 29 | |||
| 30 | Readability, however, is emphasized above all else. A Markdown-formatted | ||
| 31 | document should be publishable as-is, as plain text, without looking | ||
| 32 | like it's been marked up with tags or formatting instructions. While | ||
| 33 | Markdown's syntax has been influenced by several existing text-to-HTML | ||
| 34 | filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html), | ||
| 35 | [Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of | ||
| 36 | inspiration for Markdown's syntax is the format of plain text email. | ||
| 37 | |||
| 38 | ## Block Elements | ||
| 39 | |||
| 40 | ### Paragraphs and Line Breaks | ||
| 41 | |||
| 42 | A paragraph is simply one or more consecutive lines of text, separated | ||
| 43 | by one or more blank lines. (A blank line is any line that looks like a | ||
| 44 | blank line -- a line containing nothing but spaces or tabs is considered | ||
| 45 | blank.) Normal paragraphs should not be indented with spaces or tabs. | ||
| 46 | |||
| 47 | The implication of the "one or more consecutive lines of text" rule is | ||
| 48 | that Markdown supports "hard-wrapped" text paragraphs. This differs | ||
| 49 | significantly from most other text-to-HTML formatters (including Movable | ||
| 50 | Type's "Convert Line Breaks" option) which translate every line break | ||
| 51 | character in a paragraph into a `<br />` tag. | ||
| 52 | |||
| 53 | When you *do* want to insert a `<br />` break tag using Markdown, you | ||
| 54 | end a line with two or more spaces, then type return. | ||
| 55 | |||
| 56 | ### Headers | ||
| 57 | |||
| 58 | Markdown supports two styles of headers, [Setext] [1] and [atx] [2]. | ||
| 59 | |||
| 60 | Optionally, you may "close" atx-style headers. This is purely | ||
| 61 | cosmetic -- you can use this if you think it looks better. The | ||
| 62 | closing hashes don't even need to match the number of hashes | ||
| 63 | used to open the header. (The number of opening hashes | ||
| 64 | determines the header level.) | ||
| 65 | |||
| 66 | |||
| 67 | ### Blockquotes | ||
| 68 | |||
| 69 | Markdown uses email-style `>` characters for blockquoting. If you're | ||
| 70 | familiar with quoting passages of text in an email message, then you | ||
| 71 | know how to create a blockquote in Markdown. It looks best if you hard | ||
| 72 | wrap the text and put a `>` before every line: | ||
| 73 | |||
| 74 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, | ||
| 75 | > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. | ||
| 76 | > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. | ||
| 77 | > | ||
| 78 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse | ||
| 79 | > id sem consectetuer libero luctus adipiscing. | ||
| 80 | |||
| 81 | Markdown allows you to be lazy and only put the `>` before the first | ||
| 82 | line of a hard-wrapped paragraph: | ||
| 83 | |||
| 84 | > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, | ||
| 85 | consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. | ||
| 86 | Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. | ||
| 87 | |||
| 88 | > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse | ||
| 89 | id sem consectetuer libero luctus adipiscing. | ||
| 90 | |||
| 91 | Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by | ||
| 92 | adding additional levels of `>`: | ||
| 93 | |||
| 94 | > This is the first level of quoting. | ||
| 95 | > | ||
| 96 | > > This is nested blockquote. | ||
| 97 | > | ||
| 98 | > Back to the first level. | ||
| 99 | |||
| 100 | Blockquotes can contain other Markdown elements, including headers, lists, | ||
| 101 | and code blocks: | ||
| 102 | |||
| 103 | > ## This is a header. | ||
| 104 | > | ||
| 105 | > 1. This is the first list item. | ||
| 106 | > 2. This is the second list item. | ||
| 107 | > | ||
| 108 | > Here's some example code: | ||
| 109 | > | ||
| 110 | > return shell_exec("echo $input | $markdown_script"); | ||
| 111 | |||
| 112 | Any decent text editor should make email-style quoting easy. For | ||
| 113 | example, with BBEdit, you can make a selection and choose Increase | ||
| 114 | Quote Level from the Text menu. | ||
| 115 | |||
| 116 | |||
| 117 | ### Lists | ||
| 118 | |||
| 119 | Markdown supports ordered (numbered) and unordered (bulleted) lists. | ||
| 120 | |||
| 121 | Unordered lists use asterisks, pluses, and hyphens -- interchangably | ||
| 122 | -- as list markers: | ||
| 123 | |||
| 124 | * Red | ||
| 125 | * Green | ||
| 126 | * Blue | ||
| 127 | |||
| 128 | is equivalent to: | ||
| 129 | |||
| 130 | + Red | ||
| 131 | + Green | ||
| 132 | + Blue | ||
| 133 | |||
| 134 | and: | ||
| 135 | |||
| 136 | - Red | ||
| 137 | - Green | ||
| 138 | - Blue | ||
| 139 | |||
| 140 | Ordered lists use numbers followed by periods: | ||
| 141 | |||
| 142 | 1. Bird | ||
| 143 | 2. McHale | ||
| 144 | 3. Parish | ||
| 145 | |||
| 146 | It's important to note that the actual numbers you use to mark the | ||
| 147 | list have no effect on the HTML output Markdown produces. The HTML | ||
| 148 | Markdown produces from the above list is: | ||
| 149 | |||
| 150 | If you instead wrote the list in Markdown like this: | ||
| 151 | |||
| 152 | 1. Bird | ||
| 153 | 1. McHale | ||
| 154 | 1. Parish | ||
| 155 | |||
| 156 | or even: | ||
| 157 | |||
| 158 | 3. Bird | ||
| 159 | 1. McHale | ||
| 160 | 8. Parish | ||
| 161 | |||
| 162 | you'd get the exact same HTML output. The point is, if you want to, | ||
| 163 | you can use ordinal numbers in your ordered Markdown lists, so that | ||
| 164 | the numbers in your source match the numbers in your published HTML. | ||
| 165 | But if you want to be lazy, you don't have to. | ||
| 166 | |||
| 167 | To make lists look nice, you can wrap items with hanging indents: | ||
| 168 | |||
| 169 | * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | ||
| 170 | Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, | ||
| 171 | viverra nec, fringilla in, laoreet vitae, risus. | ||
| 172 | * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. | ||
| 173 | Suspendisse id sem consectetuer libero luctus adipiscing. | ||
| 174 | |||
| 175 | But if you want to be lazy, you don't have to: | ||
| 176 | |||
| 177 | * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | ||
| 178 | Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, | ||
| 179 | viverra nec, fringilla in, laoreet vitae, risus. | ||
| 180 | * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. | ||
| 181 | Suspendisse id sem consectetuer libero luctus adipiscing. | ||
| 182 | |||
| 183 | List items may consist of multiple paragraphs. Each subsequent | ||
| 184 | paragraph in a list item must be indented by either 4 spaces | ||
| 185 | or one tab: | ||
| 186 | |||
| 187 | 1. This is a list item with two paragraphs. Lorem ipsum dolor | ||
| 188 | sit amet, consectetuer adipiscing elit. Aliquam hendrerit | ||
| 189 | mi posuere lectus. | ||
| 190 | |||
| 191 | Vestibulum enim wisi, viverra nec, fringilla in, laoreet | ||
| 192 | vitae, risus. Donec sit amet nisl. Aliquam semper ipsum | ||
| 193 | sit amet velit. | ||
| 194 | |||
| 195 | 2. Suspendisse id sem consectetuer libero luctus adipiscing. | ||
| 196 | |||
| 197 | It looks nice if you indent every line of the subsequent | ||
| 198 | paragraphs, but here again, Markdown will allow you to be | ||
| 199 | lazy: | ||
| 200 | |||
| 201 | * This is a list item with two paragraphs. | ||
| 202 | |||
| 203 | This is the second paragraph in the list item. You're | ||
| 204 | only required to indent the first line. Lorem ipsum dolor | ||
| 205 | sit amet, consectetuer adipiscing elit. | ||
| 206 | |||
| 207 | * Another item in the same list. | ||
| 208 | |||
| 209 | To put a blockquote within a list item, the blockquote's `>` | ||
| 210 | delimiters need to be indented: | ||
| 211 | |||
| 212 | * A list item with a blockquote: | ||
| 213 | |||
| 214 | > This is a blockquote | ||
| 215 | > inside a list item. | ||
| 216 | |||
| 217 | To put a code block within a list item, the code block needs | ||
| 218 | to be indented *twice* -- 8 spaces or two tabs: | ||
| 219 | |||
| 220 | * A list item with a code block: | ||
| 221 | |||
| 222 | <code goes here> | ||
| 223 | |||
| 224 | ### Code Blocks | ||
| 225 | |||
| 226 | Pre-formatted code blocks are used for writing about programming or | ||
| 227 | markup source code. Rather than forming normal paragraphs, the lines | ||
| 228 | of a code block are interpreted literally. Markdown wraps a code block | ||
| 229 | in both `<pre>` and `<code>` tags. | ||
| 230 | |||
| 231 | To produce a code block in Markdown, simply indent every line of the | ||
| 232 | block by at least 4 spaces or 1 tab. | ||
| 233 | |||
| 234 | This is a normal paragraph: | ||
| 235 | |||
| 236 | This is a code block. | ||
| 237 | |||
| 238 | Here is an example of AppleScript: | ||
| 239 | |||
| 240 | tell application "Foo" | ||
| 241 | beep | ||
| 242 | end tell | ||
| 243 | |||
| 244 | A code block continues until it reaches a line that is not indented | ||
| 245 | (or the end of the article). | ||
| 246 | |||
| 247 | Within a code block, ampersands (`&`) and angle brackets (`<` and `>`) | ||
| 248 | are automatically converted into HTML entities. This makes it very | ||
| 249 | easy to include example HTML source code using Markdown -- just paste | ||
| 250 | it and indent it, and Markdown will handle the hassle of encoding the | ||
| 251 | ampersands and angle brackets. For example, this: | ||
| 252 | |||
| 253 | <div class="footer"> | ||
| 254 | © 2004 Foo Corporation | ||
| 255 | </div> | ||
| 256 | |||
| 257 | Regular Markdown syntax is not processed within code blocks. E.g., | ||
| 258 | asterisks are just literal asterisks within a code block. This means | ||
| 259 | it's also easy to use Markdown to write about Markdown's own syntax. | ||
| 260 | |||
| 261 | ``` | ||
| 262 | tell application "Foo" | ||
| 263 | beep | ||
| 264 | end tell | ||
| 265 | ``` | ||
| 266 | |||
| 267 | ## Span Elements | ||
| 268 | |||
| 269 | ### Links | ||
| 270 | |||
| 271 | Markdown supports two style of links: *inline* and *reference*. | ||
| 272 | |||
| 273 | In both styles, the link text is delimited by [square brackets]. | ||
| 274 | |||
| 275 | To create an inline link, use a set of regular parentheses immediately | ||
| 276 | after the link text's closing square bracket. Inside the parentheses, | ||
| 277 | put the URL where you want the link to point, along with an *optional* | ||
| 278 | title for the link, surrounded in quotes. For example: | ||
| 279 | |||
| 280 | This is [an example](http://example.com/) inline link. | ||
| 281 | |||
| 282 | [This link](http://example.net/) has no title attribute. | ||
| 283 | |||
| 284 | ### Emphasis | ||
| 285 | |||
| 286 | Markdown treats asterisks (`*`) and underscores (`_`) as indicators of | ||
| 287 | emphasis. Text wrapped with one `*` or `_` will be wrapped with an | ||
| 288 | HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML | ||
| 289 | `<strong>` tag. E.g., this input: | ||
| 290 | |||
| 291 | *single asterisks* | ||
| 292 | |||
| 293 | _single underscores_ | ||
| 294 | |||
| 295 | **double asterisks** | ||
| 296 | |||
| 297 | __double underscores__ | ||
| 298 | |||
| 299 | ### Code | ||
| 300 | |||
| 301 | To indicate a span of code, wrap it with backtick quotes (`` ` ``). | ||
| 302 | Unlike a pre-formatted code block, a code span indicates code within a | ||
| 303 | normal paragraph. For example: | ||
| 304 | |||
| 305 | Use the `printf()` function. | ||
| 306 | |||
| 307 | --- | ||
| 308 | |||
| 309 | # Headline 1 | ||
| 310 | |||
| 311 | ## Headline 2 | ||
| 312 | |||
| 313 | ### Headline 3 | ||
| 314 | |||
| 315 | #### Headline 4 | ||
| 316 | |||
| 317 | ##### Headline 5 | ||
| 318 | |||
| 319 | ###### Headline 6 | ||
