Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(142)

Side by Side Diff: site/dev/tools/markdown.md

Issue 853493004: Add reference material for the sytle of markdown we use. (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « site/dev/tools/image.png ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 Markdown
2 ========
3
4 This site can handle normal MarkDown and many common extensions. To learn
5 how the following is done please see the [source for this page](./docserver.md).
6 Any file you put under `/site/` that has the extension `.md` will be processed
7 as MarkDown. All other files will be served directly. For example, images
8 can be added and they will be served correctly and referenced from within MarkDo wn files.
9
10 Some Example MarkDown
11 ---------------------
12
13 This is a [link](https://www.google.com). You can also create
14 ordered and unordered lists:
15
16 1. First
17 2. Second:
18 * Fee
19 * Fie
20 * Foe
21 * Fum
22 3. Third
23
24 Incorporate images:
25
26 ![image](image.png)
27
28 Or go old school and use [ASCII art](http://asciiflow.com/):
29
30 ~~~~
31
32 +----------------+
33 | Should you |
34 +--+ use ASCII art? +--+
35 | +----------------+ |
36 | |
37 +---v---+ +---v---+
38 | | | |
39 | Yes | | No |
40 | | | |
41 +-------+ +-------+
42
43 ~~~~
44
45 Format code snippets or other preformatted text.
46
47 ~~~~
48 class SK_API SkPaint {
49 public:
50 SkPaint();
51 SkPaint(const SkPaint& paint);
52 ~SkPaint();
53
54 SkPaint& operator=(const SkPaint&);
55 ~~~~
56
57 Tables
58
59 Name | Value | Summary
60 --------|----------|--------
61 A | 27 | yes
62 B | 23 | no
63
64
65 There are also inline styles for *emphasis*, **bold**,
66 ~~strikethrough~~, and `inline code`. Also small fractions,
67 such as 1/2 are rendered nicely.
68
69 > # There are
70 > ## Headers
71 > ### Up To
72 > #### Six
73 > ##### Levels
74 > ###### Deep
75
76 And you can <b>always</b> use HTML, which is useful for features that can't be
77 done in MarkDown, such as iframes, but try to avoid using HTML outside of
78 sitations like that.
79 <svg viewBox="0 0 24 24" height="24px" width="24px" style="display: inline;">
80 <g>
81 <path d="M1
82 21h4v-12h-4v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44 -1.06l-1.06-1.05-6.58
83 6.59c-.37.36-.59.86-.59 1.41v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5
84 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01.01-.08z"> </path>
85 </g>
86 </svg>
87
88 Reference
89 =========
90
91 Below is a longer reference on the MarkDown that docserver accepts.
92
93 Paragraphs
94 ----------
95
96 A paragraph is simply one or more consecutive lines of text, separated
97 by one or more blank lines. (A blank line is any line that looks like a
98 blank line -- a line containing nothing spaces or tabs is considered
99 blank.) Normal paragraphs should not be intended with spaces or tabs.
100
101 Headers and Blockquotes
102 -----------------------
103
104 You can create headers by either "underlining" with equal signs (`=`) and hyphen s (`-`),
105 or,you can put 1-6 hash marks (`#`) at the
106 beginning of the line -- the number of hashes equals the resulting
107 HTML header level.
108
109 Blockquotes are indicated using email-style '`>`' angle brackets.
110
111 Markdown:
112
113 A First Level Header
114 ====================
115
116 A Second Level Header
117 ---------------------
118
119 Now is the time for all good men to come to
120 the aid of their country. This is just a
121 regular paragraph.
122
123 The quick brown fox jumped over the lazy
124 dog's back.
125
126 ### Header 3
127
128 > This is a blockquote.
129 >
130 > This is the second paragraph in the blockquote.
131 >
132 > ## This is an H2 in a blockquote
133
134
135 Output:
136
137 <h1>A First Level Header</h1>
138
139 <h2>A Second Level Header</h2>
140
141 <p>Now is the time for all good men to come to
142 the aid of their country. This is just a
143 regular paragraph.</p>
144
145 <p>The quick brown fox jumped over the lazy
146 dog's back.</p>
147
148 <h3>Header 3</h3>
149
150 <blockquote>
151 <p>This is a blockquote.</p>
152
153 <p>This is the second paragraph in the blockquote.</p>
154
155 <h2>This is an H2 in a blockquote</h2>
156 </blockquote>
157
158
159
160 ### Phrase Emphasis ###
161
162 Markdown uses asterisks and underscores to indicate spans of emphasis.
163
164 Markdown:
165
166 Some of these words *are emphasized*.
167 Some of these words _are emphasized also_.
168
169 Use two asterisks for **strong emphasis**.
170 Or, if you prefer, __use two underscores instead__.
171
172 Output:
173
174 <p>Some of these words <em>are emphasized</em>.
175 Some of these words <em>are emphasized also</em>.</p>
176
177 <p>Use two asterisks for <strong>strong emphasis</strong>.
178 Or, if you prefer, <strong>use two underscores instead</strong>.</p>
179
180
181
182 ## Lists ##
183
184 Unordered (bulleted) lists use asterisks, pluses, and hyphens (`*`,
185 `+`, and `-`) as list markers. These three markers are
186 interchangable; this:
187
188 * Candy.
189 * Gum.
190 * Booze.
191
192 this:
193
194 + Candy.
195 + Gum.
196 + Booze.
197
198 and this:
199
200 - Candy.
201 - Gum.
202 - Booze.
203
204 all produce the same output:
205
206 <ul>
207 <li>Candy.</li>
208 <li>Gum.</li>
209 <li>Booze.</li>
210 </ul>
211
212 Ordered (numbered) lists use regular numbers, followed by periods, as
213 list markers:
214
215 1. Red
216 2. Green
217 3. Blue
218
219 Output:
220
221 <ol>
222 <li>Red</li>
223 <li>Green</li>
224 <li>Blue</li>
225 </ol>
226
227 If you put blank lines between items, you'll get `<p>` tags for the
228 list item text. You can create multi-paragraph list items by indenting
229 the paragraphs by 4 spaces or 1 tab:
230
231 * A list item.
232
233 With multiple paragraphs.
234
235 * Another item in the list.
236
237 Output:
238
239 <ul>
240 <li><p>A list item.</p>
241 <p>With multiple paragraphs.</p></li>
242 <li><p>Another item in the list.</p></li>
243 </ul>
244
245
246
247 ### Links ###
248
249 Markdown supports two styles for creating links: *inline* and
250 *reference*. With both styles, you use square brackets to delimit the
251 text you want to turn into a link.
252
253 Inline-style links use parentheses immediately after the link text.
254 For example:
255
256 This is an [example link](http://example.com/).
257
258 Output:
259
260 <p>This is an <a href="http://example.com/">
261 example link</a>.</p>
262
263 Optionally, you may include a title attribute in the parentheses:
264
265 This is an [example link](http://example.com/ "With a Title").
266
267 Output:
268
269 <p>This is an <a href="http://example.com/" title="With a Title">
270 example link</a>.</p>
271
272 Reference-style links allow you to refer to your links by names, which
273 you define elsewhere in your document:
274
275 I get 10 times more traffic from [Google][1] than from
276 [Yahoo][2] or [MSN][3].
277
278 [1]: http://google.com/ "Google"
279 [2]: http://search.yahoo.com/ "Yahoo Search"
280 [3]: http://search.msn.com/ "MSN Search"
281
282 Output:
283
284 <p>I get 10 times more traffic from <a href="http://google.com/"
285 title="Google">Google</a> than from <a href="http://search.yahoo.com/"
286 title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
287 title="MSN Search">MSN</a>.</p>
288
289 The title attribute is optional. Link names may contain letters,
290 numbers and spaces, but are *not* case sensitive:
291
292 I start my morning with a cup of coffee and
293 [The New York Times][NY Times].
294
295 [ny times]: http://www.nytimes.com/
296
297 Output:
298
299 <p>I start my morning with a cup of coffee and
300 <a href="http://www.nytimes.com/">The New York Times</a>.</p>
301
302
303 ### Images ###
304
305 Image syntax is very much like link syntax.
306
307 Inline (titles are optional):
308
309 ![alt text](/path/to/img.jpg "Title")
310
311 Reference-style:
312
313 ![alt text][id]
314
315 [id]: /path/to/img.jpg "Title"
316
317 Both of the above examples produce the same output:
318
319 <img src="/path/to/img.jpg" alt="alt text" title="Title" />
320
321
322
323 ### Code ###
324
325 In a regular paragraph, you can create code span by wrapping text in
326 backtick quotes. Any ampersands (`&`) and angle brackets (`<` or
327 `>`) will automatically be translated into HTML entities. This makes
328 it easy to use Markdown to write about HTML example code:
329
330 I strongly recommend against using any `<blink>` tags.
331
332 I wish SmartyPants used named entities like `&mdash;`
333 instead of decimal-encoded entites like `&#8212;`.
334
335 Output:
336
337 <p>I strongly recommend against using any
338 <code>&lt;blink&gt;</code> tags.</p>
339
340 <p>I wish SmartyPants used named entities like
341 <code>&amp;mdash;</code> instead of decimal-encoded
342 entites like <code>&amp;#8212;</code>.</p>
343
344
345 To specify an entire block of pre-formatted code, indent every line of
346 the block by 4 spaces or 1 tab. Just like with code spans, `&`, `<`,
347 and `>` characters will be escaped automatically.
348
349 Markdown:
350
351 If you want your page to validate under XHTML 1.0 Strict,
352 you've got to put paragraph tags in your blockquotes:
353
354 <blockquote>
355 <p>For example.</p>
356 </blockquote>
357
358 Output:
359
360 <p>If you want your page to validate under XHTML 1.0 Strict,
361 you've got to put paragraph tags in your blockquotes:</p>
362
363 <pre><code>&lt;blockquote&gt;
364 &lt;p&gt;For example.&lt;/p&gt;
365 &lt;/blockquote&gt;
366 </code></pre>
OLDNEW
« no previous file with comments | « site/dev/tools/image.png ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698