DevResults enables you to format text in narrative fields using a system called Markdown. Markdown uses simple characters to create emphasis, lists, headers, links, and images. If you use forms to generate reports from DevResults, the exported Word document will come with the formatting used online. You can use Markdown on the activity overview page, the indicator definition page, and for narrative responses each reporting period.

This page includes information about:

Making text bold or italic

The examples below show how to type the formatting and how it appears when you're done.

Create italic text with one set of *asterisks* or _underscores_.

Make text bold with double **asterisks** or __underscores__.

Combine emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Create italic text with one set of asterisks or underscores.

Make text bold with double asterisks or underscores.

Combine emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this~~.

Using paragraphs

Make sure to use two returns to create separate paragraphs.

This appears in a separate line
while this does not. 

You can also add line dividers using three dashes in a paragraph by themselves.

---

This creates separate sections on the page.

Make sure to use two returns to create separate paragraphs.

This appears in a separate line while this does not.

You can also add line dividers using three dashes in a paragraph by themselves.

This creates separate sections on the page.

Creating bulleted or numbered lists

In this example, leading and trailing spaces are shown with with dots: ⋅⋅⋅⋅

Create a bulleted list with asterisks, pluses, or minuses. They all work the same: 
* Item one
- Item two
+ Item three

Add a numbered list like so:
1. First ordered item
2. Second item
3. Another item

Create sublists and combine bullets and numbering: 

1. First numbered list item
2. Second numbered list item
⋅⋅* Bulleted sub-item
⋅⋅* Bulleted sub-item
3. Another item
⋅⋅1. Numbered sub-item
⋅⋅2. Numbered sub-item
4. And another item

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above and the leading spaces.

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅

Create a bulleted list with asterisks, pluses, or minuses. They all work the same:

Item one
Item two
Item three

Add a numbered list like so:

First ordered item
Second item
Another item

Create sublists and combine bullets and numbering:

First ordered list item
Second numbered list item
- Bulleted sub-item
- Bulleted sub-item
Another item
1. Numbered sub-item
2. Numbered sub-item
And another item
You can have properly indented paragraphs within list items. Notice the blank line above and the leading spaces.
To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.

Adding headers

Use hashes to create headings on separate lines:

# Main Heading
## Sub-Heading
### Another Sub-Heading
#### Even More Specific Heading
##### We Can Keep On Going
###### And We're Finally Getting to the Point

Main Heading

Sub-Heading

Another Sub-Heading

Even More Specific

We Can Keep On Going

And We're Finally Getting to the Point

Including links

Create links using brackets and parentheses:

[Here's a link](https://www.devresults.com)

[Here's a link with hover-over title](https://www.devresults.com "DevResults Homepage")

[Here's a link to start an email](mailto:first.last@devresultsdemo.com)

Here's a link

Here's a link with hover-over title

Here's a link to start an email

Embedding images

Adding images is similar to adding links. All you have to do is type ![ ]( ) and then put the URL to the photo in the (parentheses). Add a descriptive title inside the [square brackets] so that visually impaired users (or anyone else who uses a screen reader) will also know what the image is. For example:

Here's our logo. Hover to see the image title:

![DevResults logo](https://i.imgur.com/eUgvBht.png)

You can paste this code into your narrative section or Markdown tile. The result would be:

Here's our logo. Hover to see the image title:

alt text

To get a link to a photo in your DevResults site, first click on the photo in your photos tab to get to a full-sized view. Right click on the image and select "copy image address."

Resizing Images

Markdown does not offer an easy way to resize images. As an alternative, you can use HTML. These two lines of code are equivalent:

Markdown:

![DevResults logo](i.imgur.com/eUgvBht.png)

HTML:

<img src="i.imgur.com/eUgvBht.png" title="DevResults logo"></img>

Now you can add to your HTML code to resize an image. Here, I'm setting the width equal to 500 pixels. (The height will then scale proportionally.)

<img src="i.imgur.com/eUgvBht.png" title="DevResults logo" width="500px"></img>

Using an Image in Google Drive

Google makes it difficult to to generate a link directly to the image content in Google Drive, but it's still possible. To do so:

Get the ID of the file: You can open the image in a new window or get the "shareable link" to the file. When you're viewing the image, your URL will look something like this:

https://drive.google.com/file/d/1dCIELFHSw8KmXms431d8PPQkuWDfi3_Z/view

The ID of the image would be:

1dCIELFHSw8KmXms431d8PPQkuWDfi3_Z

Next, add the ID to this URL:

https://drive.google.com/uc?id=

The result is this new URL:

https://drive.google.com/uc?id=1dCIELFHSw8KmXms431d8PPQkuWDfi3_Z

You can then include the image in your DevResults site using this URL with either the Markdown or HTML syntaxes described above.

More Resources

For more markdown tricks, you can check out the syntax guide for the version we use, available at daringfireball.net.

Didn't answer your question? Please email us at help@devresults.com.

Formatting Text$('.hg-article-pdf img').replaceWith('<i class="fa fa-file-pdf-o"></i>');