WikiJS/markdown_test.md

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

Header

Your content here

Source 1

https://docs.requarks.io/en/editors/markdown

Blockquotes

Tab

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

> 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

> 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

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
// some code here
```

Refer to the reference list of about 185 supported programming languages.

python code:
// some code here

Emojis

Tab

Usage

Using the syntax :identifier:

See the Emoji Cheat Sheet for the full list of possible options.

Examples

:apple:

Can be also be used :fire: inline

🍎

Can also be used 🔥 inline.

Table

Tab

Usage

Using the syntax:

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

Examples

| 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:

| 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

Usage

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

Examples

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

• Checked task item
• Another checked task item
• Unchecked task item

Images

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

Tab

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

![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

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

Lorem `ipsum` dolor

Lorem ipsum dolor

Italic

Tab

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

Lorem *ipsum* dolor

Lorem ipsum dolor

Keyboard Keys

Tab

Usage

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

Shortcuts

• By selecting text, then clicking the {.radius-4} button in the toolbar.

Examples

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

Lorem ipsum dolor CTRL + C

Links

Tab

Usage

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

Shortcuts

• Using the Link tool in the left toolbar.

Examples

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

Consectetur [adipiscing](/install/requirements) elit

Lorem ipsum

Consectetur adipiscing elit

Source 2

https://spec.commonmark.org/0.30/