Markdown is a lightweight formatting language that you can use to add formatting elements to plain text documents. In the case of your Attractions.io mobile app, you can use it to bring app panes to life with pictures, links and text formatting.
In this guide, we’ll run you through the basics of Markdown so that you can create engaging featured content, messages and offers that get your guests attention and deliver a great user experience.
First time using a web language? No worries! Markdown is designed to be as easy to learn as it is to write and read, so with just a few tips, you’ll soon feel confident enough to start editing text in the app management console.
Before we get into the how-to’s, you might be wondering why we use Markdown instead of a WYSIWYG (What you see is what you get) editor. Markdown has numerous advantages over editing interfaces and other languages:
We’ve outlined the most common Markdown elements that our customers use to enhance text in their Attractions.io mobile app. From our own experience of learning markdown, the best way to really get to grips with the language is to practice as you go, and there are plenty of free markdown tools available if you don’t fancy testing out your skills in the app right away. For example, The Dingus is a web application that allows you to type your own Markdown-formatted text and translate it to XHTML.
Now let’s get into the nitty-gritty. Keep reading to find out how to implement the most common text formats in markdown:
A paragraph in Markdown refers to one or more consecutive lines of text, separated by one or more blank lines. A blank line is any line that contains nothing but spaces or tabs. For example:
This is my first paragraph.
This is my second paragraph. There is line break between the two – just as if you were writing it on word!
Markdown supports two header styles: Headers for <h1> and <h2> can be created by “underlining” with equal signs (=) and hyphens (-), respectively. Alternatively, you can put 1-6 hash marks (#) at the beginning of the line — the number of hashes equals the resulting HTML header level. For example:
A First Level Header
A Second Level Header
### Header 3
#### Header 4
Markdown uses email-style > characters for blockquoting. We recommend hard wrapping the text and putting a > before every new line.
> This is a blockquote with two paragraphs. The first paragraph is longer than the second.
> And that’s why we’ve had to fill the third line with Latin.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> This is the second paragraph in our blockquote.
> It is smaller than the first paragraph – no Latin here!
Blockquotes can be nested by adding additional levels of >:
> This is the first quote.
> > This is nested blockquote.
> Back to the first quote.
Need to make an impact? Add asterisks or underscores before and after text to make it stand out. For example:
In this sentence *the words inside the asterisks are emphasised*.
Whereas here, _the words inside the underscores are emphasised_.
You can also use two asterisks for **strong emphasis**. Or, if you prefer, __use two underscores instead__.
Markdown supports two styles of links: inline and reference.
In both styles, the link text is delimited by [square brackets].
To create an inline link, use a set of regular parentheses immediately after the link text’s closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded by quotes. For example:
This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
Markdown’s syntax for images is designed to mirror the syntax it uses for links, making it easy to pick up.
To add an image, open with an exclamation point, then follow with your alt text in square parentheses. After that, just add the image URL or path to standard parentheses, as follows:
![Alt text](Image URL)
You can also add an optional title, in quotation marks as follows:
![Alt text](Image URL “image title”)
Above, we’ve covered the basic features of markdown that you’ll need to use in the day to day content management of your mobile app. However, Markdown’s syntax is far more comprehensive than the features we’ve covered in this blog. If you’re looking to build on your foundational knowledge, we use this guide from Daringfireball as our go-to resource at Attractions.io HQ.
If you need further support with using Markdown to elevate your app’s content, our support team are on hand to help. You can email your customer success manager directly or fill out our contact form here.