Formatting text

Kirby uses an extended version of John Gruber's fantastic Markdown, called Kirbytext.
Kirbytext is a simple syntax to format plain text, which is easy to understand and read.

Kirbytext inherits all the basic Markdown tags and extends them with simpler tags to add images, embed videos or include download links for files. Kirbytext can be extended further to offer even better ways for editors to enhance content.

Basic formats

Line breaks & paragraphs

Kirbytext automatically converts single line breaks and paragraphs.

My first line
My second line

Another paragraph

Headlines

# Headline 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

## Headline 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

### Headline 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

#### Headline 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Bold Text

**The quick brown fox jumps over the lazy dog**

Italic Text

_The quick brown fox jumps over the lazy dog_

Unordered Lists

The Simpsons:

- Homer
- Marge
- Bart
- Lisa
- Maggie

Ordered Lists

The Simpsons:

1. Homer
2. Marge
3. Bart
4. Lisa
5. Maggie

Horizontal Rules

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

****

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Quotes

> Design is not just what it looks like and feels like.
> Design is how it works.

– Steve Jobs

Code Blocks

```
<?php

// awesome code example

?>
```

Link without link text:

<http://wikipedia.org>

or

(link: http://wikipedia.org)

Link with link text:

(link: http://wikipedia.org text: Wikipedia)

Open link in a new window/tab

(link: http://wikipedia.org text: Wikipedia popup: yes)

Link with a title

(link: http://wikipedia.org text: Wikipedia title: Go to Wikipedia)

Link with a custom CSS class

(link: http://wikipedia.org text: Wikipedia class: mylink)

Relative links

To link to any page of your site, you can simply use relative links without typing the entire URL. This will make sure, links won't break when you move your site to a different domain or when you are testing your site locally.

(link: docs/getting-started)
(link: blog/text-formatting-101)

Email Addresses

Kirby will automatically encrypt your email addresses, so they won't be that easy to be parsed and misused by spam bots.

Email without link text

<bastian@getkirby.com>

or

(email: bastian@getkirby.com)

Email with link text

(email: bastian@getkirby.com text: Send me an email)

Email with a title

(email: bastian@getkirby.com text: Send me an email title: Contact me)

Email with a custom CSS class

(email: bastian@getkirby.com text: Send me an email class: email)

Phone numbers

Linked phone number:

(tel: +49621123456789)

Linked phone number with custom text:

(tel: +49621123456789 text: +49 621 123 456 789)

Linked phone number with custom text and class:

(tel: +49621123456789 text: +49 621 123 456 789 class: phone)

Images

Images in your content folder

You can easily embed any images from your page's content folder.

(image: myawesomepicture.jpg)

Set the width and height of an image

(image: myawesomepicture.jpg width: 120 height: 200)

Define an alternative text for an image

(image: myawesomepicture.jpg alt: On this picture you can see a cat)

Sometimes you need to add floating or special styling to particular images. Best way to do this is to go for a custom css class.

(image: myawesomepicture.jpg class: floated)

A linked image

(image: myawesomepicture.jpg link: http://flickr.com)

You can even link to the same picture – maybe for a lightbox feature – or to a different picture in the same content folder.

(image: myawesomepicture.jpg link: anothergreatpic.jpg)

Adding a caption

(image: myawesomepicture.jpg caption: I took this image in the park)

Images from other websites

To embed images from other websites, simply use the direct URL to the image. Please make sure you got the copyright and the permission to deep-link to an external image!

(image: http://flickr.com/someimage.jpg)

Of course all the additional attributes, described above, are available for external images as well.

Files

Provide a download link to a file in your page's content folder.

(file: companysecrets.pdf)

Download link with link text

(file: companysecrets.pdf text: Download our company secrets)

Youtube & Vimeo Videos

Kirbytext has a built-in way to add Youtube and Vimeo videos to any page without the hassle of fiddling with those scary embed codes. All you need is the URL of the video.

(youtube: http://www.youtube.com/watch?v=lLuc6rtWkrM)

or

(vimeo: http://vimeo.com/3432886)

Set the width and height of the embedded video

(vimeo: http://vimeo.com/3432886 width: 400 height: 300)

Linking to Twitter profiles has become almost as important as linking to your own website. Thus Kirby provides a simple way to link to any Twitter profile.

(twitter: getkirby)

With link text:

(twitter: getkirby text: Follow Kirby on Twitter)

Embedding Github Gists

Github is probably the most awesome platform for all developers and sharing pieces of code with a Github Gist is fantastic. Those Gists can be embedded in any page as easy as it is to embed a Youtube video.

(gist: https://gist.github.com/2556891)

Define, which file you want to embed

(gist: https://gist.github.com/2556891 file: targetblank.js)

Extending Kirbytext

You'd love to have a special tag for embedding cat pictures from http://placekitten.com/ or you need some other tags for your next client project?

Kirbytext is extendable, so you can actually build in all the great features you need.

More Markdown features

I've not listed all Markdown features here, so if you want to learn more about Markdown and its syntax, head over to John Gruber's site.

Markdown Extra

If you still need more features, you can switch to Markdown Extra, which is also included with Kirby.

c::set('markdown.extra', true);

Editors

There are some fantastic Markdown Editors for Mac and PC, which you can use to edit content for Kirby:

For Mac:

- iA Writer (http://iawriter.com)
- Mou (http://mouapp.com)
- Byword (http://bywordapp.com)
- Marked (http://markedapp.com)
- Write for Mac (http://writeapp.net/mac/)

For Windows:

- MarkdownPad (http://markdownpad.com)
- WriteMonkey (http://writemonkey.com)

Of course you can still use any other editor, as this is all just plain text.