Skip to main content
menu_icon.png

Have questions about site performance or Google's upcoming search changes? Join our AMA, hosted by Michael Hood (Senior Performance Engineer) on Wednesday, July 11th at 8:30am PST.

x
Optimizely Knowledge Base

Tips: Format text with Markdown in Optimizely

relevant products:
  • Optimizely Program Management
  • Optimizely X Web
  • Optimizely X Full Stack

THIS ARTICLE WILL HELP YOU:
  • Use Markdown to format text in Idea Details, stage notes, and comments

In Optimizely Program Management, you flesh out experiment ideas by adding idea details, add notes about assigned tasks to track progress, and use comments to collaborate and add feedback. As ideas take shape and discussions become more complex, you might want to use bulleted lists to organize your thoughts, add images or links to elaborate, or use bold for emphasis.

Use Markdown format to add this formatting and more in your comments, stage notes, and these Idea Details fields:

  • Goals

  • Primary Metric

  • Hypothesis

  • Detailed Description

  • Restrictions

Markdown is a lightweight text formatting language that lets you add bold and italic emphasis, ordered and bulleted lists, links, images, and code and syntax highlighting to text you're writing for the web.

Here's an example of how Markdown-formatted text looks in idea details and comments:

formatted-idea-comment.png

We've added a few examples of common Markdown formatting in this article. The examples show how to write the Markdown "code" on the left and the published text result on the right. Follow this Markdown Cheatsheet for more formatting details.

Ordered and bulleted lists

To make an ordered (numbered) list, add a numeral and period before the text:

1. Ordered list item

To make a bulleted list, add an asterisk, hyphen, or plus sign before the text:

* Bulleted list item

To make a sub-listed item nested within an ordered or bulleted list, add three spaces before the number or asterisk:

   1. Ordered sub-list item
   * Bulleted sub-list item

Written Markdown

Published text result

1. First ordered list item

2. Second ordered list item

   * Bulleted sub-list item

   * To create sub-lists, add three spaces before the number or asterisk

1. Third ordered list item. Note that the numbers themselves don't matter, as long as you use a number

   1. Ordered sub-list item

   2. Ordered sub-list item

4. Fourth ordered list item

* Use asterisks to specify bulleted list items

- Or hyphens

+ Or plus signs

lists.png

Emphasis

To add bold face to text, place two asterisks on either side:

**This text in bold.**

To add italic face to text, place one asterisk on either side:

*This text in italics.*

To add bold and italic face to text, place three asterisks on either side:

***This text in bold and italics.***

Written Markdown

Published text result

Use asterisks to format text with
**bold**, *italic*, or ***bold and italic** emphasis.

bold_italic.png

Inline-style links

To add an inline-style link to text, place the words you want to link in brackets, followed immediately by the web address in parenthesis:

In this sentence, [this text will link to](this web address).

To add an inline-style link to text with a title that appears when readers hover on the linked text, create an inline-style link and add the title text in quotation marks, after the web address and inside the parenthesis:

In this sentence, [this text will link to](this web address "with this title").

Written Markdown

Published text result

This is an inline-style link to [Optimizely](https://www.optimizely.com).

This is an inline-style link to [Optimizely](https://www.optimizely.com "Optimizely Homepage") with a title.

links.png

Inline-style image with title

To add an inline-style image with alternative text and a title that appears when readers hover on the image, type an exclamation point, the alternative text you want to display in brackets, and the link to the image and the title text in quotation marks inside parentheses:

![Alternative text for image](Link to image "Title text for image")

Written Markdown

Published text result

Text describing idea with image.

![alt text](https://a.mtstatic.com/@public/produ...cial-share.png "Optimizely logo")

images.png

Code and syntax highlighting

Place backticks around a word or phrase in inline text to add code formatting:

In this sentence, the word `command` will appear in code formatting.

To add language-specific syntax highlighting, place the code between two sets of three backticks. Add the language name after the first three backticks:

```python
print 'Hello, World!'
```

Written Markdown

Formatted text result

Use `backticks` to add `code formatting` to inline text.

To add syntax formatting, create code blocks with three backticks and the name of the language:

```html
<!DOCTYPE html>
<html>
<body>
<h1>Idea Detail Heading</h1>
<p>Paragraph of idea details.</p>
</body>
</html>
```

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

code-syntax.png