[TOC]
H1
H2
H3
H4
H5
H6
Emphasis
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.
Text-level semantics
HTML elements
The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example inside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
Media
Here’s our logo (hover to see the title text):
Absolute path Large:
Relative path Medium:
Reference-style small:
Image & File Download
File download
Image + File download
List Types
Definition List
- Definition List Title
- This is a definition list division.
- Definition
- An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.
Ordered List
- List Item 1
- List Item 2
- Nested list item A
- Nested list item B
- List Item 3
Unordered List
- List Item 1
- List Item 2
- Nested list item A
- Nested list item B
- List Item 3
Tables
Tables aren’t part of the core Markdown spec, but they are part of GFM and Markdown Heresupports them. They are an easy way of adding tables to your email – a task that would otherwise require copy-pasting from another application.
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
Colons can be used to align columns.
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| The outer pipes ( | ) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown. |
| Markdown | Less | Pretty |
|---|---|---|
| Still | renders |
nicely |
| 1 | 2 | 3 |
Code and Syntax Highlighting
Code blocks are part of the Markdown spec, but syntax highlighting isn’t. However, many renderers – like Github’s and Markdown Here – support syntax highlighting. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.
Inline `code` has `back-ticks around` it.
Inline code has back-ticks around it.
Blocks of code are either fenced by lines with three back-ticks `````, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
```
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let's throw in a <b>tag</b>.
Again, to see what languages are available for highlighting, and how to write those language names, see the highlight.js demo page.
Blockquotes
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
Quote break.
This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can putMarkdown into a blockquote.
Inline HTML
You can also use raw HTML in your Markdown, and it’ll mostly work pretty well.
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
-
Definition list
Is something people use sometimes.
-
Markdown in HTML
Does not work very well. Use HTML tags.
Horizontal Rule
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
Three or more…
Hyphens
Asterisks
Underscores
Line Breaks
My basic recommendation for learning how line breaks work is to experiment and discover – hit
Here are some things to try out:
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
Here’s a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also begins a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.
(Technical note: Markdown Here uses GFM line breaks, so there’s no need to use MD’s two-space line breaks.)
Links
There are two ways to create links.
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself
URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).
Some text to show that the reference links can follow later.
Hashs
#heading 1 <a name="fragment"></a> # /Policy/Publishing/Contents-Policy-EN.md#heading-1 # /Policy/Publishing/Contents-Policy-EN.md#fragment
CSS classes
### Rendering sample
* Markdown:
- [Link text](./assets/media/GDC_doc_img.png "btn")
* Github:
- <a href="./assets/media/GDC_doc_img.png" title="btn">Link text</a>
* Documents
- <a href="./assets/media/GDC_doc_img.png" class="btn">Link text</a>
| elements | class | MD sample | rendered sample |
|---|---|---|---|
| a | color | link text | http://materializecss.com/color.html |
| btn | link text | http://materializecss.com/buttons.html | |
| pulse | link text | http://materializecss.com/pulse.html | |
| img | circle |  |
http://materializecss.com/media-css.html |
| responsive-img | |
http://materializecss.com/media-css.html | |
| materialboxed | |
https://materializecss.com/media.html | |
| large | |
||
| medium | |
||
| small | |
||
| i | icon | add 버튼을 눌러 새 문서를 추가한다. | http://materializecss.com/icons.html |
| span | color | 버튼을 눌러 새 문서를 추가한다. | http://materializecss.com/color.html |