Markdown

The main way to format your texts is to use the Markdown syntax. Note, that Omni doesn’t support everything in Markdown, but it does support the following:

Headings

To create a heading, place hash characters in front of the word or phrase.

The usual heading level is level 2, so you add two hash characters:

  • ## Heading level 2

You can also specify level 3 and 4 headings, which may be useful if you want a heading without an entry in the table of contents. However, this doesn’t find much use. There also isn’t much difference visually between 2 and 3, and as such 3 is hardly ever used.

You can also use bold text as a heading (see next section).

Warning

Never use a level 1 heading (#). This is the heading level of the title of the calculator article.

Bold

To create bold text, surround it with two asterisks, like this:

  • **bold text** → bold text

Italic

To italicize text, surround the text with a single asterisk or underscore character, like this:

  • *italicized text* → italicized text

  • _italicized text_ → italicized text

Tip

You can italicize the middle of a word, but only by using the asterisk method:

  • A*cat*meow → Acatmeow

Bold and italic

You can combine the two syntaxes and use three asterisks around text you wish to bold and italicize:

  • This text is ***really important***. → This text is really important.

  • This text is ___really important___. → This text is really important.

  • This text is __*really important*__. → This text is really important.

  • This text is **_really important_**. → This text is really important.

  • This text is really***very***important. → This text is reallyveryimportant.

Note that for the last example, only asterisks will work, not underscores.

Blockquotes

To create a blockquote, add a > in front of a paragraph.

  • > This is a blockquote paragraph.

Currently, the style of the website means blockquotes are only indented. This might change in the future though, so if you just want to indent text to include it as part of a list item, use 4 spaces to indent instead.

Lists

Lists can either be ordered (numbered) or unordered (bullet point list).

Ordered lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

Markdown

Rendered 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

For the last example, use 4 spaces to indent the second level of an ordered list.

Ordered list best practices

While you can define an ordered list using a parenthesis instead of a period, it’s not supported by all Markdown libraries. So in case Omni ever change the Markdown library, use period only.

✅ Do this

❌ Don’t do this

 
1. First item
2. Second item
3. Third item
4. Fourth item

1) First item
2) Second item
3) Third item
4) Fourth item

Unordered lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

Markdown

Rendered 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

Warning

Don’t mix and match delimiters, as it won’t work. Choose one (* is preferred) and stick to it.

Starting unordered list items with numbers

If you need to start an item with a number and a period, you can escape the period with the backslash (\) character.

Markdown

Rendered output

 
* 1968\. A great year!
* I think 1969 was second best.

  • 1968. A great year!

  • I think 1969 was second best.

Adding elements to list items

To add another element to a list item while preserving the continuity of the list, indent the element by four spaces or one tab. Here are some examples.

Paragraphs

* This is the first list item.
* Here's the second list item.

    I need to add another paragraph below the second list item.

* And here's the third list item.

This will be rendered as:

  • This is the first list item.

  • Here’s the second list item.

    I need to add another paragraph below the second list item.

  • And here’s the third list item.

Blockquotes

* This is the first list item.
* Here's the second list item.

    > A blockquote would look great below the second list item.

* And here's the third list item.

Currently, the Omni website style will just add an indent when using a blockquote. So it will look like this:

example of blockquote added to a list item

However, using a blockquote to only indent text may look different in the future, so use with caution.

Code blocks

To place a code block as part of a list item, indent them with eight spaces or two tabs.

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

Here’s how that is currently rendered:

example of code block added to a list item

Images

Indent the image code with 4 spaces or a tab:

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png)

3.  Close the file.

Which will render as:

example of an image added to a list item

Lists

You can nest an unordered list in an ordered list, or vice versa.

1. First item
2. Second item
3. Third item
    * Indented item
    * Indented item
4. Fourth item

Which will be rendered like this:

  1. First item

  2. Second item

  3. Third item

    • Indented item

    • Indented item

  4. Fourth item

Code

To write as code a word or equation within your text, surround the code with backticks (`).

Where `c` is the speed of light in vacuum - 299,792.46 km/s

Which renders as:

Where c is the speed of light in vacuum - 299,792.46 km/s

Escaping backticks

If you need to write backtick characters in your code, use double backticks.

``Use `code` in your calculator text.``

Which will render as:

Use `code` in your calculator text.

Code blocks

The Omni website doesn’t really support code blocks, but here’s how to do it.

The best way is to use triple backticks. For example:

```
<html>
  <head>
  </head>
</html>
```

This will render like this:

example of a codeblock in Markdown

You can also indent by at least 4 spaces or a tab to create a codeblock.

Horizontal rules

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

***

---

___

Will render as:

Warning

Make sure you have blank lines before and after the horizontal rule. Otherwise, if you use --- as the intend to create a horizontal rule, you will make the line above a level 2 heading.

✅ Do this

❌ Don’t do this

 
Try to put a blank line before...

---

...and after a horizontal rule.

Without blank lines, this would be a heading.
---
Don't do this!

Images

You can add an image using the following syntax:

  • ![alt text](URL to image "title")

Let’s look at an example:

![Kraków - main market square](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Krakow_Rynek_Glowny_panorama_2.jpg/640px-Krakow_Rynek_Glowny_panorama_2.jpg "Panorama of Kraków's main market square")

This will render as:

Kraków - main market square

The HTML generated is:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Krakow_Rynek_Glowny_panorama_2.jpg/640px-Krakow_Rynek_Glowny_panorama_2.jpg" alt="Kraków - main market square" title="Panorama of Kraków's main market square">

Linking on images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![Egyptian pyramids](https://uploads-cdn.omnicalculator.com/images/alien_pyramids.jpg "Egyptian pyramids - nice!")](https://commons.wikimedia.org/wiki/File:All_Gizah_Pyramids.jpg)

Egyptian pyramids

And here is the HTML that is generated:

<a href="https://commons.wikimedia.org/wiki/File:All_Gizah_Pyramids.jpg">
  <img src="https://uploads-cdn.omnicalculator.com/images/alien_pyramids.jpg" alt="Egyptian pyramids" title="Egyptian pyramids - nice!">
</a>

Escaping characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash () in front of the character.

Which would render as:

* Without the backslash, this would be a bullet in an unordered list.

Characters You Can Escape

You can use a backslash to escape the following characters.

Character

Name

\

Backslash

( ` )

Backtick (in parentheses)

*

Asterisk

_

Underscore

{ }

Curly braces

[ ]

Brackets

< >

Angle brackets

( )

Curly braces

#

Pound sign (hash symbol)

+

Plus sign

-

Minus sign (hyphen)

.

Dot

!

Exclamation mark

|

Pipe

HTML

At the moment, you can use raw HTML in your calculator texts (though this is due to change in the not too distance future).

For images, HTML is the preferred method of adding them.

Use blank lines to separate block-level HTML elements like <div>, <table>, <pre>, and <p> from the surrounding content.

Warning

You can’t use Markdown syntax inside block-level HTML tags. For example, <p>italic and **bold**</p> won’t work.