Rich Text Editor
Formatting enhances the clarity and presentation of written language. YouTrack gives you two modes for formatting text in a rich text editor, Visual and Markdown.
YouTrack remembers which mode you were last using when editing an issue, article, or posting a comment. If you prefer one mode over the other, you're never forced to switch.
The rich text editor is available anywhere you have the ability to apply formatting to text input, including issue descriptions, formatted text fields, comments, work item descriptions, as well as articles and their comments in the knowledge base.
Formatting is not available in fields that store plain text, like issue summaries, article titles, and custom fields that store data as a string type.
Visual Mode
The first mode is a "what you see is what you get" editing experience. When Visual mode is enabled, you can use the formatting toolbar to apply various styles to selected text or insert elements into the editor at the current position of your cursor.
The major advantage of working with Visual mode is that you don't have to remember which sequences of special characters are used to format text like you do with Markdown.
For a list of formatting options available in this mode, see Text Formatting Toolbar.
Markdown Mode
The second mode lets you format text as you type using Markdown. Markdown is a lightweight markup language that is used to apply formatting to plain text. To learn how to format text using Markdown in YouTrack, see Markdown Syntax.
In Markdown mode, you always see the content written in plain text. However, the options that can be used to format text in WYSIWIG mode are still available. When you click a formatting button in the toolbar, the corresponding Markdown characters are inserted at the current cursor position.
If you're not familiar with Markdown syntax, it may be hard to predict what your text will look like when saved. YouTrack Classic shows preview panels for text inputs in Markdown mode, but YouTrack Lite does not. For a quick preview that shows you what the content will look like when saved, you can switch to Visual mode whenever you want. You can continue to edit the content in either mode according to your personal preference.
One of the primary advantages of Markdown over visual mode is that all the available formatting options are available using keyboard input. This means you never have to use a pointer to select formatting options from a toolbar.
Text Formatting Toolbar
The text formatting toolbar is visible in both Visual and Markdown modes.
In Visual mode, the formatting option in the toolbar is immediately applied to the selected text.
In Markdown mode, the corresponding markup is applied to the selection. The actual formatting that will be applied to the selection when the text is saved or published is shown as a preview. Previews are only shown for issue descriptions, formatted text fields, and comments in YouTrack Classic.
Headings
To apply a heading style, select one of these options from the paragraph formatting menu.
Option | Description |
|---|---|
Heading 1 | Sets the current line of text as a first-level heading. |
Heading 2 | Sets the current line of text as a second-level heading. |
Heading 3 | Sets the current line of text as a third-level heading. |
Lines that are not marked as heading are shown as Normal text.
Character Formatting
You can apply character formatting to inline text with the following options in the text formatting toolbar.
Option | Description |
|---|---|
Bold | Sets the current selection of characters in a boldface font. |
Italic | Sets the current selection of characters in an italic font. |
Strikethrough | Sets the current selection of characters with a horizontal line through the center. |
Code | Sets the current selection in a monospace font on a light background. This formatting is intended to indicate that the text is a short fragment of computer code. |
Text Colors and Highlights
You can set color to a text fragment or its background. Currently, available colors are gray, blue, red, orange, and green.
Select the text you want to color and then, select one of the options to apply the coloring.
Option | Description |
|---|---|
Text color | Colors the text with the selected color. |
Highlight color | Highlights the text background with the selected color. |
Plain text | Removes the coloring from the text. |
YouTrack also shows you the last used option so that you can be sure your text is formatted consistently.
Block Quotes
Use block quotes to call special attention to a quote from another source. You can apply character formatting to inline text inside the quoted block.
To set text as a quote block, click the Quote button in the formatting toolbar.
Links
YouTrack is a web application, which means you can add links to other content available over the internet.
To add a link to a target page in YouTrack:
Paste a URL into the rich text editor. The address is automatically formatted as a clickable link.
Select the word or phrase that you want to set as the link text, then paste the URL from your clipboard. The selection is automatically transformed into the text for the link to the target page.
Alternatively, you can select a word or phrase, then click the Link button in the formatting toolbar.
Paste the target URL into the input field, then click the Save link button.
When you select the URL or link text in the rich text editor, you see the option to edit or remove the link.
Links to YouTrack Issues
A sequence of characters that matches an existing issue ID is automatically parsed and transformed into a link to the corresponding issue.
Links to Knowledge Base Articles
A sequence of characters that matches an existing article ID is automatically parsed and transformed into a link to the corresponding article in the knowledge base. When users move the pointer over the link, a custom tooltip displays additional information about the article, including its title, author, and creation date.
User Mentions
User mentions are also set as links. When you enter the @, YouTrack suggests users whose usernames match the input that follows. When you complete the selected user or enter a valid username, the @mention is replaced with the user's full name and set as a link.
Lists
You can format one or more consecutive lines of text as a list. The following options are available from the formatting toolbar:
Option | Description |
|---|---|
Bulleted list | Formats the current paragraph as a list item that starts with a bullet. This draws attention to the list item without implying that it follows a specific order. To nest a list item under the item that precedes it, press the Tab key. |
Numbered list | Formats the current paragraph as a list item that starts with a number. When applied to multiple paragraphs at once, the numbering for each paragraph is sequential. To nest a list item under the item that precedes it, press the Tab key. |
Checklist | Formats the current paragraph as a checklist item. Checklists begin each line with a checkbox that can be selected and deselected. These checkboxes are meant to indicate whether the corresponding activity has been completed or not. |
Code Blocks
You can format blocks of text in a monospaced font to make it easier to identify and read as code.
To format a code block in Visual mode, click the Code block button in the formatting toolbar, then type or paste your content into the highlighted area.
Tables
Tables are a great tool for adding structure to your content. To insert a table into the editor at the current cursor position, click the Table button in the formatting toolbar.
The first row is always formatted as a header for the table.
Various controls in and around the table let you add and insert rows and columns, delete rows and columns, clear text from the selected cell, and remove the table completely.
Images
Images can convey information that words alone cannot describe. To insert an image in the rich text editor:
Paste an image file from your clipboard.
To upload an image from your local directory, click the Files, images, or documents button in the formatting toolbar, then browse to select the target file.
To insert a reference to an image that is already attached to the issue or article, switch to the Attached Files tab, and select the file or files that you want to embed in your content.
When you insert an image into an issue description, article, or comment in Visual editing mode, you can resize it directly in the editor. Drag the bar to the right of the image to increase or decrease its size.
File Attachments
In addition to images, you can add links to any file that’s attached to an issue. Links that reference images open the file directly in the browser. For all other file types, the link lets the user download a copy of the file to their local machine.
To add a link to a file attachment in an issue, article, or comment:
Click the Files, images, or documents button in the formatting toolbar.
Switch to the Attached Files tab.
Select the file or files that you want to add links to.
Click the Embed file button.
Embedded Videos
Using the syntax for image attachments, you can embed a video file that is attached to the issue. The video player is shown inline with the surrounding text. You can play the video directly in the embedded player.
To embed a video file in an issue, article, or comment:
Click the Files, images, or documents button in the formatting toolbar.
Switch to the Attached Files tab.
Select the file that you want to embed into your content.
Click the Embed file button.
This functionality is only available for files in MPEG-4, MOV, Ogg, and WebM format.
LaTeX Mathematical Notation
When you have a mathematical formula formatted in LaTeX, and you need to show it in an issue or an article, you can put it into a code block and use the syntax highlighting menu to show the formula as LaTeX or Plain LaTeX. YouTrack recognizes the LaTeX markup and renders the formula.
YouTrack's implementation supports most environments for different types of mathematical notation and structures, including align, equation, gather, array, and matrix. It also supports older notation that uses the double dollar sign ($$) to denote display math mode. In display math mode, equations, formulas, or mathematical expressions are displayed on separate lines in the center of the page.
When you edit an issue in YouTrack Classic, you can see the rendered formula in the preview. When you save your changes, the issue displays the rendered output.
When you edit an article or an issue in YouTrack Lite, you can see a preview of the rendered formula in Visual mode.
YouTrack uses the KaTeX library for processing LaTeX formulas. For the full list of supported symbols and functions, see the library reference.
Previews for Hexadecimal Web Colors
If you enter a reference to a hexadecimal number that represents a color in HTML, CSS, SVG, and other computing applications, YouTrack displays the corresponding color after the hex value.
YouTrack recognizes three, six, and eight-digit hex notation. For example, #09C, #0099CC, or #0099CCAA.
