225 lines
3.8 KiB
Markdown
225 lines
3.8 KiB
Markdown
---
|
|
title: Trying markdown features
|
|
description:
|
|
published: 1
|
|
date: 2024-01-28T19:10:27.079Z
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Source 2
|
|
https://spec.commonmark.org/0.30/
|
|
|
|
|
|
|
|
|
|
|
|
|