Using Markdown

This page provides an introduction to using Markdown to format free text feilds

Introduction

Markdown is a simple and easy-to-use markup language you can use to format virtually any document or webpage.

Markdown is available in 'free text' feilds on the platform, giving you lots of control over how a free text feild is rendered. You can format text and images and include tables and links and much more besides.

This page covers some basic ways you can use Markdown. If you want more information, The Markdown Guide is a free and open-source reference guide that explains how to use Markdown in more detail.

Step 1

When you are in a free text field you will be notified that 'Markdown is supported'.

The link will take you to the Markdown page on Wikipedia where you will see some common examples of using markdown

The 'preview' feature shows you how the feild will appear to respondents.

Step 2

This example shows how to create a heading

Rendered as follows:

Step 3

This example shows how to include a link

Rendered as follows:

Step 4

This example shows you how to include an image

Images should be added in the following way:

<img src="https://firebasestorage.googleapis.com/v0/b/ida-ta.appspot.com/o/organisationData%2Fillustration%2F_template%2F-NGHyehUbZduJNdSVzXF%2F-NGb1j8_-hOcgZ6AdBm3.png?alt=media&token=8cf02b92-ab35-41f2-9c5a-95a38d1b138c" width="100" height="100">

Section	Description
<img src=	Opening parenthesis
"https://firebasestorage.googleapis.com/v0/b/ida-ta.appspot.com/o/organisationData%2Fillustration%2F_template%2F-NGHyehUbZduJNdSVzXF%2F-NGb1j8_-hOcgZ6AdBm3.png?alt=media&token=8cf02b92-ab35-41f2-9c5a-95a38d1b138c"	The location on the web where the image is stored. A tip is to add the image to the "image library" (or the image library for ER, which opens when you choose a media from the ER menu), right click on the image once uploaded and then click "copy image address"
width="100" height="100"	This allows you to adjust the size of your image
>	Closing parenthesis

The image is rendered like this

Step 5

The following example shows how text can be put inside a coloured box

<div class="warning" style='padding:0.1em; background-color: #0073AE; color:#ffffff'>

<span>

<p style='margin-top:1em; text-align:center'>

<b>On the importance of sentence length</b></p>

<p style='margin-left:1em;'>

This sentence has five words. Here are five more words. Five-word sentences are fine. But several together bocome monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It's like a stuck record. The ear demands some variety.

</p>

</div>

The box is rendered like this:

Step 6

That is a brief introduction to Markdown. For more information, refer to The Markdown Guide. Their 'basic syntax' page covers most of what you need to know and other pages cover advanced user cases.

\