Hubstaff Tasks provides you options to make your text stand out. Formatting your text enhances the visual appeal and adds clarity to your comments as well as task and epic descriptions.

We use both standard markdown language and a dedicated WYSIWYG editor to help you convey messages better. You can use formatting to notate, stylize, and indent your text. You can also add other elements such as images, hyperlinks, emoji, and more. You may also refer to this Markdown Guide for a full list of available options.

---

Table of contents

• WYSIWYG editor
• Markdown
  • Headings
  • Mentions
  • Emphasis
  • Strikethrough
  • Emoji
  • Blockquote
  • Nested Blockquote
  • Lists
    • Ordered Lists
    • Unordered Lists
  • Code Blocks
  • Links
  • Link Titles
  • URLs and Email Addresses
  • Images
  • Linked Images
  • Horizontal rule

---

WYSIWYG editor

With the WYSIWYG (What You See Is What You Get) Editor, you can format your text in the following sections:

1. Task description
2. Epic description
3. Comments

Using our WYSIWYG editor, you can do the following (arranged from left to right):

1. Mention another user using the @ symbol (e.g., @johnsmith)
2. Add smileys.
3. Attach files
4. Format text to Bold using the B icon.
5. Format text to Italic using the I icon.
6. Add a strikethrough using the S icon.
7. Insert a hyperlink using the 🔗 icon.
8. Clear formatting
9. Open the additional options button which allows you to format text as a:
   1. Code block
   2. Heading (H1)
   3. Heading (H2)
   4. Heading (H3)
   5. Block quotes

---

Markdown

Here are a few examples of how you can add formatting:

Headings

Add a title at the head of your text by using headings.

Markdown	Output
Heading ======	Heading
# Heading	Heading

 

Mentions

Tag a colleague by using the @ sign then typing in their name.

Markdown	Output
@

 

Emphasis

You can use bold, italic, and bold italic formatting to emphasize text.

Markdown	Output
**Bold**	Bold
__Bold__	Bold
*Italic*	Italic
_Italic_	Italic
***Bold and Italic***	Bold and Italic
___Bold and Italic___	Bold and Italic
__*Bold and Italic*__	Bold and Italic
**_Bold and Italic_**	Bold and Italic

 

Strikethrough

To add a strikethrough, add two tildes (~) before and after your text.

Markdown	Output
~~Sample Text~~	Sample Text

 

Emoji

Emoji are both fun and functional. They convey non-verbal emotions and can be used when words are simply not available. To add emoji to your messages, start with a colon (:) then type the emoji you’d like to use.

Markdown	Output
:smiley:	😃

For a full list of available emoji, click here.

Blockquote

Blockquotes specify a section that is quoted from another source. Use the blockquote formatting to cite a reference.

Markdown	Output
> This is a blockquote	This is a blockquote

 

Nested Blockquote

The nested blockquote format allows you to add a blockquote within a blockquote.

Markdown	Output
> This is a blockquote > >> This is a nested blockquote	This is a blockquote This is a nested blockquote

 

Lists

Lets you organize items into ordered and unordered lists.

Ordered Lists

Markdown	Output
1. First item 2. Second item 3. Third item 4. Fourth item	First item Second item Third item Fourth item
1. First item 1. Second item 1. Third item 1. Fourth item	First item Second item Third item Fourth item
1. First item 8. Second item 3. Third item 5. Fourth item	First item Second item Third item Fourth item
1. First item 2. Second item 3. Third item 1. Indented item 2. Indented item 4. Fourth item	First item Second item Third item Indented item Indented item Fourth item

 

Unordered Lists

Markdown	Output
– First item – Second item – Third item – Fourth item	First item Second item Third item Fourth item
* First item * Second item * Third item * Fourth item	First item Second item Third item Fourth item
+ First item + Second item + Third item + Fourth item	First item Second item Third item Fourth item
– First item – Second item – Third item – Indented item – Indented item – Fourth item	First item Second item Third item Indented item Indented item Fourth item

 

Code Blocks

Using the code block format allows you to emphasize text that is a line (or multiple lines) of code, e.g. HTML, Javascript, etc.

Markdown	Output
`this is a code block`

 

Links

Links allow you to add a hyperlink to your message which will redirect users to a specific web address. To create a link, enclose the link text in brackets (e.g., [Hubstaff.com]) and then follow it immediately with the URL in parentheses.

Markdown	Output
[Hubstaff.com](https://hubstaff.com)	Hubstaff.com

 

Link Titles

Adding link titles will display a tooltip with the URL title when hovering over the link. Hover over the output link to see the tooltip in this example:

Markdown	Output
[Hubstaff.com](https://hubstaff.com “Spend less time tracking and more time growing”)	Hubstaff.com

 

URLs and Email Addresses

Adding angled brackets before and after your website or email addresses will format them as hyperlinks.

Markdown	Output
<https://hubstaff.com> <support@hubstaff.com>	https://hubstaff.com/ support@hubstaff.com

 

Images

You can add images with the following information:

1. Alt text – the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. (Example:![This is a circuit board!])
2. Image URL – the web address/source of the image. This must be enclosed in parentheses. (Example: https://upload.wikimedia.org/wikipedia/commons/8/89/Computer_Circuit_Board_MOD_45153622.jpg)
3. Image title – appears as a tooltip when hovering over an image. (Example: “Circuit Board”)

Markdown	Output


 

Linked Images

You can add images with links with the following information:

1. Alt text – the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. (Example:![This is a circuit board!])
2. Image URL – the web address/source of the image. This must be enclosed in parentheses. (Example: https://upload.wikimedia.org/wikipedia/commons/8/89/Computer_Circuit_Board_MOD_45153622.jpg)
3. Image title – appears as a tooltip when hovering over an image. (Example: “Circuit Board”)
4. Link – add a link to your image to redirect users to a web address. (Example: (https://commons.wikimedia.org/wiki/File:Computer_Circuit_Board_MOD_45153622.jpg#file))

Markdown	Output
[](https://commons.wikimedia.org/wiki/File:Computer_Circuit_Board_MOD_45153622.jpg#file)

 

Horizontal rule

To create a horizontal rule, use three or more asterisks (***), dashes (—), or underscores (___) on a line by themselves.

Markdown	Output
1st line of text *** 2nd line of text	1st line of text 2nd line of text