Working with Markdown in Engee

Markdown, a lightweight markup language designed for writing structured text, is used for markup in Engee. It is used in annotations, script editor text cells, .md files, and anywhere else in Engee where markdown is available when writing text.

Engee uses the extended Markdown dialect, which supports extensions not present in regular markup in addition to standard elements (see Engee for details). Extended syntax).

The standard Markdown elements are visually separated from the extended ones by a vertical separator in the toolbar of the script editor’s text cell:

script editor text x

Basic syntax

Let’s look at the basic syntax of the Markdown language:

Headings

Headings - use # to denote the first-level heading (the largest heading). Use ## for the second level heading, and so on, up to the sixth level:

# First level heading

## Second-level heading

...

###### Sixth-level heading

Text Selection

Text Selection* - use * or _ to italicise text. Use * * * or _ _ to bold text. Use ~ ~ ~ for strikethrough text.

*Italic text*

**Bold text**

~~Strikethrough text~~

List.

Lists - use *, - or + to create an unordered list. Use numbers with a dot to create an ordered list.

* List item 1
* List item 2

1. List item 1
2. List item 2

Formula

After Engee switched to KaTeX, old scripts with LaTeX formulas without $ or $&dollar;$ may not display correctly. Make sure all formulas are wrapped in $ or $&dollar;$ , and if necessary, remove any extra escape characters (\) that may have been added automatically.

For more information and to implement more complex syntax, see. official KaTeX documentation.

Markdown Engee by default supports displaying LaTeX formulas using the KaTeX library.

For correct display, wrap the formula in $:

$…$ - for single line formulas, example:
```
 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ 
```

$&dollar;…$&dollar; - for multi-line formulas, example:

 $\frac{1}{\sigma \sqrt{2\pi}} \\ \cdot \exp\left( -\frac{(x - \mu)^2}{2\sigma^2} \right)$

Quote.

Quotes - use > to create quotes.

> Your quote.

Code.

Code - wrap text using a backward apostrophe (backtick) ` to insert single-line code. Use three backward apostrophes ( ` ` ` ` ) to insert multi-line code.

Example of `code` within text.

```
Multi-line
code
```

Links.

Links - use the [link text](URL) construct to create a hyperlink.

[Engee_documentation](https://engee.com/helpcenter/stable/)

Images

Images - use the standard construct ![alternative text](image URL) to insert an image. For example:

![Logo](https://astralinux.ru/upload/iblock/ef6/398hnxlwiur3hci7uozjn9n9wagwp1n6.png)

If you need to control the alignment and size of images, you can use HTML or CSS. Below are the different options with examples:

Option code Alignment type

Option code	Alignment type
`![Engee](https://engee.com/helpcenter/stable/_next/static/media/engee.png){width=100px}`	By default
`<p align="left"> <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png"> </p>`	Left edge
`<p align="center"> <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png"> </p>`	In the centre
`<p align="right"> <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png"> </p>`	Right edge
`<center> <img src="https://engee.com/helpcenter/stable/_next/static/media/engee.png" style="max-width: 100px;"> </center>`	Centred through `<center>
`![Engee](attachment:engee.png){.center style="display: block; margin: 0 auto; width: 100px;"}`	Centred via `.centre'

![Engee](https://engee.com/helpcenter/stable/_next/static/media/engee.png){width=100px}

By default

<p align="left">
  <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png">
</p>

Left edge

<p align="center">
  <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png">
</p>

In the centre

<p align="right">
  <img width="100px" src="https://engee.com/helpcenter/stable/_next/static/media/engee.png">
</p>

Right edge

<center>
  <img src="https://engee.com/helpcenter/stable/_next/static/media/engee.png"
       style="max-width: 100px;">
</center>

Centred through `<center>

![Engee](attachment:engee.png){.center style="display: block; margin: 0 auto; width: 100px;"}

Centred via `.centre'

markdown all images example

If you use local images via attachment:filename.png, they too support CSS styling, as in the last example in the table.

attachment: is a special reference to local files attached to the script editor. Such image insertion is supported in the interactive script formats ngscript and ipynb. To add an image as attachment:, simply drag and drop a file (e.g. engee.png) from the Engee file browser into a script editor cell - it will automatically become available as ![engee.png](attachment:engee.png) and will be visible in the preview.

Separators.

Horizontal dash - use three hyphens - - - - - or three asterisks * * * * * to insert a horizontal dash.

---
***

Tables.

Tables - use | and - to create tables.

| Heading 1 | Heading 2 |
| ----------- | ----------- |
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |

Or the alternative syntax offered in WYSIWYG:

#|
||

Title 1

|

Title 2

||
||

Cell 1

|

Cell 2

||
||

Cell 3

|

Cell 4

||
|#

Extended syntax

When working with extended markup, be sure to indent the content, leaving blank lines:

Correct

Incorrect

{% note info %}

This is a note.

{% endnote %}

{% note info %}
This is a note.
{% endnote %}

Note

A note (note) is a highlighted block that draws attention to the information it contains. Depending on the context, you can use different types of notes using the keywords info, tip, warning and alert:

For more information about working with notes

Type Purpose Example

Type	Purpose	Example
`info` (Note)	Additional information.	[source,markdown]. {% note info %} This is a note. {% endnote %}
`tip` (Tip).	Useful Tip.	`{% note tip %} This is advice. {% endnote %}`
`warning` (Important)	Warning about possible problems.	`{% note warning %} This is important information. {% endnote %}`
`alert` (Warning.)	Limitations or errors.	[source,markdown]. {% note alert %} This is a warning. {% endnote %}

info (Note)

Additional information.

[source,markdown].

{% note info %}

This is a note.

{% endnote %}

info markup

tip (Tip).

Useful Tip.

{% note tip %}

This is advice.

{% endnote %}

tip markup

warning (Important)

Warning about possible problems.

{% note warning %}

This is important information.

{% endnote %}

warning markup

alert (Warning.)

Limitations or errors.

[source,markdown].

{% note alert %}

This is a warning.

{% endnote %}

alert markup

You can also set a note with your own title or no title at all:

<!-- Note with its own title -->
{% note info "Your title" %}

This is a note with its own title.

{% endnote %}

<!-- Untitled note -->
{% note info "" %}

This is a note without a title.

{% endnote %}

admonition markup

Cuts (cut) - used to hide part of the content.

Read more about chunks

For example, you can hide additional information or long blocks of code:

{% cut “Cut title” %}

Content that will be displayed when clicked.

{% endcut %}

kat markup

Katy does not support the ability to expand an item by default.

Tabs (tabs) - used to switch between different sections without cluttering the page

More about tabs

Let’s consider an example of creating several tabs:

{% list tabs %}

- Tab name 1

  Tab text 1.

- Tab name 2

  Tab text 2.

{% endlist %}

tabs markup

You can also set the desired tab to open by default with the {selected} attribute:

{% list tabs %}

- Tab title 1

  Tab text 1.

- Tab title 2 {selected}

  This tab will be open by default.

{% endlist %}

Tabs can be synchronised using the group attribute:

{% list tabs group=instructions %}

- Python

  About python

- Java

  About java

{% endlist %}

{% list tabs group=instructions %}

- Python

  Duplicate python content

- Java

  Duplicate java content

{% endlist %}

tabs markup 1

The state of the tabs is retained when the page reloads.

Radio buttons (tabs radio) - work like tabs, but look like toggles.

For more information about radio buttons.

Let’s look at an example of creating a radio button:

{% list tabs radio %}

- Linux

  Instructions for Linux

- Windows

  Instructions for Windows

{% endlist %}

tabs radio 1

As with tabs, you can set the item selected by default with {selected}:

{% list tabs radio %}

- macOS

  Instruction

- Windows {selected}

  This item will be open by default.

{% endlist %}

With Markdown, you can embed videos from different platforms into Engee. Here’s how to do it:

For more about videos.

To embed a video from a supported video hosting service, follow the following format

@[hosting_name](id_video_or_link_to_it)

To do this:

Replace the hosting name with the platform name from the list: yandex, rutube, vk, youtube, vimeo, vine, osf, prezi.

Go to the video page and find the embed code (in the tag <iframe>) and copy the link from the src attribute without quotes:

<iframe src="https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>

Replace id_video_id_or_link_to_it with the link from the src attribute.

An example that will result in a video player from VK:

@[vk](https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1)

videos markup 2

Or if you need to embed a video from another hosting service, use the following format:

@[](https://files.kpm-ritm.ru/Engee_firststeps.mp4)

videos markup 1

HTML integration

Markdown Engee supports text-based HTML markup using tags. Let’s take a look at the most popular ones:

Markdown with HTML tags.

<strong> or <b> - tags are used to make text bold. <strong> is preferable to use in semantically relevant cases, when the text is really important.
```
<p>This text is highlighted using the <strong>strong tag</strong>, and this one using the <b>b tag</b>.</p>
```
<em> or <i> - tags are used to italicise text. As with bold tags, <em> is preferred in semantically relevant cases.
```
<p>This text is highlighted using the <em>em tag</em>, and this one using the <i>i tag</i>.</p>
```
<s> - tag is used to add strikethrough to text.
```
<p>This text is <s>crossed out</s>.</p>
```
<p> - tag is used to create a paragraph of text. Paragraphs are usually indented at the top and bottom.
```
<p>This text is in a paragraph.</p>
```
<h1> - <h6> - tags are used to create headings of different levels. Headings have different sizes and are usually intended to structure the page content.
```
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
```

<ul>, <ol>, <li> - tags are used to create unordered <ul> and ordered <ol> lists, and their elements <li>.

<ul>
  <li>First element of an unordered list</li>
  <li>Second element of an unordered list</li>
</ul>

<ol>
  <li>First element of an ordered list</li>
  <li>Second element of an ordered list</li>
</ol>

<img> - tag is used to insert images into the page.

<img src="https://astralinux.ru/upload/iblock/ef6/398hnxlwiur3hci7uozjn9n9wagwp1n6.png" alt="Engee logo">

<a> - tag is used to insert links.

<a href="https://engee.com/helpcenter/stable/">Engee documentation</a>

Working with Markdown in Engee

Basic syntax

Extended syntax

Note

HTML integration

Useful links