Tutorial

Text Format

Make the following text bold:

Select the text.
You have different options:
1. Editor toolbar: Click the
  button.
2. Keyboard shortcut: Press Ctrl+B on the keyboard.
3. Markdown shortcut: Surround the text by ** or __ delimiters.
  For example: **This is a bold text**.

This is a bold text

Make the following text italic:

Select the text.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+I on the keyboard.
3. Markdown shortcut: Surround the text by * or _ delimiters.
  For example: *This text is italicized*.

This text is italicized

Underline the following text:

Select the text.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+U on the keyboard.

This text is underlined

Highlight the following text:

Select the text.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+Shift+H on the keyboard.

This text is highlighted

Format the following text inline code:

Select the text.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+E on the keyboard.
3. Markdown shortcut: Surround the text by ` delimiter.
  For example: `console.log("Hello World");`.

console.log("Hello World");

Format the following text with a ~~strikethrough:~~

Select the text.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+Shift +S on the keyboard.
3. Markdown shortcut: Surround the text by ~~ delimiter.
  For example: ~~This text has a strikethrough~~

This text has a strikethrough

Make the word subscript a subscript:

Select the word.
Click the
button in the toolbar.

This text has a subscript

Make the word superscript a superscript:

Select the word.
Click the
button in the toolbar.

This text has a superscript

Make the word Google a link to google.com:

Select the word.
You have different options:
1. Editor toolbar: Click the
  button in the toolbar.
2. Keyboard shortcut: Press Ctrl+K on the keyboard.
Type the URL and click confirm.

This text has a link to Google

Change the font color of the following text:

Select the text.
Click the
button in the toolbar.
Select a text color.

This text has a different font color

Change the background color of the following text:

Select the text.
Click the
button in the toolbar.
Select a background color.

This text has a different background color

Font Style

Change the font size of the following text to 20px

Select the text.
Locate the font size selector
in the toolbar.
Can't find it?
On smaller screens it is moved inside the font family selector
to save screen space.
You have different options:
1. Edit the number manually or by pressing ArrowUp or ArrowDown on the keyboard.
2. Use the
  and
  to cycle through popular font sizes.

This text has a 20px font size

Change the font family of the following text to KaTeX:

Select the text.
Select KaTeX from the font family menu
in the toolbar.

x+5y=2

Block Type

Make the following text a level 3 Heading:

Click on the text to select its block.
You have different options:
1. Editor toolbar: Select Heading 3 from the block type menu
  in the toolbar.
2. Markdown shortcut: Begin the text with ### delimiter.
  For example: ### This is a level 3 heading.

This is a level 3 heading

Make the following items a Bulleted List:

Select the text.
You have different options:
1. Editor toolbar: Select Bullet List from the block type menu
  in the toolbar.
2. Markdown shortcut: Begin the text with - or * delimiter.
  For example:
  - Item 1
  - Item 2
  - Item 3

item 1

item 2

item 3

Format the following text as a Quote:

Select the text.
You have different options:
1. Editor toolbar: Select Quote from the block type menu
  in the toolbar.
2. Markdown shortcut: Begin the text with > delimiter.
  For example: > Nature is written in mathematical language.

Nature is written in mathematical language.

Make the following text a Code Block:

Select the text.
You have different options:
1. Editor toolbar: Select CodeBlock from the block type menu
  in the toolbar.
2. Markdown shortcut: Begin the text with ``` delimiter.
  For example:
```typescript
let randomNumber = Math.floor(Math.random() * 100) + 1;
console.log(randomNumber);
```

let randomNumber = Math.floor(Math.random() * 100) + 1;

console.log(randomNumber);

Text Alignment

Center the following text:

Click on the text to select its block.
You have different options:
1. Editor toolbar: Select Center Align from the text align menu
  in the toolbar.
2. Component picker: Type /center and press Enter.

This is a centered block of text

Right align the following text:

Click on the text to select its block.
You have different options:
1. Editor toolbar: Select Right Align from the text align menu
  in the toolbar.
2. Component picker: Type /right and press Enter.

Mansoura University

Indent the following text by 1 level:

Click on the text to select its block.
You have different options:
1. Editor toolbar: Select Indent from the text align menu
  in the toolbar.
2. Keyboard shortcut: Press Tab on the keyboard at the start of the line.

This text is indented

Insert Menu

Insert a Divider after this line:

Click the empty line below.
You have different options:
1. Editor toolbar: Select Divider from the insert menu
  in the toolbar.
2. Component picker: Type /divider and press Enter.
3. Markdown shortcut: Type --- on an empty line.

Insert a Math field after this line:

Click the empty line below.
You have different options:
1. Editor toolbar: Select Math from the insert menu
  in the toolbar.
2. Component picker: Type /math and press Enter.
3. Markdown shortcut: Type $$ on an empty line.
  You can also type $x^2+5x+6=0$ to specify an initial value.

Insert a 2D graph after this line:

Click the empty line below.
You have different options:
1. Editor toolbar: Select Graph from the insert menu
  in the toolbar.
2. Component picker: Type /graph and press Enter.
Type a function, for example: sin(x+π), and click Insert.

Insert a Sketch after this line

Click the empty line below.
You have different options:
1. Editor toolbar: Select Sketch from the insert menu
  in the toolbar.
2. Component picker: Type /sketch and press Enter.
Draw anything and click Insert.

Insert an Image after this line

Click the empty line below.
You have different options:
1. Editor toolbar: Select Image from the insert menu
  in the toolbar.
2. Component picker: Type /img and press Enter.
3. Markdown shortcut: Type ![alt text](image.jpg) to insert an image.
  For example: Type ![Math Editor Logo](https://matheditor.me/logo.svg).

Insert a Table after this line

Click the empty line below.
You have different options:
1. Editor toolbar: Select Table from the insert menu
  in the toolbar.
2. Component picker: Type /3x3 and press Enter.
3. Markdown shortcut: Type |Cell| to insert an image.

Insert a Sticky Note aside the following text

Click the text below.
You have different options:
1. Editor toolbar: Select Note from the insert menu
  in the toolbar.
2. Component picker: Type /note and press Enter.

This text has a sticky note floating by its side.