---
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 {.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
```
```
### Tab {.tabset}
#### Usage
Using the syntax ``.
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
Consectetur  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:
```
```
You can also omit one of the values to automatically keep the image ratio:
```
```
It's also possible to use other units, like %. Useful when you need the image to take all the available space:
```
```
## Inline Code
### Tab {.tabset}
#### Usage
Using a **backtick** symbol before and after the text selection.
#### Shortcuts
- By selecting text, then clicking the {.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 {.radius-4} button in the toolbar.
- By selecting text, then pressing CTRL + I
#### Examples
```js
Lorem *ipsum* dolor
```
Lorem *ipsum* dolor
## Keyboard Keys
### Tab {.tabset}
#### Usage
Using `` before and `` after the text selection.
#### Shortcuts
- By selecting text, then clicking the {.radius-4} button in the toolbar.
#### Examples
```html
Lorem ipsum dolor CTRL + C
```
Lorem ipsum dolor CTRL + C
## 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/