Text Formatting

We've already seen it in some places - but let's talk a bit more about Kirby's text rendering.

Kirby uses an extended version of the popular Markdown syntax called "Kirbytext" to format text. When I say "extended", I must say that it offers some really lovely extensions that make formatting a lot more flexible.

Note

We won't discuss all formatting possibilities that Kirbytext has to offer. Have a look at the Kirbytext documentation to learn more (especially in case you're new to Markdown altogether).

Introducing Kirbytext

Our content for the "about" page was a nice example of how Kirbytext is really a mixture of plain text and special formats and tags.

### Tower - Not a moustache, but the best Git client.

We help over __70,000 users__ in companies like Apple, Google, Amazon, Twitter, and Facebook to easily & productively work with the Git version control system.

( link:http://www.git-tower.com text:Try it 30 days for free popup:yes)

The first line lends from good old Markdown: the “#” signs mark the following content as a headline; three of them behind one another make an <h3> tag.
Also classic Markdown are the double underscores: they enclose a string that shall be wrapped in <strong> tags.

The link tag, finally, is our first Kirbytag: enclosed in brackets, Kirbytags can take multiple attributes. Here the main "link" item takes a URL, while "text" is for the content in the final <a> tag and "popup" decides if it should open in a new window or not.

Note

The code examples on this website cannot display Kirbytags 100% accurately: in real code, there should be no space between the bracket and the Kirbytag's keyword: "( link:...", for example.

This inaccurancy is due to the fact that this website is itself made with Kirby. The code on GitHub, however, contains the correct formatting.



Another often used tag is the image tag. We'll add one to our about page:

### Tower - Not a moustache, but the best Git client.

( image:tower-logo.png class:float-left alt:Tower Git Client)

We help...

This shows an image file named "tower-logo.png" that we placed in our "about" page folder. Additionally, we assigned it a CSS class "float-left" for styling purposes and an "alt" text value.

We'll use Kirbytext quite often in the rest of this tutorial. Now, however, it's time to see how it is comes onto the page.

Rendering Kirbytext

We already used the kirbytext() function in our templates, for example in subpage.php:

<div class="subpage-content">
  <h1><?php echo $page->title(); ?></h1>
  <?php echo $page->text()->kirbytext(); ?>
</div>

We pass the value of the page's "Text" data field to the kirbytext function - and it renders it taking into account both basic Markdown format and special Kirbytext tags.

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.