Formatting Text: Markdown, Liquid
Kickplan uses the Liquid templating language to add data to your customer-related templates (email, invoices, etc.).
Liquid is a flexible, safe language used in many different environments and was originally created for use in Shopify stores.
Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.
Input
Output
In this case, Liquid is rendering the content of the title property of the page object, which contains the text Introduction.
Tags create the logic and control flow for templates. The curly brace percentage delimiters {% and %} and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.
Input
Output
For full documentation on the features and syntax of Liquid, please review the docs at https://shopify.github.io/liquid/
Kickplan markdown matches GitHub-flavored markdown very closely.
To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.
You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text.
Style | Syntax | Keyboard shortcut | Example | Output |
|---|---|---|---|---|
Bold | ** ** or __ __ | Command+B (Mac) or Ctrl+B (Windows/Linux) | **This is bold text** | This is bold text |
Italic | * * or _ _ | Command+I (Mac) or Ctrl+I (Windows/Linux) | _This text is italicized_ | This text is italicized |
Strikethrough | ~~ ~~ | None | ~~This was mistaken text~~ |
|
Bold and nested italic | ** ** and _ _ | None | **This text is _extremely_ important** | This text is extremely important |
All bold and italic | *** *** | None | ***All this text is important*** | All this text is important |
Subscript | <sub> </sub> | None | This is a <sub>subscript</sub> text | This is a subscript text |
Superscript | <sup> </sup> | None | This is a <sup>superscript</sup> text | This is a superscript text |
You can quote text with a >.
Quoted text is indented, with a different type color.
Each table row consists of cells containing arbitrary text separated by pipes (|). A leading and trailing pipe is also recommended for clarity of reading. Spaces between pipes and cell content are trimmed. Block-level elements cannot be inserted in a table.
The delimiter row consists of cells whose only content are hyphens (-), and optionally, a leading or trailing colon (:), or both, to indicate left, right, or center alignment respectively.
Cells in one column don’t need to match length, though it’s easier to read if they are. Likewise, use of leading and trailing pipes may be inconsistent:
Include a pipe in a cell’s content by escaping it, including inside other inline spans:
The header row must match the delimiter row in the number of cells. If not, a table will not be recognized:
You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. You can also press the Command+E (Mac) or Ctrl+E (Windows/Linux) keyboard shortcut to insert the backticks for a code block within a line of Markdown.
a line of code
To format code or text into its own distinct block, use triple backticks.
In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.
Here are the currently supported color models.
Color | Syntax | Example | Output |
|---|---|---|---|
HEX | `#RRGGBB` | `#0969DA` | |
RGB | `rgb(R,G,B)` | `rgb(9, 105, 218)` | |
HSL | `hsl(H,S,L)` | `hsl(212, 92%, 45%)` | |
- A supported color model cannot have any leading or trailing spaces within the backticks.
- The visualization of the color is only supported in issues, pull requests, and discussions.
You can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ). You can also use the keyboard shortcut Command+K to create a link. When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.
You can also create a Markdown hyperlink by highlighting the text and using the keyboard shortcut Command+V. If you'd like to replace the text with the link, use the keyboard shortcut Command+Shift+V.
You can display an image by adding ! and wrapping the alt text in [ ]. Alt text is a short text equivalent of the information in the image. Then, wrap the link for the image in parentheses ().
You can make an unordered list by preceding one or more lines of text with -, *, or +.
To order your list, precede each line with a number.
You can create a nested list by indenting one or more list items below another item.
To create a nested list, you can align your list visually. Type space characters in front of your nested list item until the list marker character (- or *) lies directly below the first character of the text in the item above it.
To create a task list, preface list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].
If a task list item description begins with a parenthesis, you'll need to escape it with \:
- [ ] \(Optional) Open a followup issue
