Using markdown to markup bookmarks and pages: Part 1 – Basics

Using markdown to markup bookmarks and pages: 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 really 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 look into the great 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 rather simple markup language, but over the years it evolved and grown to be very 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.

Markdown is used for a lot of formatting tasks, nowadays, and has a lot of fans

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 very popular with software developers and is now available on many sites, including GitHub and WordPress.

Suggested reading:  Helpful tips from a real estate investor in The Hague

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 mainly. But there are places where you can actually write more text. The first thing that comes to mind is the Notes widget, of course. A notes widget with Markdown formatting applied

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 great 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 actually 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 why 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 up a whole range of cool things:
A bookmark block with Markdown formatting applied

  • 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
Suggested reading:  Make your teamwork stronger with these unsurpassed tools

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

Basic 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 easy 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:
A notes widget that shows Markdown formatting used to create bold text

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:
A notes widget with some basic Markdown formatting applied

Using Markdown, it is really 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.

Suggested reading:  5 terrific widgets for a better start page

Markdown series

Michiel de Wit

Michiel de Wit

Michiel is CGO and co-founder of start.me. He is a software professional with a lot of experience in developing enterprise grade web applications. He is a certified Scrum Master and a great proponent of modern software development practices.


(It's free and will only take a minute)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to our blog via email

If you want to stay up-to-date, enter your email address below. You will receive notifications of new posts by email.

Subscribe to our blog ➔