summaryrefslogtreecommitdiffstats
path: root/content/9thPK7O3xn/misc/design-test.md
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-24 20:39:48 +0200
committerVolpeon <git@volpeon.ink>2021-05-24 20:39:48 +0200
commita26deffdc9071a5558996948fcecb71d582870d0 (patch)
tree7098b3edab52b0084f16d8a367f90a04fcb70948 /content/9thPK7O3xn/misc/design-test.md
parentImproved link + accent colors (diff)
downloadvolpeon.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.md319
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---
2title: "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
20can [see the source for it by adding '.text' to the URL](/projects/markdown/syntax.text).
21
22----
23
24## Overview
25
26### Philosophy
27
28Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
29
30Readability, however, is emphasized above all else. A Markdown-formatted
31document should be publishable as-is, as plain text, without looking
32like it's been marked up with tags or formatting instructions. While
33Markdown's syntax has been influenced by several existing text-to-HTML
34filters -- 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
36inspiration for Markdown's syntax is the format of plain text email.
37
38## Block Elements
39
40### Paragraphs and Line Breaks
41
42A paragraph is simply one or more consecutive lines of text, separated
43by one or more blank lines. (A blank line is any line that looks like a
44blank line -- a line containing nothing but spaces or tabs is considered
45blank.) Normal paragraphs should not be indented with spaces or tabs.
46
47The implication of the "one or more consecutive lines of text" rule is
48that Markdown supports "hard-wrapped" text paragraphs. This differs
49significantly from most other text-to-HTML formatters (including Movable
50Type's "Convert Line Breaks" option) which translate every line break
51character in a paragraph into a `<br />` tag.
52
53When you *do* want to insert a `<br />` break tag using Markdown, you
54end a line with two or more spaces, then type return.
55
56### Headers
57
58Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
59
60Optionally, you may "close" atx-style headers. This is purely
61cosmetic -- you can use this if you think it looks better. The
62closing hashes don't even need to match the number of hashes
63used to open the header. (The number of opening hashes
64determines the header level.)
65
66
67### Blockquotes
68
69Markdown uses email-style `>` characters for blockquoting. If you're
70familiar with quoting passages of text in an email message, then you
71know how to create a blockquote in Markdown. It looks best if you hard
72wrap 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
81Markdown allows you to be lazy and only put the `>` before the first
82line of a hard-wrapped paragraph:
83
84> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
85consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
86Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
87
88> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
89id sem consectetuer libero luctus adipiscing.
90
91Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
92adding 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
100Blockquotes can contain other Markdown elements, including headers, lists,
101and 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
112Any decent text editor should make email-style quoting easy. For
113example, with BBEdit, you can make a selection and choose Increase
114Quote Level from the Text menu.
115
116
117### Lists
118
119Markdown supports ordered (numbered) and unordered (bulleted) lists.
120
121Unordered lists use asterisks, pluses, and hyphens -- interchangably
122-- as list markers:
123
124* Red
125* Green
126* Blue
127
128is equivalent to:
129
130+ Red
131+ Green
132+ Blue
133
134and:
135
136- Red
137- Green
138- Blue
139
140Ordered lists use numbers followed by periods:
141
1421. Bird
1432. McHale
1443. Parish
145
146It's important to note that the actual numbers you use to mark the
147list have no effect on the HTML output Markdown produces. The HTML
148Markdown produces from the above list is:
149
150If you instead wrote the list in Markdown like this:
151
1521. Bird
1531. McHale
1541. Parish
155
156or even:
157
1583. Bird
1591. McHale
1608. Parish
161
162you'd get the exact same HTML output. The point is, if you want to,
163you can use ordinal numbers in your ordered Markdown lists, so that
164the numbers in your source match the numbers in your published HTML.
165But if you want to be lazy, you don't have to.
166
167To 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
175But if you want to be lazy, you don't have to:
176
177* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
178Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
179viverra nec, fringilla in, laoreet vitae, risus.
180* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
181Suspendisse id sem consectetuer libero luctus adipiscing.
182
183List items may consist of multiple paragraphs. Each subsequent
184paragraph in a list item must be indented by either 4 spaces
185or one tab:
186
1871. 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
1952. Suspendisse id sem consectetuer libero luctus adipiscing.
196
197It looks nice if you indent every line of the subsequent
198paragraphs, but here again, Markdown will allow you to be
199lazy:
200
201* This is a list item with two paragraphs.
202
203 This is the second paragraph in the list item. You're
204only required to indent the first line. Lorem ipsum dolor
205sit amet, consectetuer adipiscing elit.
206
207* Another item in the same list.
208
209To put a blockquote within a list item, the blockquote's `>`
210delimiters need to be indented:
211
212* A list item with a blockquote:
213
214 > This is a blockquote
215 > inside a list item.
216
217To put a code block within a list item, the code block needs
218to 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
226Pre-formatted code blocks are used for writing about programming or
227markup source code. Rather than forming normal paragraphs, the lines
228of a code block are interpreted literally. Markdown wraps a code block
229in both `<pre>` and `<code>` tags.
230
231To produce a code block in Markdown, simply indent every line of the
232block by at least 4 spaces or 1 tab.
233
234This is a normal paragraph:
235
236 This is a code block.
237
238Here is an example of AppleScript:
239
240 tell application "Foo"
241 beep
242 end tell
243
244A code block continues until it reaches a line that is not indented
245(or the end of the article).
246
247Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
248are automatically converted into HTML entities. This makes it very
249easy to include example HTML source code using Markdown -- just paste
250it and indent it, and Markdown will handle the hassle of encoding the
251ampersands and angle brackets. For example, this:
252
253 <div class="footer">
254 &copy; 2004 Foo Corporation
255 </div>
256
257Regular Markdown syntax is not processed within code blocks. E.g.,
258asterisks are just literal asterisks within a code block. This means
259it's also easy to use Markdown to write about Markdown's own syntax.
260
261```
262tell application "Foo"
263 beep
264end tell
265```
266
267## Span Elements
268
269### Links
270
271Markdown supports two style of links: *inline* and *reference*.
272
273In both styles, the link text is delimited by [square brackets].
274
275To create an inline link, use a set of regular parentheses immediately
276after the link text's closing square bracket. Inside the parentheses,
277put the URL where you want the link to point, along with an *optional*
278title for the link, surrounded in quotes. For example:
279
280This is [an example](http://example.com/) inline link.
281
282[This link](http://example.net/) has no title attribute.
283
284### Emphasis
285
286Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
287emphasis. Text wrapped with one `*` or `_` will be wrapped with an
288HTML `<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
301To indicate a span of code, wrap it with backtick quotes (`` ` ``).
302Unlike a pre-formatted code block, a code span indicates code within a
303normal paragraph. For example:
304
305Use 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