Markdown - HackMD

--- tags: 109-1, lecture --- # Markdown Markdown is a lightweight markup language with plain-text-formatting syntax. Reference: https://github.com/emn178/markdown **Note**: Hackmd default to use hard line breaks, for teaching purpose I have set this document to use soft line breaks to meet the CommonMark Spec. See [HackMD Line Break Rendering Rules](https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github#Line-Break-Rendering-Rules) for detail. ## Table Of Contents + [Inline HTML](#inline-html) + [Block Elements](#block-elements) + [Paragraphs](#paragraphs) + [Line Breaks](#line-breaks) + [Headings](#headings) + [Blockquotes](#blockquotes) + [Unordered Lists](#unordered-lists) + [Ordered Lists](#ordered-lists) + [Code Blocks](#code-blocks) + [Horizontal Line](#horizontal-line) + [Table](#table) + [Inline Elements](#inline-elements) + [Links](#links) + [Emphasis](#emphasis) + [Code](#code) + [Images](#images) + [Miscellaneous](#miscellaneous) + [Backslash Escapes](#backslash-escapes) ## Inline HTML In markdown you can use html syntax. Since we will teach you html soon, in this document we will show you both markdown syntax and corresponding html tag in parallel. ## Block Elements A block-level element always starts on a new line and takes up the full width available. ### Paragraphs #### Markdown --- Use one or more blank lines to create paragraph. This is second paragraph. This will be on the same line. --- #### HTML --- Use one or more blank lines to create paragraph. This is second paragraph. This will be on the same line. --- ### Line Breaks #### Markdown --- End a line with two or more spaces to create line break. This will be on the next line. --- #### HTML --- End a line with two or more spaces to create line break. This will be on the next line. --- ### Headings #### Markdown --- # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 --- #### HTML --- <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> --- ### Blockquotes #### Markdown --- > This is a blockquote. > > > This is a nested blockquote. > > This is another blockquote. --- #### HTML ---  <blockquote> This is a blockquote. <blockquote> This is a nested blockquote. </blockquote> This is another blockquote. </blockquote> --- ### Unordered Lists #### Markdown Use **asterisks (*)**, **pluses (+)**, or **hyphens (-)** to create unordered list. --- * item1 * item2 + item1 + item2 - item1 - item1-1 - item2 - item3 --- #### HTML --- <ul> <li>item1</li> <li>item2</li> </ul> <ul> <li>item1</li> <li>item2</li> </ul> <ul> <li>item1</li> <ul> <li>item1-1</li> </ul> <li>item2</li> <li>item3</li> </ul> --- ### Ordered Lists #### Markdown --- 1. item1 2. item2 3. item3 1. You don't need to use number 1, 2, 3, 4... in order 1. it will count it for you. 1. You just need to use number followed by a period 1. nested item 2. haha --- #### HTML --- <ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>You don't need to use number 1, 2, 3, 4... in order</li> <li>it will count it for you.</li> <li>You just need to use number followed by a period</li> <ol> <li>nested item</li> </ol> <li>haha</li> </ol> --- ### Code Blocks #### Markdown --- ``` def hello(): print("This is a code block!") ``` --- #### HTML --- <pre> def hello(): print("This is a code block!") </pre> --- **Note**: Syntax highlighting Add an optional language identifier to use syntax highlighting ([See Supported Languages](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml)). ```python def hello(): print("This is a code block!") ``` --- ### Horizontal Line #### Markdown Use **three or more hyphens (-), asterisks (*), or underscores (_)** on a line by themselves. You may use spaces between the hyphens or asterisks. --- * * * * * _____ --- #### HTML --- <hr /> <hr /> --- ### Table #### Markdown --- | Column 1 | Column 2 | Column 3 | | -------- | -------- | -------- | | Text1 | Text2 | Text3 | | a | b | c | --- #### HTML --- <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Text1</td> <td>Text2</td> <td>Text3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table> --- ## Inline Elements An inline element does not start on a new line and it only takes up as much width as necessary. ### Links #### Markdown --- [Link to google](https://www.google.com/) --- #### HTML --- <a href="https://www.google.com/">Link to google</a> --- **Note**: Automatic links <https://www.google.com/> https://www.google.com/ --- ### Emphasis #### Markdown --- text *text* **text** --- #### HTML --- text text text text text --- ### Code #### Markdown --- Inline code like `printf()` function. --- #### HTML --- Inline code like <code>printf()</code> function. --- ### Images #### Markdown --- ![Google Icon](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRPgm387qKNElKgE_W7rI1oPlLAdvu7WizaIQ&usqp=CAU) --- #### HTML --- <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRPgm387qKNElKgE_W7rI1oPlLAdvu7WizaIQ&usqp=CAU" alt="Google Icon"/> --- ## Miscellaneous ### Backslash Escapes Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax. --- \* **\*** --- Markdown provides backslash escapes for the following characters: ``` \ backslash ` backtick * asterisk _ underscore {} curly braces [] square brackets () parentheses # hash mark + plus sign - minus sign (hyphen) . dot ! exclamation mark ```