Using markdown to markup text in start.me: Part 1 – Basics

There are many features to start.me most users don’t know about. And that’s fine: that leaves something to be discovered. Today I will start a series of blogs about one of these ‘hidden’ features: Markdown. This easy to learn markup language is supported by start.me and allows you to add some extra style to your start.me pages. There are a lot of cool things that can be done, ranging from making text bold to inserting images, links, and tables. And what’s good to know: these formatting tricks are not limited to the Notes widget: they apply to bookmarks as well!

A brief history of Markdown

Before we investigate the remarkable things that can be done with Markdown, let’s delve into the history of this markup language first. As you may know, the world wide web is based on HTML, which is short for Hypertext Markup Language. The proposal of this new markup language by Tim Berners-Lee in 1990 shaped the Internet as we now know it.

In the early days, HTML was a simple markup language, but over the years it evolved and grown to be involved. And this complexity is what inspired John Gruber in 2004 to create a more straightforward markup language, one that would be designed for humans rather than computers.

Nowadays, Markdown is widely accepted as the markup language for all sorts of documents. The main benefit of Markdown over many other markup systems is that it is both easy-to-write and easy-to-write. So even when the markup is not processed, the ‘raw’ code is still straightforward to read. For this reason, Markdown is exceedingly popular with software developers and is now available on many sites, including GitHub and WordPress.

What you can do with Markdown in start.me

Most of the content added to start.me usually consists of small bits of text, for naming things. But there are places where you can write more text. The first thing that comes to mind is the Notes widget, of course.

The Notes widget lets you add blocks of text to your page, whether it is to jot down someone’s phone number quickly or to store often used email fragments. Using Markdown, you can do a lot of wonderful things with the Notes widget:

• Create bulleted lists
• Add images to your notes
• Add hyperlinks
• Section texts with headings
• Insert tabular data
• Quote people
• Highlight code fragments

But the bookmark block accepts longer text fragments as well. In the Detailed list mode, descriptions can be added to bookmarks. Although these usually will be short, there is no reason you wouldn’t enter some more text. More recently, bookmark blocks were given an introduction section, that allows you to put some text above your links. Both bookmark descriptions and bookmark block introductions accept Markdown formatting. And that opens a whole range of cool things:

• Use an image header for your bookmarks
• Highlight one or two words in the description of a bookmark
• Add links to bookmark descriptions and introductions
• Insert emoticons in your notes

How you do all that? I’ll show you!

Basic Markup formatting: bold, italic, and monospace

Not everything that you write down is equally important. Especially when texts grow larger, it becomes essential to mark the most relevant bits, the words readers really need to notice. An effortless way to do that is to make these words bold or italicize them.

Say you have a Notes widget that contains a list of all the contact details for your business. But you recently changed the phone number and really didn’t want to forget that. Make it bold! How? Put two asterisks (**) both left and right of the phone number in your Notes widget. It would look like this:

Acme Inc.
71 Pilgrim Avenue 
Chevy Chase, MD 20815
**(226) 906-2721**
www.acme.com
info@acme.com

Similarly, you can italicize words by putting an underscore (_) to the left and to the right of it. You can achieve a strikethrough by wrapping words in a pair of double tildes (~~). And if you like, you can use a monospace font as well: just put the text fragment between two backticks (`). Text you put in monospace will have a fixed character width, which makes it easier to align numbers. The example shows these formatting options:

Using Markdown, it is easy to make text **bold** 
or put them in _italics_. Words you don't like can be 
~~stricken~~ and for extra effect use `monospace`. 
Oh, and feel free to ~~_**`combine`**_~~!

To be continued

Give these basic formatting options a try and spice up your bookmarks and notes widgets. Experiment a little and let us know if you have any questions. Soon, we will continue this series with a blog of more advanced formatting options, including inserting hyperlinks and images.

Markdown series

• Part 1 – Basics
• Part 2 – Bullets and headings