Övrigt

Introduktion till att skriva Markdown

 

Introduktion

Jag börjar med att lite snabbt och enkelt beskriva vad Markdown är för er som inte känner till det. Det skapades av John Gruber som driver bloggen Daring Fireball och är ett markup-språk för text där tanken bakom är att det ska vara lätt att läsa och lätt att skriva. Textdokumentet kan sedan konverteras till html.

Till skillnad från html-kod så är ett textdokument skrivet i Markup mycket mera lättläst så det ska kunna läsas utan att först ha konverterats till html och sedan visas i en webbläsare. Eftersom Markdown liksom html är rena txt-filer så kan det skrivas i vilken texteditor som helst så du stänger inte in dig i någon ordbehandlares egna format och är därmed famtidssäker. Exempelvis så kan du arbeta med ditt dokument på Mac, iPhone och iPad i vilken texteditor som är din favorit på respektive plattform.

Appar

På Mac använder jag Byword. På iPad kan jag rekommendera Writing Kit eller Elements 2 som finns till både iPad och iPhone. Det finns dock många texteditorer som stödjer Markdown så du kan få en förhandsvisning på hur ditt dokument ser ut formaterat och som kan exportera html-koden åt dig. Använder du en texteditor som inte har dessa funktioner så kan du använda ditt av sidan Dingus i din webbläsare för att se formatering och konvertera Markup till html.

Syntax

Som sagt så använder Markdown en enklare formatering än html. Man ska inte riktigt jämföra html med Markdown rakt av då Markdown endast är för textformatering. Se nedan jämförelser mellan hur html och markdown formateras.

Rubriker

Istället för att som med html skriva <h1>Rubrik</h1>med start- och slut-tag så sätter man # framför. Ett # representerar h1, två ## representerar h2 o.s.v. Just h1 och h2 kan ersättar med en alternativ syntax. Se nedan.

# Rubrik 1
## Rubrik 2
### Rubrik 3

Rubrik 1
=========

Rubrik 2
---------

Rubrik 1

Rubrik 2

Rubrik 3

Rubrik 1

Rubrik 2

Kursivt och fet

Här används * framför och efter ordet som ska bli kursivt eller i fet stil.

Mening med *kursivt* ord. Ord med **fet** stil.

Mening med kursivt ord. Ord med fet stil.

Citera

Här efterliknar Markdown det sätt som man citerar text i ett email. Genom att sätta ett > framför textblocket som kommer det bli indraget. Man kan antingen sätta ett > framför varje rad eller vid början av textblocket.

>Lorem ipsum dolor sit amet,
>Citerad textrad 1
>Citerad textrad 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Citerad textrad 1
Citerad textrad 2

Radbryt

Om man hårt vill sätta in ett radbryt i en text så gör man det genom att gära två mellanslag efter sista ordet i föregående rad.

Kod

Vill man lägga till kod i en mening så skriver man ` framför och efter koden. Är det flera rader kod så gör man ett indrag genom att ha minst fyra mellanslag innan raden börjar.

Html-koden för kursiv stil är `<em></em>`.  

    <em>Detta är kurisv html</em>

Html-koden för kursiv stil är <em></em>.

<em>Detta är kursiv html</em>

Listor

Att skapa listor i html är ganska omständing. Med Markdown så skriver man helt enkelt en stjärna “*” framför varje listrad. Vill man ha ett indrag så lägger man till fyra blanksteg innan.

* Onumrerad lista
* Rad nummer 2
    * Indragen listrad
* Rad nummer 3
  • Onumrerad lista
  • Rad nummer 2
    • Indragen listrad
  • Rad nummer 3
1. Numrerad lista
2. Rad nummer 2
3. Rad nummer 3
  1. Numrerad lista
  2. Rad nummer 2
  3. Rad nummer 3

Länkar

Länkar skrivs med följande syntax. [text som ska länkas](länk) vilket resulterar i att texten ändå är lättläst. Man kan även skriva genom att använda länkreferenser så man stör ännu mindre i löptexten. [text som ska länkas][länkreferens].

På Mac använder jag [Byword](http://bywordapp.com/) 
som jag kommer använda som exempel i denna artikel.

På Mac använder jag Byword som jag kommer använda som exempel i denna artikel.

På Mac använder jag [Byword][bywordapp] som jag kommer 
använda som exempel i denna artikel.

[bywordapp]: http://bywordapp.com/

På Mac använder jag Byword som jag kommer använda som exempel i denna artikel.

Horisontellt streck

Horisontellt streck, eller horisontal rules som det heter på engelska kan skapas på flera sätt. Använd tre eller fler *, -eller ´_´. Ta det som känns bäst för dig.

* * *
***
- - -
_ _ _
--------

Bilder

Du kan även länka till bilder i Markdown även om det inte blir speiellt visuellt och du manuellt får leta upp adressen till bilden.

![alt text](/path/img.jpg)

eller

![alt text][id]

[id]: /url/to/img.jpg

Sammanfattning

Se detta som en enkel introduktion till hur du skriver Markdown och inte någon komplett referens på något sätt. Är du intresserad att läsa mer om Markdown så finns den kompletta referensen här. Dessutom finns utökningar till Markdown. Exempel på detta är Multimarkdown och Markdown Extra men det är inte alls säkert att appar som stödjer Markdown även stödjer detta utökningar.

Fördelarna med Markdown som jag ser det är:

  • Enkelt kan formatera text för publisering utan att behöva använda html.
  • Använda vilket texteditor du vill
  • Blir inte instängd i någon ordbehandlares filformat
  • Läsbar som den är

Länkar till App Store och Mac App Store för de appar som jag använder för att skriva Markdown. Apparna för iOS kan kopplas till din Dropbox för att enkelt kunna skriva dina texter var du vill.

Byword – Mac
Tidigare inlägg om Byword.
Byword - Metaclassy, Lda.

Writing Kit – iPad
Tidigare inlägg om Writing Kit.
Writing Kit - Quang Anh Do

Elements 2 – iPad, iPhone & iPod touch
Tidigare inlägg om Elements och Elements 2.
Elements - Dropbox And Markdown Powered Text Editor - Second Gear

Tidigare artiklar om Markdown:
Prissänkt Macchiato redo för Mac OS X Lion
Marked till Mac förhandsvisar Markdown
Diskreta skrivappen iA Writer till Mac

Källkoden

Som exempel på dokument skrivet i Markdown så har jag nedan lagt med Markdown-koden för denna artikel. Kan dock se onödigt rörig ut då jag använt Markdown för att skriva om Markdown vilket gör att jag använt indrag och kod på många ställen.


Introduktion till Markdown med Byword

### Introduktion

Jag börjar med att lite snabbt och enkelt beskriva vad [Markdown](http://daringfireball.net/projects/markdown/) är för er som inte känner till det. Det skapades av John Gruber som driver bloggen [Daring Fireball](http://daringfireball.net “test”) och är ett markup-språk för text där tanken bakom är att det ska vara lätt att läsa och lätt att skriva. Textdokumentet kan sedan konverteras till html.

Till skillnad från html-kod så är ett textdokument skrivet i Markup mycket mera lättläst så det ska kunna läsas utan att först ha konverterats till html och sedan visas i en webbläsare. Eftersom Markdown liksom html är rena txt-filer så kan det skrivas i vilken texteditor som helst så du stänger inte in dig i någon ordbehandlares egna format och är därmed famtidssäker. Exempelvis så kan du arbeta med ditt dokument på Mac, iPhone och iPad i vilken texteditor som är din favorit på respektive plattform.

### Appar

På Mac använder jag [Byword](http://bywordapp.com/). På iPad kan jag rekommendera [Writing Kit](http:getwritingkit.com) eller [Elements 2](http://www.secondgearsoftware.com/elements/) som finns till både iPad och iPhone. Det finns dock många texteditorer som stödjer Markdown så du kan få en förhandsvisning på hur ditt dokument ser ut formaterat och som kan exportera html-koden åt dig. Använder du en texteditor som inte har dessa funktioner så kan du använda ditt av sidan [Dingus](http://daringfireball.net/projects/markdown/dingus) i din webbläsare för att se formatering och konvertera Markup till html.

### Syntax

Som sagt så använder Markdown en enklare formatering än html. Man ska inte riktigt jämföra html med Markdown rakt av då Markdown endast är för textformatering. Se nedan jämförelser mellan hut html och markdown formateras.

### Rubriker

Istället för att som med html skriva `

Rubrik

`med start- och slut-tag så sätter man # framför. Ett # representerar h1, två ## representerar h2 o.s.v. Just h1 och h2 kan ersättar med en alternativ syntax. Se nedan.

# Rubrik 1
## Rubrik 2
### Rubrik 3

Rubrik 1
=========

Rubrik 2
———

> # Rubrik 1
> ## Rubrik 2
> ### Rubrik 3

> Rubrik 1
> =========

> Rubrik 2
> ———

### Kursivt och fet

Här används * framför och efter ordet som ska bli kursivt eller i fet stil.

Mening med *kursivt* ord. Ord med **fet** stil.

>Mening med *kursivt* ord. Ord med **fet** stil.

### Citera

Här efterliknar Markdown det sätt som man citerar text i ett email. Genom att sätta ett > framför textblocket som kommer det bli indraget. Man kan antingen sätta ett > framför varje rad eller vid början av textblocket.

>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>Citerad textrad 1
>Citerad textrad 2

>>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>>Citerad textrad 1
>>Citerad textrad 2

### Radbryt

Om man hårt vill sätta in ett radbryt i en text så gör man det genom att gära två mellanslag efter sista ordet i föregående rad.

### Kod

Vill man lägga till kod i en mening så skriver man ` framför och efter koden. Är det flera rader kod så gör man ett indrag genom att ha minst fyra mellanslag innan raden börjar.

Html-koden för kursiv stil är “.

Detta är kurisv html

>Html-koden för kursiv stil är “.

> `Detta är kursiv html`

### Listor

Att skapa listor i html är ganska omständing. Med Markdown så skriver man helt enkelt en stjärna “*” framför varje listrad. Vill man ha ett indrag så lägger man till fyra blanksteg innan.

* Onumrerad lista
* Rad nummer 2
* Indragen listrad
* Rad nummer 3

>* Onumrerad lista
>* Rad nummer 2
> * Indragen listrad
>* Rad nummer 3

1. Numrerad lista
2. Rad nummer 2
3. Rad nummer 3

>1. Numrerad lista
>2. Rad nummer 2
>3. Rad nummer 3

### Länkar
Länkar skrivs med följande syntax. `[text som ska länkas](länk)` vilket resulterar i att texten ändå är lättläst. Man kan även skriva genom att använda länkreferenser så man stör ännu mindre i löptexten. `[text som ska länkas][länkreferens]`.

På Mac använder jag [Byword](http://bywordapp.com/) som jag kommer använda som exempel i denna artikel.

>På Mac använder jag [Byword](http://bywordapp.com/) som jag kommer använda som exempel i denna artikel.

På Mac använder jag [Byword][bywordapp] som jag kommer använda som exempel i denna artikel.

[bywordapp]: http://bywordapp.com/

>På Mac använder jag [Byword][bywordapp2] som jag kommer använda som exempel i denna artikel.

[bywordapp2]: http://bywordapp.com/

### Horisontellt streck
Horisontellt streck, eller horisontal rules som det heter på engelska kan skapas på flera sätt. Använd tre eller fler `*`, `-`eller ´_´. Ta det som känns bäst för dig.

* * *
***
– – –
_ _ _
——–

* * *

### Bilder
Du kan även länka till bilder i Markdown även om det inte blir speiellt visuellt och du manuellt får leta upp adressen till bilden.

![alt text](/path/img.jpg)

eller

![alt text][id]

[id]: /url/to/img.jpg

### Sammanfattning
Se detta som en enkel introduktion till hur du skriver Markdown och inte någon komplett referens på något sätt. Är du intresserad att läsa mer om Markdown så finns den [kompletta referensen här](http://daringfireball.net/projects/markdown/syntax). Dessutom finns utökningar till Markdown. Exempel på detta är [Multimarkdown](http://fletcherpenney.net/multimarkdown/) och [Markdown Extra](http://michelf.com/projects/php-markdown/extra/) men det är inte alls säkert att appar som stödjer Markdown även stödjer detta utökningar.

Fördelarna med Markdown som jag ser det är:

* Enkelt kan formatera text för publisering utan att behöva använda html.
* Använda vilket texteditor du vill
* Blir inte instängd i någon ordbehandlares filformat
* Läsbar som den är

 

Länkar till App Store och Mac App Store för de appar som jag använder för att skriva Markdown. Apparna för iOS kan kopplas till din [Dropbox](http://dropbox.com) för att enkelt kunna skriva dina texter var du vill.

Läs mer

Populärt i bubblan idag

Inga inlägg!