Learn how to use Markdown and Kirbytext to format your content, include images, embed videos and much more.
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.
Kirbytext automatically converts single line breaks and paragraphs.
My first line
My second line
Another paragraph
# 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.
**The quick brown fox jumps over the lazy dog**
_The quick brown fox jumps over the lazy dog_
The Simpsons:
- Homer
- Marge
- Bart
- Lisa
- Maggie
The Simpsons:
1. Homer
2. Marge
3. Bart
4. Lisa
5. Maggie
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
****
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> Design is not just what it looks like and feels like.
> Design is how it works.
– Steve Jobs
```
<?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
(\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)
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)
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)
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)
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)
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.
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)
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)
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)
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.
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.
If you still need more features, you can switch to Markdown Extra, which is also included with Kirby.
c::set('markdown.extra', true);
There are some fantastic Markdown Editors for Mac and PC, which you can use to edit content for Kirby:
Of course you can still use any other editor, as this is all just plain text.