Formatting text and inline images in Hubstaff Tasks

formatting messages images hubstaff tasks

Hubstaff Tasks provides you options to make your text stand out. Formatting your text enhances the visual appeal and adds clarity to your comments and task 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

With the WYSIWYG (What You See Is What You Get) Editor, you can format your text in the comments section.

hubstaff WYSIWYG text editor

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

hubstaff markdown sample

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
@ hubstaff tasks mention

 

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 Blockquotes

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
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
1. Second item
1. Third item
1. Fourth item
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
8. Second item
3. Third item
5. Fourth item
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
2. Second item
3. Third item
1. Indented item
2. Indented item
4. Fourth item
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. 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` hubstaff code block formatting

 

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>

<[email protected]>

https://hubstaff.com/

[email protected]

 

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
![This is a circuit board!](https://upload.wikimedia.org/wikipedia/commons/8/89/Computer_Circuit_Board_MOD_45153622.jpg “Circuit Board”) sample image

 

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
[![This is a circuit board!](https://upload.wikimedia.org/wikipedia/commons/8/89/Computer_Circuit_Board_MOD_45153622.jpg “Circuit Board”)](https://commons.wikimedia.org/wiki/File:Computer_Circuit_Board_MOD_45153622.jpg#file) sample image

 

Horizontal rules

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

 

  • Was this Helpful ?
  • Yes   No
  • Was this Helpful ?
  • Yes   No