Formatting using Markdown: linking documents/websites, adding images and stylising text
Good Grants uses markdown for content formatting across the system. It's a very simple and quick to learn method of formatting, inspired by plain text email.
Using Markdown formatting, websites, documents, images and videos can be inserted into almost any location. Common examples include content blocks and hint text on fields.
In the words of its creator (John Gruber), "The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions."
In each of the below sections, you'll find the markdown split over two lines:
The first line, in this format, shows the markdown being used.
The second line shows the visual effect of the markdown.
To allow your program's applicants to utilise Markdown, navigate to Settings > Applications > General in the Manage workspace and select the Enable Markdown editor for applicants checkbox before clicking Save.
Emphasis
Bold
This is how you **bold** text
This is how you bold text
Italics
This is how you *italicise* text
This is how you italicise text.
Lists
Bulleted lists
* Bullet one
* Bullet two
- Bullet one
- Bullet two
Numbered lists
1. Step one
2. Step two
- Step one
- Step two
Headings
# Heading 1
## Heading 2
### Heading 3
Additional line spacing
If you wish to add more than one line between sentences or paragraphs, it is necessary to use ' ' in order for the spacing to be retained for display in the PDF.
This is how you add additional line spacing between lines.
This is how you add additional line spacing
between lines.
Links
When creating links, the text that goes within the square brackets "[]" is what the user will interact with while the link address is contained within the parenthesis "()". There should not be any spaces between the squared brackets and the parenthesis. Complete URLs, including the "https://" should be used.
Website/URL
[Link display text - URL](http://example.com/)
Email address
[Link display text - Email](mailto:example@mail.com)
Phone number
[Link display text - Phone](tel:+61283106640)
While the above examples all use similar formatting, you can see the variations when the link is clicked. The email option will open in the system-set email composer, and phone in the system-set phone dialer.
Documents
Documents and images need to be hosted outside of Good Grants before they can be linked to.
For example, you may have a marketing website or intranet where these files can be stored. Alternatively, you can use a service like Dropbox to host the files.
Ensure the URL to your document ends with the format of the file eg. .pdf or .jpg. URLs ending in .html or .php won't work.
[Link display text - Document](http://www.example.com)
This link will look the same as the URL options above, however will open the document in a new tab.
Video and image embedding
Video embedding
Videos need to be hosted outside of Good Grants before they can be linked or embedded. For example, you may have a marketing website where these files can be stored. Alternatively, you can use a service like Dropbox to host the files.
![300](https://www.youtube.com/watch?v=G_L4iyE9R3Y)
- The number in square brackets defines the width to display the video at (in pixels)
- The video is embedded at 16:9 (wide-screen) aspect ratio. If the source video is a different aspect ratio, it will be letter-boxed / pillar-boxed in the player
- Embedding is supported for Vimeo and YouTube URLs
Image embedding
Images need to be hosted outside of Good Grants before they can be linked or embedded. For example, you may have a marketing website where these files can be stored. Alternatively, you can use a service like Dropbox or Google Drive to host the files.
![alt text](https://drive.google.com/thumbnail?id=FILEID)
Ensure the URL to your document ends with the format of the file eg. .pdf or .jpg. URLs ending in .html or .php won't work.
![Alternative text describing the image](http://www.example.com/logo.png)
You can make an image embedded with Markdown formatting a link to your desired URL.
[![image alt text](image url link)](anchor link)
Most images can be resized in Markdown formatting by adding parameters at the end of the embedded URL. To set a custom width, add "?w=" followed by a pixel count or percentage at the end of the address. To assign a custom height, add "?h=" followed by a pixel count or percentage at the end of the URL.
Pixel count:
![Alternative text describing the image](http://www.example.com/logo.png?w=200)
Percentage of original size:
![Alternative text describing the image](http://www.example.com/logo.png?h=75%)
Want more information? Check out the official and complete markdown syntax guide. (Note: Good Grants does not support all markdown at this stage. If in doubt, please ask!)