Markdown extensions

Markdown supports many extensions that adds other visual elements to text. In this page we describe the ones supported by Interactive Handouts.

Emojis

You can use emojis from the list https://github.com/caiyongji/emoji-list.

💕 😁 👽 🎶 🐹 🌐 ⏰

:two_hearts: :star: :grin: :alien: :notes: :v: :hamster: :globe_with_meridians: :alarm_clock:

Box elements

Box elements can be use to emphasize text and add interactivity to a handout. All follow the same syntax:

<Admonition title="Title goes here"> Content goes here </Admonition>

See examples of static box elements below.

Note

You can create different types of box:

  • note, example, warning, info, tip, danger

You only need to change type property.

Set the title

You can set the box title using the title property.

Nested boxes

A box inside a box is also possible.

This is a box without title.

Collapsible boxes

Collapsible boxes are also possible.

<Admonition title="Note" type="note">
  You can create different types of box:

  - note, example, warning, info, tip, danger

  You only need to change `type` property.
</Admonition>

<Admonition title="Set the title" type="example">
  You can set the box title using the `title` property.

  <Admonition title="Nested boxes" type="warning">
    A box inside a box is also possible.
  </Admonition>
</Admonition>

<Admonition type="danger">
  This is a box without title.
</Admonition>

<Admonition title="Collapsible boxes" type="info" collapsible collapsed>
  Collapsible boxes are also possible.
</Admonition>

Code and Syntax Highlighting

Inline code

Text surrounded by backticks (the character) is shown in monospaced font, like this.

Text surrounded by backticks (the character) is shown in monospaced font, `like this`.

Code blocks

Code blocks are started and ended by a line with three backticks. See examples below.

No highlight:

#include <stdio.h>
int main(void) {
  printf("Hello world!\n");
  return 0;
}

Code highlight:

#include <stdio.h>
int main(void) {
  printf("Hello world!\n");
  return 0;
}

No highlight:

```
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```

Code highlight:

```c
#include <stdio.h>
int main(void) {
printf("Hello world!\n");
return 0;
}
```

Tabs

Tabs can be used to provide another version of the same content.

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hello world!" <<TabItem std::endl;
  return 0;
}

<TabGroup>
  <TabItem label="C">
  ```c
  #include <stdio.h>

  int main(void) {
    printf("Hello world!\n");
    return 0;
  }
  ```
  </TabItem>

  <TabItem label="C++">
  ```cpp
  #include <iostream>

  int main(void) {
    std::cout << "Hello world!" <<TabItem std::endl;
    return 0;
  }
  ```
  </TabItem>
</TabGroup>