diff --git a/markdown_test.md b/markdown_test.md index 7b7fcc8..eb6824b 100644 --- a/markdown_test.md +++ b/markdown_test.md @@ -2,7 +2,7 @@ title: Trying markdown features description: published: 1 -date: 2024-01-28T19:10:27.079Z +date: 2024-02-16T19:41:29.074Z tags: editor: markdown dateCreated: 2024-01-28T19:10:27.079Z @@ -212,6 +212,134 @@ Using the syntax `- [ ]` or a `- [x]`. +## Images + +### 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 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 ![Keyboard Keys](/assets/ui/ui-markdown-kbd.png =x30){.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