Kirby comes with kirbytext wich extends the capabilities of Markdown by adding a few tags.
We also included a few more tags made specifically by Aristotheme to make things even better.

Links

Link without link text:

<http://wikipedia.org>
or
(link: http://wikipedia.org)

Link with link text:

example

Wikipedia

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

Open link in a new window

example

Wikipedia

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

Link with a title

example

Wikipedia

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

Link with a custom CSS class. You can combine classes to build different buttons.
This Theme uses BassCSS, please refer to the BassCSS documentation to get the full list of colors and styles.

(link: http://wikipedia.org text: Link Button class: button)
(link: http://wikipedia.org text: Button Blue class: button button-blue)
(link: http://wikipedia.org text: Button Blue Outline class: button button-blue-outline)

(link: http://wikipedia.org text: Button Gray class: button button-gray)
(link: http://wikipedia.org text: Button Red class: button button-red)
(link: http://wikipedia.org text: Button Green class: button button-green)

(link: http://wikipedia.org text: Burgers class: h3 button button-blue)
(link: http://wikipedia.org text: Fries class: h4 button button-blue)
(link: http://wikipedia.org text: Shakes class: h6 button button-blue)

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

<hello@aristotheme.com>
or
(email: hello@aristotheme.com)

Email with link text

(email: hello@aristotheme.com text: Send me an email)

Email with a title

(email: hello@aristotheme.com text: Send me an email title: Contact me)

Email with a custom CSS class

(email: hello@aristotheme.com text: Send me an email class: button button-blue)

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:

example

Call Us!

(tel: +49621123456789 text: Call Us! class: button button-blue)

Images

Images in your content folder

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

example
(image: myawesomepicture.png)

Set the width and height of an image

example
(image: myawesomepicture.png width: 120 height: 200)

Define an alternative text for an image

example
On this picture you can see a cat
(image: myawesomepicture.png 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.

example
(image: myawesomepicture.png class: right)

A linked image

example
(image: myawesomepicture.png link: http://aritotheme.com)

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

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

Adding a caption

example
I took this image in the park
(image: myawesomepicture.png 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!

example
(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.

example
(youtube: http://www.youtube.com/watch?v=lLuc6rtWkrM)
or
(vimeo: http://vimeo.com/3432886)

Set the width and height of the embedded video

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

Responsive video with the included oembed plugin.
Read the plugin documentation for more options and configuration

example
Play
(oembed: https://www.youtube.com/watch?v=YE7VzlLtp-4)

Twitter Profile Links

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: aristotheme)

With link text:

(twitter: aristotheme text: Follow Aristotheme 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.

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

Define, which file you want to embed

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

Comlumns

example
  • Column A

    In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

  • Column B

    In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

  • Column C

    In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

(columns…)

## Column A
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

++++

## Column B
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

++++

## Column C
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.

(…columns)

The ++++ seperator is used to divide text into columns. You can create additional columns by just adding more separators. You can add up to five columns. For the opening and closing column tags you can either use the more elegant ellipsis (Alt+. on a Mac) or three dots.

(columns…)

(…columns)

or

(columns...)

(...columns)