The web design and pages for my personal website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

699 lines
16 KiB

  1. {{ define "title" }}Markdown Cheatsheet{{ end }}
  2. {{ define "content" }}
  3. <h1>Markdown Cheatsheet</h1>
  4. This is a simple reference sheet for Markdown syntax. The de facto place to find Markdown syntax is at
  5. <a href="https://daringfireball.net/projects/markdown/syntax">https://daringfireball.net/projects/markdown/syntax</a>
  6. but I find his web design ugly and hard to follow. ;)<p>
  7. This page just serves as a cheat sheet for Markdown syntax and their results. For descriptive paragraphs
  8. explaining the syntax, see the page linked above.<p>
  9. The Rophako CMS supports a few extensions to Markdown such as GitHub-style code blocks.<p>
  10. <ul>
  11. <li>
  12. <a href="#block">Block Elements</a>
  13. <ul>
  14. <li><a href="#pbr">Paragraphs and Line Breaks</a></li>
  15. <li><a href="#h1">Headers</a></li>
  16. <li><a href="#bq">Blockquotes</a></li>
  17. <li><a href="#ul">Lists</a></li>
  18. <li><a href="#pre">Code Blocks</a></li>
  19. <li><a href="#hr">Horizontal Rules</a></li>
  20. </ul>
  21. </li>
  22. <li>
  23. <a href="#span">Span Elements</a>
  24. <ul>
  25. <li><a href="#a">Links</a></li>
  26. <li><a href="#em">Emphasis</a></li>
  27. <li><a href="#code">Code</a></li>
  28. <li><a href="#img">Images</a></li>
  29. </ul>
  30. </li>
  31. <li>
  32. <a href="#misc">Miscellaneous</a>
  33. <ul>
  34. <li><a href="#autolink">Automatic Links</a></li>
  35. <li><a href="#escape">Backslash Escapes</a></li>
  36. </ul>
  37. </li>
  38. </ul>
  39. <a name="block"></a>
  40. <h1>Block Elements</h1>
  41. <a name="pbr"></a>
  42. <h2>Paragraphs and Line Breaks</h2>
  43. In normal Markdown, a paragraph is defined as a group of lines of text separated from other groups
  44. by at least one blank line. A hard return inside a paragraph doesn't get rendered in the output.<p>
  45. However, the Rophako CMS uses GitHub style markdown, so a hard return inside a paragraph <em>does</em>
  46. get translated into a line break (<code>&lt;br&gt;</code>) in the output.
  47. <a name="h1"></a>
  48. <h2>Headers</h2>
  49. <table width="100%" class="table">
  50. <thead>
  51. <tr>
  52. <th width="50%">Markdown Syntax</th>
  53. <th width="50%">Output</th>
  54. </tr>
  55. </thead>
  56. <tbody>
  57. <tr>
  58. <td>
  59. <code>
  60. This is an H1<br>
  61. =============<p>
  62. This is an H2<br>
  63. -------------
  64. </code>
  65. </td>
  66. <td>
  67. <h1>This is an H1</h1>
  68. <h2>This is an H2</h2>
  69. </td>
  70. </tr>
  71. <tr>
  72. <td>
  73. <code>
  74. # This is an H1<p>
  75. ## This is an H2<p>
  76. #### This is an H4
  77. </code>
  78. </td>
  79. <td>
  80. <h1>This is an H1</h1>
  81. <h2>This is an H2</h2>
  82. <h4>This is an H4</h4>
  83. </td>
  84. </tr>
  85. </tbody>
  86. </table>
  87. <a name="bq"></a>
  88. <h3>Blockquotes</h3>
  89. <table width="100%" class="table">
  90. <thead>
  91. <tr>
  92. <th width="50%">Markdown Syntax</th>
  93. <th width="50%">Output</th>
  94. </tr>
  95. </thead>
  96. <tbody>
  97. <tr>
  98. <td>
  99. <code>
  100. &gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>
  101. &gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>
  102. &gt; Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<br>
  103. &gt;<br>
  104. &gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>
  105. &gt; id sem consectetuer libero luctus adipiscing.
  106. </code>
  107. </td>
  108. <td>
  109. <blockquote>
  110. This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
  111. consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
  112. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<p>
  113. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
  114. id sem consectetuer libero luctus adipiscing.
  115. </blockquote>
  116. </td>
  117. </tr>
  118. <tr>
  119. <td>
  120. <code>
  121. &gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>
  122. consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>
  123. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<br><br>
  124. &gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>
  125. id sem consectetuer libero luctus adipiscing.
  126. </code>
  127. </td>
  128. <td>
  129. <blockquote>
  130. This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
  131. consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
  132. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<p>
  133. Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
  134. id sem consectetuer libero luctus adipiscing.
  135. </blockquote>
  136. </td>
  137. </tr>
  138. <tr>
  139. <td>
  140. <code>
  141. &gt; This is the first level of quoting.<br>
  142. &gt;<br>
  143. &gt; &gt; This is nested blockquote.<br>
  144. &gt;<br>
  145. &gt; Back to the first level.
  146. </code>
  147. </td>
  148. <td>
  149. <blockquote>
  150. This is the first level of quoting.
  151. <blockquote>This is nested blockquote.</blockquote>
  152. Back to the first level.
  153. </blockquote>
  154. </td>
  155. </tr>
  156. <tr>
  157. <td>
  158. <code>
  159. &gt; ## This is a header.<br>
  160. &gt;<br>
  161. &gt; 1. This is the first list item.<br>
  162. &gt; 2. This is the second list item.<br>
  163. &gt;<br>
  164. &gt;Here's some example code:<br>
  165. &gt;<br>
  166. &gt;&nbsp;&nbsp;&nbsp;&nbsp;return shell_exec("echo $input | $markdown_script");
  167. </code>
  168. </td>
  169. <td>
  170. <blockquote>
  171. <h2>This is a header.</h2>
  172. <ol>
  173. <li>This is the first list item.</li>
  174. <li>This is the second list item.</li>
  175. </ol>
  176. Here's some example code:
  177. <pre>return shell_exec("echo $input | $markdown_script");</pre>
  178. </blockquote>
  179. </td>
  180. </tr>
  181. </tbody>
  182. </table>
  183. <a name="ul"></a>
  184. <h2>Lists</h2>
  185. <table width="100%" class="table">
  186. <thead>
  187. <tr>
  188. <th width="50%">Markdown Syntax</th>
  189. <th width="50%">Output</th>
  190. </tr>
  191. </thead>
  192. <tbody>
  193. <tr>
  194. <td>
  195. <code>
  196. * Red<br>
  197. * Green<br>
  198. * Blue
  199. </code>
  200. </td>
  201. <td>
  202. <ul>
  203. <li>Red</li>
  204. <li>Green</li>
  205. <li>Blue</li>
  206. </ul>
  207. </td>
  208. </tr>
  209. <tr>
  210. <td>
  211. <code>
  212. + Red<br>
  213. + Green<br>
  214. + Blue
  215. </code>
  216. </td>
  217. <td>
  218. <ul>
  219. <li>Red</li>
  220. <li>Green</li>
  221. <li>Blue</li>
  222. </ul>
  223. </td>
  224. </tr>
  225. <tr>
  226. <td>
  227. <code>
  228. - Red<br>
  229. - Green<br>
  230. - Blue
  231. </code>
  232. </td>
  233. <td>
  234. <ul>
  235. <li>Red</li>
  236. <li>Green</li>
  237. <li>Blue</li>
  238. </ul>
  239. </td>
  240. </tr>
  241. <tr>
  242. <td>
  243. <code>
  244. 1. Bird<br>
  245. 2. McHale<br>
  246. 3. Parish
  247. </code>
  248. </td>
  249. <td>
  250. <ol>
  251. <li>Bird</li>
  252. <li>McHale</li>
  253. <li>Parish</li>
  254. </ol>
  255. </td>
  256. </tr>
  257. <tr>
  258. <td>
  259. <code>
  260. 1.&nbsp;&nbsp;This is a list item with two paragraphs. Lorem ipsum dolor<br>
  261. &nbsp;&nbsp;&nbsp;&nbsp;sit amet, consectetuer adipiscing elit. Aliquam hendrerit<br>
  262. &nbsp;&nbsp;&nbsp;&nbsp;mi posuere lectus.<p>
  263. &nbsp;&nbsp;&nbsp;&nbsp;Vestibulum enim wisi, viverra nec, fringilla in, laoreet<br>
  264. &nbsp;&nbsp;&nbsp;&nbsp;vitae, risus. Donec sit amet nisl. Aliquam semper ipsum<br>
  265. &nbsp;&nbsp;&nbsp;&nbsp;sit amet velit.<p>
  266. 2.&nbsp;&nbsp;Suspendisse id sem consectetuer libero luctus adipiscing.
  267. </code>
  268. </td>
  269. <td>
  270. <ol>
  271. <li>This is a list item with two paragraphs. Lorem ipsum dolor
  272. sit amet, consectetuer adipiscing elit. Aliquam hendrerit
  273. mi posuere lectus.<p>
  274. Vestibulum enim wisi, viverra nec, fringilla in, laoreet
  275. vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
  276. sit amet velit.</li>
  277. <li>Suspendisse id sem consectetuer libero luctus adipiscing.</li>
  278. </ol>
  279. </td>
  280. </tr>
  281. </tbody>
  282. </table>
  283. <a name="pre"></a>
  284. <h2>Code Blocks</h2>
  285. The typical Markdown way to write a code block is to indent each line of a paragraph with at
  286. least 4 spaces or 1 tab character. The Rophako CMS also uses GitHub-style code blocks, where
  287. you can use three backticks before and after the code block and then you don't need to indent
  288. each line of the code (makes copying/pasting easier!)<p>
  289. Like GitHub-flavored Markdown, with a fenced code block you can also specify a programming
  290. language to get syntax highlighting for the code.<p>
  291. <table width="100%" class="table">
  292. <thead>
  293. <tr>
  294. <th width="50%">Markdown Syntax</th>
  295. <th width="50%">Output</th>
  296. </tr>
  297. </thead>
  298. <tbody>
  299. <tr>
  300. <td>
  301. <code>
  302. This is a normal paragraph.<p>
  303. &nbsp;&nbsp;&nbsp;&nbsp;This is a code block.
  304. </code>
  305. </td>
  306. <td>
  307. This is a normal paragraph.<p>
  308. <pre>This is a code block</pre>
  309. </td>
  310. </tr>
  311. <tr>
  312. <td>
  313. <code>
  314. This is a normal paragraph.<p>
  315. ```<br>
  316. This is a GitHub style "fenced code block".<br>
  317. ```
  318. </code>
  319. </td>
  320. <td>
  321. This is a normal paragraph.<p>
  322. <pre>This is a GitHub style "fenced code block".</pre>
  323. </td>
  324. </tr>
  325. <tr>
  326. <td>
  327. <code>
  328. ```javascript<br>
  329. document.writeln("Hello world.");<br>
  330. ```
  331. </code>
  332. </td>
  333. <td>
  334. <div class="codehilite"><pre><span class="nb">document</span><span class="p">.</span><span class="nx">writeln</span><span class="p">(</span><span class="s2">&quot;Hello world.&quot;</span><span class="p">);</span></pre></div>
  335. </td>
  336. </tr>
  337. </tbody>
  338. </table>
  339. <a name="hr"></a>
  340. <h2>Horizontal Rules</h2>
  341. <table width="100%" class="table">
  342. <thead>
  343. <tr>
  344. <th width="50%">Markdown Syntax</th>
  345. <th width="50%">Output</th>
  346. </tr>
  347. </thead>
  348. <tbody>
  349. <tr>
  350. <td>
  351. <code>
  352. * * *<p>
  353. ***<p>
  354. *****<p>
  355. - - -<p>
  356. ---------------------------
  357. </code>
  358. </td>
  359. <td>
  360. <hr><p>
  361. <hr><p>
  362. <hr><p>
  363. <hr><p>
  364. <hr>
  365. </td>
  366. </tr>
  367. </tbody>
  368. </table>
  369. <a name="span"></a>
  370. <h1>Span Elements</h1>
  371. <a name="a"></a>
  372. <h2>Links</h2>
  373. <table width="100%" class="table">
  374. <thead>
  375. <tr>
  376. <th width="50%">Markdown Syntax</th>
  377. <th width="50%">Output</th>
  378. </tr>
  379. </thead>
  380. <tbody>
  381. <tr>
  382. <td>
  383. <code>
  384. This is [an example](http://example.com/ "Title") inline link.<p>
  385. [This link](http://example.net/) has no title attribute.
  386. </code>
  387. </td>
  388. <td>
  389. This is <a href="http://example.com/" title="Title">an example</a> inline link.<p>
  390. <a href="http://example.net/">This link</a> has no title attribute.
  391. </td>
  392. </tr>
  393. <tr>
  394. <td>
  395. <code>
  396. See my [About](/about) page for details.
  397. </code>
  398. </td>
  399. <td>
  400. See my <a href="/about">About</a> page for details.
  401. </td>
  402. </tr>
  403. <tr>
  404. <td>
  405. <code>
  406. This is [an example][id] reference-style link.<p>
  407. [id]: http://example.com/ "Optional Title Here"
  408. </code>
  409. </td>
  410. <td>
  411. This is <a href="http://example.com/" title="Optional Title Here">an example</a> reference-style link.
  412. </td>
  413. </tr>
  414. <tr>
  415. <td>
  416. <code>
  417. This is an example of an implicit reference-style link: search [Google][] for more.<p>
  418. [Google]: http://google.com/
  419. </code>
  420. </td>
  421. <td>
  422. This is an example of an implicit reference-style link: search <a href="http://google.com/">Google</a> for more.
  423. </td>
  424. </tr>
  425. <tr>
  426. <td>
  427. <code>
  428. I get 10 times more traffic from [Google] [1] than from<br>
  429. [Yahoo] [2] or [Bing] [3].<p>
  430. [1]: http://google.com/ "Google"<br>
  431. [2]: http://search.yahoo.com/ "Yahoo Search"<br>
  432. [3]: http://bing.com/ "Bing"
  433. </code>
  434. </td>
  435. <td>
  436. I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from
  437. <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or
  438. <a href="http://bing.com/" title="Bing">Bing</a>.
  439. </td>
  440. </tr>
  441. </tbody>
  442. </table>
  443. <a name="em"></a>
  444. <h2>Emphasis</h2>
  445. <table width="100%" class="table">
  446. <thead>
  447. <tr>
  448. <th width="50%">Markdown Syntax</th>
  449. <th width="50%">Output</th>
  450. </tr>
  451. </thead>
  452. <tbody>
  453. <tr>
  454. <td>
  455. <code>
  456. *single asterisks*<p>
  457. _single underscores_<p>
  458. **double asterisks**<p>
  459. __double underscores__
  460. </code>
  461. </td>
  462. <td>
  463. <em>single asterisks</em><p>
  464. <em>single underscores</em><p>
  465. <strong>double asterisks</strong><p>
  466. <strong>double underscores</strong>
  467. </td>
  468. </tr>
  469. <tr>
  470. <td>
  471. <code>
  472. un*frigging*believable
  473. </code>
  474. </td>
  475. <td>
  476. un<em>frigging</em>believable
  477. </td>
  478. </tr>
  479. <tr>
  480. <td>
  481. <code>
  482. \*this text is surrounded by literal asterisks\*
  483. </code>
  484. </td>
  485. <td>
  486. *this text is surrounded by literal asterisks*
  487. </td>
  488. </tr>
  489. </tbody>
  490. </table>
  491. <a name="code"></a>
  492. <h2>Code</h2>
  493. <table width="100%" class="table">
  494. <thead>
  495. <tr>
  496. <th width="50%">Markdown Syntax</th>
  497. <th width="50%">Output</th>
  498. </tr>
  499. </thead>
  500. <tbody>
  501. <tr>
  502. <td>
  503. <code>
  504. Use the `printf()` function.
  505. </code>
  506. </td>
  507. <td>
  508. Use the <code>printf()</code> function.
  509. </td>
  510. </tr>
  511. <tr>
  512. <td>
  513. <code>
  514. ``There is a literal backtick (`) here.``
  515. </code>
  516. </td>
  517. <td>
  518. <code>There is a literal backtick (`) here.</code>
  519. </td>
  520. </tr>
  521. <tr>
  522. <td>
  523. <code>
  524. A single backtick in a code span: `` ` ``<p>
  525. A backtick-delimited string in a code span: `` `foo` ``
  526. </code>
  527. </td>
  528. <td>
  529. A single backtick in a code span: <code>`</code><p>
  530. A backtick-delimited string in a code span: <code>`foo`</code>
  531. </td>
  532. </tr>
  533. <tr>
  534. <td>
  535. <code>Please don't use any `&lt;blink&gt;` tags.</code>
  536. </td>
  537. <td>
  538. Please don't use any <code>&lt;blink&gt;</code> tags.
  539. </td>
  540. </tr>
  541. <tr>
  542. <td>
  543. <code>`&amp;#8212;` is the decimal-encoded equivalent of `&amp;mdash;`.</code>
  544. </td>
  545. <td>
  546. <code>&amp;#8212;</code> is the decimal-encoded equivalent of
  547. <code>&amp;mdash;</code>.
  548. </td>
  549. </tr>
  550. </tbody>
  551. </table>
  552. <a name="img"></a>
  553. <h2>Images</h2>
  554. <table width="100%" class="table">
  555. <thead>
  556. <tr>
  557. <th width="50%">Markdown Syntax</th>
  558. <th width="50%">Output</th>
  559. </tr>
  560. </thead>
  561. <tbody>
  562. <tr>
  563. <td>
  564. <code>![Alt text](/static/avatars/default.png)</code>
  565. </td>
  566. <td>
  567. <img src="/static/avatars/default.png" alt="Alt text">
  568. </td>
  569. </tr>
  570. <tr>
  571. <td>
  572. <code>![Alt text](/static/avatars/default.png "Optional title")</code>
  573. </td>
  574. <td>
  575. <img src="/static/avatars/default.png" alt="Alt text" title="Optional title">
  576. </td>
  577. </tr>
  578. <tr>
  579. <td>
  580. <code>
  581. ![Alt text][id]<p>
  582. [id]: /static/avatars/default.png "Optional title attribute"
  583. </code>
  584. </td>
  585. <td>
  586. <img src="/static/avatars/default.png" alt="Alt text" title="Optional title attribute">
  587. </td>
  588. </tr>
  589. </tbody>
  590. </table>
  591. <a name="misc"></a>
  592. <h1>Miscellaneous</h1>
  593. <a name="autolink"></a>
  594. <h2>Automatic Links</h2>
  595. E-mail links get automatically converted into a random mess of HTML attributes to
  596. attempt to thwart e-mail harvesting spam bots.<p>
  597. <table width="100%" class="table">
  598. <thead>
  599. <tr>
  600. <th width="50%">Markdown Syntax</th>
  601. <th width="50%">Output</th>
  602. </tr>
  603. </thead>
  604. <tbody>
  605. <tr>
  606. <td>
  607. <code>&lt;http://example.com/&gt;</code>
  608. </td>
  609. <td>
  610. <a href="http://example.com/">http://example.com/</a>
  611. </td>
  612. </tr>
  613. <tr>
  614. <td>
  615. <code>&lt;address@example.com&gt;</code>
  616. </td>
  617. <td>
  618. <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">&#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;</a><p>
  619. (Source: <code>&lt;a href="&amp;#109;&amp;#97;&amp;#105;&amp;#108;&amp;#116;&amp;#111;&amp;#58; &amp;#97;&amp;#100;&amp;#100;&amp;#114;&amp;#101;&amp;#115;&amp;#115;&amp;#64; &amp;#101;&amp;#120;&amp;#97;&amp;#109;&amp;#112;&amp;#108; &amp;#101;&amp;#46;&amp;#99;&amp;#111;&amp;#109;"&gt;&amp;#97; &amp;#100;&amp;#100;&amp;#114;&amp;#101;&amp;#115;&amp;#115; &amp;#64;&amp;#101;&amp;#120;&amp;#97;&amp;#109;&amp;#112; &amp;#108;&amp;#101;&amp;#46;&amp;#99;&amp;#111; &amp;#109;&lt;/a&gt;</code>)
  620. </td>
  621. </tr>
  622. </tbody>
  623. </table>
  624. <a name="escape"></a>
  625. <h2>Backslash Escapes</h2>
  626. Use backslash characters to escape any other special characters in the Markdown syntax. For example,
  627. <code>\*</code> to insert a literal asterisk so that it doesn't get mistaken for e.g. emphasized text,
  628. a list item, etc.<p>
  629. Markdown provides backslash escapes for the following characters:<p>
  630. <pre>\ backslash
  631. ` backtick
  632. * asterisk
  633. _ underscore
  634. {} curly braces
  635. [] square brackets
  636. () parenthesis
  637. # hash mark
  638. + plus sign
  639. - minus sign (hyphen)
  640. . dot
  641. ! exclamation mark</pre>
  642. {{ end }}