Using Markdown in FareHarbor

  • Updated

Additional information is available to FareHarbor employees.

Markdown is a simple way to add formatting to text—such as boldface, italics, and bullet points—using keyboard symbols like asterisks and brackets. In FareHarbor, you can use Markdown to format your messages to customers, as well as various parts of your book form and FareHarbor profile.

Every text box in FareHarbor that accepts Markdown will have a Preview Markdown option at the bottom right, which lets you preview what the content will look like to your customers.

Preview Markdown

Markdown cheatsheet

This chart covers the most common Markdown capabilities used in FareHarbor. Type the Markdown syntax on the left to produce the result on the right. Just replace the word ‘text’ with your own content.

Markdown Result
**text** Bold
*text* Italics
***text*** Bold italics
- text Bullet point
1. text Numbered list
[link text](URL) Link
![descriptive text](image URL) Image
[email_address](mailto:email_address) Mailto:
# Text H1 Header (example)
## Text H2 Header (example)
### Text H3 Header (example)
--- Horizontal line (example)

Note: Markdown doesn’t support different text colors or alignment. However, you can easily emphasize and organize your text using the options on this page. To learn more, click into the individual sections below.

Text formatting

With Markdown text formatting, you can easily make text bold or italicized using asterisks.

  • For bold text, type two asterisks (**) before and after the text you want to make bold.

    **This text will appear bold.**

  • For italics, type a single asterisk (*) before and after the text you want to italicize.

    *This text will appear italicized.*

Bullets and Numbered Lists

To create bullet points in Markdown, you can use either asterisks or dashes. Be sure to include a space between the asterisk/dash and the text, and to add a blank line before the first bullet point. Otherwise, the list will not be formatted correctly.

* Bullet point

and

- Bullet point

will both appear as:

  • Bullet point

Use the same rules as above for numbered lists.

1. Rule one
2. Rule two
3. Rule three

will appear as:

  1. Rule one
  2. Rule two
  3. Rule three

Images

The Markdown syntax for images is similar to the syntax for links. Type an exclamation mark followed by the image name and URL:

![Descriptive text](image URL)

For instance, the image at the top of this page looks like this in Markdown:

![Preview Markdown](https://bit.ly/2IcHoYG)

Uploading images in FareHarbor

On Markdown-enabled fields in FareHarbor, you can upload an image or file and it will automatically get converted into Markdown. Click the Upload uploadicon icon, choose your file, and enter an image name in between the brackets.

Descriptive text

For accessibility purposes, descriptive text (aka “alt text”) should describe the image as concisely as possible. Descriptive text should not include “picture of” or “image of.” This text will display in emails if the image does not load. Decorative images that do not convey any important information can have empty alt text: ![](image URL)

In addition, if the Markdown syntax is entered without the opening exclamation point, it appears as a standard link to the photo using the image name:

Preview Markdown

Linking an image to a webpage

To make an image link to a page, you can use the following syntax:

[![image description](image URL)](webpage URL)

For example,

[![Logo](https://bit.ly/2G3gMak)](https://fareharbor.com)

creates an image of the FareHarbor logo that links to the FareHarbor homepage:

Logo

Headers

While you can’t change the font size like you would in a word processor, Markdown does allow you to create headers in various sizes in order to format your content consistently. This is done by using hash (#) symbols in front of the header name. The number of hashes corresponds to the header level.

H1 Header

In descriptions, confirmation notes, and canned messages, H1 headers will appear in large text. When added to various parts of your booking process, these headers can be used to break up text into easy-to-read sections. For an H1 header, type # Text and replace “Text” with the name of your header.

H2 Header

In descriptions, confirmation notes, and canned messages, H2 headers are roughly the same size as H1 headers. For an H2 header, type ## Text and replace “Text” with the name of your header.

H3 Header

H3 headers are smaller than H1 and H2 headers For an H3 header, type ### Text and replace “Text” with the name of your header.

Horizontal lines

You can add a horizontal line like the one in the image below by placing three or more hyphens (---), asterisks (***), or underscores (___) on a line by themselves.

Example of a horizontal line

This can be handy when you want to split up information into more visible sections. Please note, horizontal lines should be avoided when building a dashboard. If you’re having trouble getting the horizontal line to appear, try adding an extra line of blank space above and below.

Note: Page breaks should be used sparingly. Instead, use header markdown to emphasize the start of each section. See Tips for writing item descriptions for more information.

Content builder Markdown

In addition to using Markdown to format messages to customers, booking forms, and your FareHarbor profile, you may also introduce Markdown to your item listing descriptions using the Content Builder.

Your content builder Markdown will differ in appearance from Markdown added in other areas of the FareHarbor product. Below are the standard and Content Builder CSS rules associated with each Markdown rule:

Markdown rule Standard CSS Content Builder CSS
H1 24px, medium 16px, bold
H2 21px, medium 16px, bold
H3 18px, medium 16px, bold
Body 15px, regular 16px, regular
Bold Size inherited, bold 16px, bold
Italic Size inherited, italic 16px, italic
Link Size inherited 16px, regular, underlined
List Size inherited 16px, regular
Blockquote Gray box with left border No left border, radius: 6px

Additional resources

The capabilities demonstrated above will satisfy most of the Markdown requirements of working with FareHarbor. If you would like to know more, visit the website Daring Fireball, by Markdown’s creator, John Gruber.