Xcode: Markup For Playgrounds

In this post you will learn how to use markup for Playgrounds.

Hint: This post uses Xcode 8.1 and Swift 3.

Let’s start by looking at how the markup language works. Just start a new Playground and write the following lines:

Now click ‘Editor -> Show Rendered Markup’ and you’ll get this result:


You can switch back to the unrendered view by clicking ‘Editor -> Show Raw Markup’. It’s a little bit cumbersome though to use the menu for this task. It is better to add a shortcut for this operation. You can add a shortcut at ‘Xcode -> Preferences… -> Key Bindings -> Show Rendered Markup’:


All markup expressions are always inside comments, followed by “:” at the beginning of the comment:


You can use three different kinds of headers:


Internet links

Of course you can also add internet links:

This will be rendered as follows:


Playground Page links

You can not only link outside of the playground, but also to other pages within the same playground. By the way: New playground pages can be created by clicking ‘File -> New -> Playground Page’. Now, if you want link to a Playground Page that is called ‘ExamplePage’, use the following:

You can also link to the next or the previous page by using @previous  and  @next:

The order is determined by the the order of the pages inside the navigator.


You can also easily create lists:

It will be rendered like this:


You can also have different levels by using indentations:


Of course also numbered lists are possible:



You can display images that are located inside the ‘Resources’ folder of your playground. You can just drag and drop the image into the playground, if the navigator is open:


Now you can display the image inside your playground:

The alternate text will be displayed, if the image cannot be loaded.

Bold and italic

It’s also possible to use bold and italic:


Title Image: @ zlikovec / shutterstock.com