---
title: Trying markdown features
description: 
published: 1
date: 2024-02-16T19:47:13.767Z
tags: 
editor: markdown
dateCreated: 2024-01-28T19:10:27.079Z
---

# Header
Your content here

# Source 1
https://docs.requarks.io/en/editors/markdown

## Blockquotes

### Tab {.tabset}

#### Usage

Using a **greater-than** symbol, followed by a space, before each line of text.

#### Shortcuts
- By selecting text, then clicking the ![Blockquote](/assets/ui/ui-markdown-blockquotes.png =x30){.radius-4} button in the toolbar.

#### Examples

```js
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
```

> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit

#### Stylings

By adding a class on a separate line, after the blockquote, you can change the look of the blockquote. Note that these stylings are specific to Wiki.js and will fallback to standard blockquote styling in other applications.

- Blue: `is-info`
- Green: `is-success`
- Yellow: `is-warning`
- Red: `is-danger`

```css
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
{.is-info}
```

> This is a default unstyled blockquote.

> This is a `{.is-info}` blockquote.
{.is-info}

> This is a `{.is-success}` blockquote.
{.is-success}

> This is a `{.is-warning}` blockquote.
{.is-warning}

> This is a `{.is-danger}` blockquote.
{.is-danger}




## Code Blocks

### Tab {.tabset}

#### Usage

Using **triple backticks** symbols before and after the text selection, on dedicated lines.

#### Shortcuts
- Using the **Code Block** tool in the left toolbar.

#### Examples

````
```
function lorem (ipsum) {
	const dolor = 'consectetur adipiscing elit'
}
```
````

#### Syntax Highlighting

By default, a code block is rendered as plain preformatted text. It's however preferable to use syntax highlighting for programming code, allowing for easier readability. To specify the programming language used in the code block, simply add the language keyword right after the opening triple backticks:

````java
```java
// some code here
```
````

Refer to the [reference list](https://github.com/highlightjs/highlight.js#supported-languages) of about 185 supported programming languages.


````python
python code:
// some code here
````



## Emojis

### Tab {.tabset}

#### Usage

Using the syntax `:identifier:`

See the [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for the full list of possible options.

#### Examples

```markdown
:apple:

Can be also be used :fire: inline
```

:apple:

Can also be used :fire: inline.






## Table

### Tab {.tabset}

#### Usage

Using the syntax:

```md
| Header A1 | Header B1 | Header C1 |
|-----------|-----------|-----------|
| Cell A2   | Cell B2   | Cell C2   |
| Cell A3   | Cell B3   | Cell C3   |
...
```

#### Examples

```md
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Foo      | Bar      | Xyz      |
| Abc      | Def      | 123      |
```

will result in:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Foo      | Bar      | Xyz      |
| Abc      | Def      | 123      |

#### Stylings

By adding the class `dense` on a separate line, after the table, you can make the table use a smaller font and smaller padding. For example:

```md
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Foo      | Bar      | Xyz      |
| Abc      | Def      | 123      |
{.dense}
```

will result in:

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Foo      | Bar      | Xyz      |
| Abc      | Def      | 123      |
{.dense}


## Task Lists

### Tab {.tabset}

#### Usage

Using the syntax `- [ ]` or a `- [x]`.

#### Examples

```
- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item
```

- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item





## Images

```
![home_assistant_html_eeaf4fb9a08969e4.png](/pictures/home_assistant_html_eeaf4fb9a08969e4.png)
```


### Tab {.tabset}

#### Usage

Using the syntax `![Image alt text](Image source "Image title")`.

Image alt text - text that is displayed when the image could not be loaded
Image source - file path of image
Image title - is displayed when the user hovers over the picture

#### Shortcuts
- Using the **Assets** tool in the left toolbar.

#### Examples

```markdown
![Lorem ipsum](https://dolor.example.com/sit/amet.jpg "Lorem ipsum")

Consectetur ![adipiscing](/link/to/image.jpg) elit
```

#### Dimensions

Sometimes images are too large or maybe you want the image to fill up all the available space.

Simply at the dimensions at the end of the image path in the following format:

```
![Image](/link/to/image.jpg =100x50)
```

You can also omit one of the values to automatically keep the image ratio:

```
![Image](/link/to/image.jpg =100x)
![Image](/link/to/image.jpg =x50)
```

It's also possible to use other units, like %. Useful when you need the image to take all the available space:

```
![Image](/link/to/image.jpg =100%x)
```

## Inline Code

### Tab {.tabset}

#### Usage

Using a **backtick** symbol before and after the text selection.

#### Shortcuts
- By selecting text, then clicking the ![Inline Code](/assets/ui/ui-markdown-inlinecode.png =x30){.radius-4} button in the toolbar.

#### Examples

```js
Lorem `ipsum` dolor
```

Lorem `ipsum` dolor

## Italic

### Tab {.tabset}

#### Usage

Using a **single asterisk** symbol before and after the text selection.

#### Shortcuts
- By selecting text, then clicking the ![Italic](/assets/ui/ui-markdown-italic.png =x30){.radius-4} button in the toolbar.
- By selecting text, then pressing <kbd>CTRL</kbd> + <kbd>I</kbd>

#### Examples

```js
Lorem *ipsum* dolor
```

Lorem *ipsum* dolor

## Keyboard Keys

### Tab {.tabset}

#### Usage

Using `<kbd>` before and `</kbd>` after the text selection.

#### Shortcuts
- By selecting text, then clicking the ![Keyboard Keys](/assets/ui/ui-markdown-kbd.png =x30){.radius-4} button in the toolbar.

#### Examples

```html
Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd>
```

Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd>

## Links

### Tab {.tabset}

#### Usage

Using the syntax `[Link Text](Link Target)`.

#### Shortcuts
- Using the **Link** tool in the left toolbar.

#### Examples

```markdown
[Lorem ipsum](https://wiki.js.org/about)

Consectetur [adipiscing](/install/requirements) elit
```

[Lorem ipsum](https://wiki.js.org/about)

Consectetur [adipiscing](/install/requirements) elit




# Source 2
https://spec.commonmark.org/0.30/






