Markdown

format nowej generacji

Agenda

• Markdown - co to jest?
• Podstawy Markdowna
• HTML a Markdown
• Dlaczego format czystego testu jest ważny?

Markdown

a plain text formatting syntax

Markdown

• Nagłówki
• Akapity
• Cytaty
• Oznaczanie
• Listy
• Linki
• Obrazki

Nagłówki

HTML

Markdown

<h1>Nagłówek główny<h1>


<h2>Mniejszy sekcji<h2>


<h3>Nagłówek akapitu<h3>

# Nagłówek Główny


## Nagłówek Sekcji


### Nagłówek Akapitu

Nagłówek główny

Mniejszy sekcji

Nagłówek akapitu

HTML

Markdown

<h1>Nagłówek główny<h1>


<h2>Mniejszy sekcji<h2>


<h3>Nagłówek akapitu<h3>

Nagłówek Główny
===============


Nagłówek Sekcji
---------------

Akapity

HTML

Markdown

<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
 Donec at.</p>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Donec at.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at.

Cytaty

HTML

Markdown

<blockquote>
    <p>This is a blockquote.</p>
    <p>This is the second paragraph
       in the blockquote.</p>
    <h2>This is an H2 in a 
        blockquote</h2>
</blockquote>

> This is a blockquote.
> 
> This is the second paragraph
>
> ## This is an H2 in a blockquote

This is a blockquote.

This is the second paragraph in the blockquote.

This is an H2 in a blockquote

Pogrubienia

HTML

Markdown

<p>Some of these words <em>are emphasized</em>.
Some of these words <em>are emphasized also</em>.</p>
<p>Use two asterisks for <strong>strong emphasis</strong>.
Or, if you prefer, <strong>use two underscores instead</strong>.</p>

Some of these words *are emphasized*.
Some of these words _are emphasized also_.

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.

Some of these words are emphasized. Some of these words are emphasized also.

Use two asterisks for strong emphasis. Or, if you prefer, use two underscores instead.

Listy nieuporządkowane

HTML

Markdown

<ul>
    <li>Candy.</li>
    <li>Gum.</li>
    <li>Booze.</li>
</ul>

*   Candy.
*   Gum.
*   Booze.

• Candy.
• Gum.
• Booze.

* A list item.

  With multiple paragraphs.

* Another item in the list.

* A list item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Ut at dui id nisi euismod bibendum. 
Maecenas et est sed tellus semper ornare non quis est.

* Another item in the list.

Listy uporządkowane

HTML

Markdown

<ol>
    <li>Red</li>
    <li>Green</li>
    <li>Yellow</li>
    <li>Blue</li>
</ol>

1.  Red
2.  Green
2.  Yellow
3.  Blue

1. Red
2. Green
3. Yellow
4. Blue

Linki

HTML

Markdown

<p>This is an 
    <a href="http://example.com/">
        example link
    </a>.
</p>

This is an 
[example link](http://example.com/).

This is an example link .

I get 10 times more traffic from [Google][1] than 
from [Yahoo][2] or [MSN][3].

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"

Odowłania

I get 10 times more traffic from Google than from Yahoo or MSN.

I start my morning with a cup of coffee and
[The New York Times][NY Times].

[ny times]: http://www.nytimes.com/

I start my morning with a cup of coffee and The New York Times.

Markdown

<http://example.com/>

Obrazki

HTML

Markdown

<img src="http://placehold.it/350x150" 
     alt="alt text" 
     title="Title" />

![alt text](http://placehold.it/350x150 "Title").

Markdown

![image][fun image]


[fun image]: http://placehold.it/350x150 "Title"

HTML vs Markdown

HTML

+ interpretowany przez przeglądari

+ dojrzały standard

+ duże możliwości stylowania

- nieczytelny przez człowieka

- rozbudowany

Markdown

+ czytelny dla człowieka

+ łatwość pisania

+ intuicyjny

- wymaga dodatkowego programu

Dlaczego format oparty na czystym tekście?

patch

diff