Added current state of different documents. Finished github copilot manual.
This commit is contained in:
parent
dd6024452d
commit
654db8f95c
18
coding/git-cheatsheet.md
Normal file
18
coding/git-cheatsheet.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Git Credentials speichern
|
||||
|
||||
```bash
|
||||
git config --global credential.helper store
|
||||
```
|
||||
|
||||
Anschließend werden bei erfolgreichen Logins an Remotes die Anmeldedaten in der Datei `~/.git-credentials` gespeichert.
|
||||
|
||||
```
|
||||
Warnung:
|
||||
Diese werden unverschlüsselt gespeichert.
|
||||
```
|
||||
|
||||
# Konfiguration
|
||||
```bash
|
||||
git config user.name "ghost"
|
||||
git config user.email "ma-koenig@gmx.net"
|
||||
```
|
||||
21
coding/rust-devtools.md
Normal file
21
coding/rust-devtools.md
Normal file
@ -0,0 +1,21 @@
|
||||
# Rustup Toolchain Installer
|
||||
```bash
|
||||
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
|
||||
```
|
||||
*Source: https://rustup.rs/*
|
||||
|
||||
# VSCode Extensions
|
||||
- rust-analyzer
|
||||
- Even Better TOML
|
||||
|
||||
#Dioxus
|
||||
|
||||
## Dioxus-CLI installieren
|
||||
```bash
|
||||
cargo install dioxus-cli
|
||||
```
|
||||
|
||||
## Web-Target installieren
|
||||
```bash
|
||||
rustup target add wasm32-unknown-unknown
|
||||
```
|
||||
35
coding/sandboxed-dev-environment.md
Normal file
35
coding/sandboxed-dev-environment.md
Normal file
@ -0,0 +1,35 @@
|
||||
# Einrichtung einer containerisierten Entwicklungsumgebung am Beispiel von VS Code und PyCharm
|
||||
|
||||
Diese Anleitung geht von einer unveränderlichen Linux Distribution wie Fedora Atomic Desktops aus. In dieser ist der Einsatz isolierter Software bereits inhärent und Best Practice, die Entwicklungsumgebung vom Rest des Betriebssystems zu isolieren hat aber auch in klassischen Distributionen einige Vorteile:
|
||||
|
||||
- Software Stack wird klar vom Rest des Systems getrennt. Hierdurch wird das Basissystem nicht mit der Vielzahl an Paketen belastet welche unter Umständen auch zu Konflikten führen können (z.B. verschiedene Python Versionen)
|
||||
- Die Entwicklungsumgebung ist wiederrum nicht durch die restlichen Pakete des Basissystems beeinflusst und damit einfach reproduzierbar.
|
||||
|
||||
|
||||
## Komponenten
|
||||
|
||||
Die Softwarestack wird hier am Beispiel einer Python Entwicklungsumgebung demonstriert. Hierbei stellen wir die beiden verbreiteten IDEs `Visual Studio Code` und `PyCharm Community` gegenüber. Das Ziel ist die vollständige Einrichtung für ein Python Projekt zu demonstrieren, daher werden im Anschluss auch Python Pakete installiert um dies zu demonstrieren. Diese sind für die Einrichtung anderer Sprachen natürlich nicht erfolderlich und entsprechend gekennzeichnet.
|
||||
|
||||
|
||||
### Containerisierte Entwicklungsumgebuing
|
||||
|
||||
| Komponente | VS Code Setup | PyCharm Setup | Beschreibung |
|
||||
| ---------------------- | -------------------------------------- | --------------------------- | ------------------------------------ |
|
||||
| IDE | **VS Code** (Flatpak) | PyCharm Community (Flatpak) | Entwicklungsumgebung |
|
||||
| Flatpak Berechtigungen | **Flatseal** (Flatpak) | Flatseal (Flatpak) | Verwalten von Flatpak Berechtigungen |
|
||||
| Container-Client | **Podman Remote** (Flatpak) | Docker Plugin (integriert) | Container-Anbindung |
|
||||
| Dev Container Support | **Dev Containers** (VS Code Extension) | Dev Containers (integriert) | Containerbasierte Entwicklung |
|
||||
| Container-Shell | **Toolbox** | SSH Remote Development | Shell-Zugang zu Containern |
|
||||
|
||||
|
||||
### Python Komponenten (optional)
|
||||
|
||||
| Komponente | Beschreibung |
|
||||
| ------------------------ | ----------------------------- |
|
||||
| Python 3 | Programmiersprache |
|
||||
| pip | Paketmanager für Python |
|
||||
| Python-Entwicklungstools | Nötig für native Paketmanager |
|
||||
| PySide6 | Qt GUI-Toolkit für Python |
|
||||
| Dependency Injector | Dependency Injection Library |
|
||||
| Linter & Formatter | Code-Qualität & Formatierung |
|
||||
|
||||
74
linux/github-copilot-cli.md
Normal file
74
linux/github-copilot-cli.md
Normal file
@ -0,0 +1,74 @@
|
||||
# Einrichten von Github Copilot CLI unter CachyOS
|
||||
|
||||
## Voraussetzungen
|
||||
- Ein aktives Github Copilot Abonnement
|
||||
- Node.js (Version 22 oder höher)
|
||||
- npm (Version 10 oder höher)
|
||||
|
||||
## Installation von npm
|
||||
Falls Node.js und npm noch nicht installiert sind:
|
||||
```bash
|
||||
$: sudo pacman -Syu nodejs npm
|
||||
```
|
||||
|
||||
Konfiguriere npm, um globale Pakete ohne Root-Rechte zu installieren:
|
||||
```bash
|
||||
$: mkdir ~/.npm-global
|
||||
$: npm config set prefix '~/.npm-global'
|
||||
```
|
||||
Füge den neuen npm-Pfad zu deiner Shell-Konfigurationsdatei hinzu:
|
||||
|
||||
### Für Bash oder Zsh:
|
||||
|
||||
```bash
|
||||
$: nano ~/.bashrc # oder nano ~/.zshrc
|
||||
```
|
||||
Füge die folgende Zeile am Ende der Datei hinzu:
|
||||
```
|
||||
export PATH=~/.npm-global/bin:$PATH
|
||||
```
|
||||
### Für Fish:
|
||||
|
||||
```fish
|
||||
$: fish_add_path --move ~/.npm-global/bin
|
||||
```
|
||||
|
||||
Starte anschließend das Terminal neu.
|
||||
|
||||
|
||||
## Installation von Github Copilot CLI
|
||||
```bash
|
||||
$: npm install -g @github/copilot
|
||||
```
|
||||
|
||||
## Starten
|
||||
```bash
|
||||
$: copilot
|
||||
```
|
||||
|
||||
## Anmeldung
|
||||
Beim ersten Start wirst du aufgefordert, dich anzumelden.
|
||||
```
|
||||
> /login
|
||||
```
|
||||
1. Wähle "GitHub.com"
|
||||
2. Drücke Enter, um den Webbrowser zu öffnen
|
||||
3. Melde dich bei deinem GitHub-Konto an und erteile die erforderlichen Berechtigungen
|
||||
4. Gib den im Terminal angezeigten Code in die Webseite ein, um die Anmeldung abzuschließen
|
||||
|
||||
Anschließend sollte im Terminal die folgenden Meldungen erscheinen:
|
||||
- Connected to GitHub MCP Server
|
||||
- Signed in successfully as [dein GitHub-Benutzername]! You can now use Copilot.
|
||||
|
||||
## Model wechseln
|
||||
Um das KI-Modell zu wechseln, verwende den Befehl:
|
||||
```
|
||||
> /model
|
||||
```
|
||||
Wähle das gewünschte Modell aus der Liste aus.
|
||||
|
||||
## Hilfe
|
||||
Um eine Liste der verfügbaren Befehle anzuzeigen, verwende:
|
||||
```
|
||||
> /help
|
||||
```
|
||||
22
linux/pacman.md
Normal file
22
linux/pacman.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Pacman Cheat Sheet
|
||||
|
||||
## System aktualisieren
|
||||
Führe den folgenden Befehl aus, um dein System zu aktualisieren:
|
||||
```bash
|
||||
$: sudo pacman -Syu
|
||||
```
|
||||
|
||||
## Pakete installieren
|
||||
```bash
|
||||
$: sudo pacman -Syu [Paketname]
|
||||
```
|
||||
- S: steht für "Sync" (Synchronisieren)
|
||||
- y: steht für "Refresh"
|
||||
- u: steht für "Upgrade"
|
||||
|
||||
## Pakete entfernen
|
||||
```bash
|
||||
$: sudo pacman -Rs [Paketname]
|
||||
```
|
||||
- R: steht für "Remove" (Entfernen)
|
||||
- s: steht für "Recursive" (Rekursiv)
|
||||
105
linux/plasma-tiling.md
Normal file
105
linux/plasma-tiling.md
Normal file
@ -0,0 +1,105 @@
|
||||
# Einrichtung eines Tiling Window Managers in KDE Plasma
|
||||
|
||||
Ein Tiling Window Manager ordnet Fenster automatisch kachelartig und rasterbasiert nebeneinander an, wobei kein Fenster ein anderes überlappt. Dadurch ist stets der gesamte Desktopbereich sichtbar und effizient nutzbar; die Steuerung erfolgt meist per Tastatur und es wird wenig bis keine Mausinteraktion benötigt.
|
||||
|
||||
Im Unterschied dazu erlaubt ein Floating Window Manager das freie Positionieren und Überlappen von Fenstern wie Papierblätter auf einem Schreibtisch. Fenster können beliebig verschoben, gestapelt, minimiert oder maximiert werden – typisch für klassische Desktop-Umgebungen wie Windows, macOS oder KDE/Plasma im Standardmodus.
|
||||
|
||||
Diese Anleitung erklärt eine Möglichkeit den Window Manger KWin mittels eines Scripts und weiterer Fensterdekorationen in einen Tiling Window Manager zu ändern.
|
||||
|
||||
## Komponenten
|
||||
|
||||
### Krohnkite
|
||||
|
||||
**Krohnkite** ist ein dynamisches, tiling-orientiertes Fensterverwaltungsskript für KWin unter KDE Plasma, das die Funktionalität eines Tiling Window Managers wie DWM bringt. Es ermöglicht die automatische Kachelung von Fenstern, wobei ein primärer „Master“-Bereich und ein Stapelbereich definiert wird. Krohnkite ist besonders als Fork vom Entwickler *anametologin* aktiv gepflegt und optimiert für KDE Plasma 6.
|
||||
|
||||
|
||||
### Klassy
|
||||
|
||||
**Klassy** ist eine minimalistische Fensterdekoration für KWin, die schlanke und klare Fensterrahmen bietet. Sie passt optisch gut zu tiling Window Managern wie Krohnkite und legt Wert auf Einfachheit ohne unnötigen Overhead.
|
||||
|
||||
## Anleitung
|
||||
|
||||
### Schritt 1: Installation von Krohnkite
|
||||
|
||||
*Option 1: Über die Plasma Systemeinstellungen:*
|
||||
- Öffne die **Systemeinstellungen**
|
||||
- Navigiere zu **Fensterverwaltung → KWin-Skripte**
|
||||
- Klicke auf **„Neue holen...“** (oben rechts)
|
||||
- Suche nach **„Krohnkite“** (Autor: Anametologin)
|
||||
- Installieren
|
||||
|
||||
*Option 2: Über die Shell:*
|
||||
```bash
|
||||
plasmapkg2 --install https://store.kde.org/p/kwin-scripts/krohnkite-anametologin.kwinscript
|
||||
```
|
||||
|
||||
### Schritt 2: Konfigurieren von Krohnkite
|
||||
Diese Einstellungen stellen eine Empfehlung dar. Passe die Oberfläche nach deinen eigenen Vorlieben an.
|
||||
|
||||
- Öffne die **Systemeinstellungen**
|
||||
- Navigiere zu **Fensterverwaltung → KWin-Skripte**
|
||||
- Aktiviere Krohnkite im Skripte-Menü
|
||||
- Klicke auf das Zahnrad-Icon
|
||||
- Reiter "Geometry":
|
||||
- Default Gaps: alles 5
|
||||
|
||||
```
|
||||
Hinweis:
|
||||
Wann immer etwas an den Krohnkite Einstellungen verändert wurde, ist es am besten Krohnkite in den KWin Skripten zu deaktivieren und wieder zu aktivieren damit alles sauber angewandt wird.
|
||||
```
|
||||
|
||||
|
||||
konfigurieren von klassy:
|
||||
titlebar - titlebar spacing: top: 1,00, bottom: 1,00
|
||||
window - thin window outline - window outline styles:
|
||||
- Window Outline Thickness: 2,75
|
||||
- active window:
|
||||
- Style: Accent colour
|
||||
- Opacity: 100%
|
||||
|
||||
### Schritt 3: Installation von Klassy
|
||||
|
||||
*Option 1: Über das AUR:*
|
||||
```bash
|
||||
$: paru -Sy classy
|
||||
```
|
||||
|
||||
### Schritt 4: Konfigurieren von Klassy
|
||||
|
||||
## Optionale Konfiguration
|
||||
|
||||
### Kurzbefehle konfigurieren
|
||||
|
||||
Die Standardtastenbelegung von DWM-Style Fenstermanagern sind dem oldschool Editor vim nachempfunden. Dieser ist nicht gerade für seine intuitive Steuerung bekannt und wird eher von "Neckbeards" und Linux Nerds favorisiert.
|
||||
Die folgenden Belegungen sind natürlich nur Vorschläge.
|
||||
|
||||
- Öffne die **Systemeinstellungen**
|
||||
- Navigiere zu **Tastatur → Tastenkombinationen → KWin**
|
||||
- Suche nach Einträgen die mit "Krohnkite" beginnen
|
||||
- Ändere die Belegungen für "Fokuswechsel":
|
||||
- `Super + ↑` für "Focus Up/Previous"
|
||||
- `Super + ↓` für "Focus Down/Next"
|
||||
- `Super + ←` für "Focus Left"
|
||||
- `Super + →` für "Focus Right"
|
||||
- Ändere die Belegung für "Fenster verschieben":
|
||||
- `Super + Shift + ↑` für "Move Up/Previous"
|
||||
- `Super + Shift + ↓` für "Move Down/Next"
|
||||
- `Super + Shift + ←` für "Move Left"
|
||||
- `Super + Shift + →` für "Move Right"
|
||||
|
||||
```
|
||||
Wichtig:
|
||||
Nach dem Ändern der Kurzbefehle sollte Krohnkite neu gestartet werden
|
||||
```
|
||||
```
|
||||
Hinweis:
|
||||
Diese Einstellungen können durch einen einfachen Klick auf "Voreinstellungen" auf den Systemstandard zurückgesetzt werden.
|
||||
```
|
||||
|
||||
### KDE Systemeinstellungen zentrieren
|
||||
|
||||
Die Systemeinstellungen von KDE eignen sich nicht gut ein Tiling Layout:
|
||||
- Das Fenster hat eine hohe Minimalgröße die nicht unterschritten werden kann.
|
||||
- Obwohl die Einstellungsseiten in einem Tab-Steuerelement organisiert ist, werden viele erweitere Einstellungen über Unterfenstern erreicht.
|
||||
|
||||
Da die Systemeinstellungen in der Regel nicht mit anderen Fenstern gemeinsam genutzt werden, empfielt es sich diese als modales, zentriertes Fenster über das Tiling Layout zu legen.
|
||||
658
markdown.md
Normal file
658
markdown.md
Normal file
@ -0,0 +1,658 @@
|
||||
---
|
||||
title: Markdown
|
||||
description: Editor
|
||||
published: true
|
||||
date: 2024-10-06T23:51:50.138Z
|
||||
tags: editors
|
||||
editor: markdown
|
||||
dateCreated: 2019-05-22T02:59:46.078Z
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
Markdown is a lightweight markup language with plain text formatting syntax. It's the de-facto syntax for writing documentation on major code repositories such as GitHub.
|
||||
|
||||
Wiki.js supports the full [CommonMark specification](https://spec.commonmark.org/) + adds some useful extensions (including the Github Flavored Markdown addons).
|
||||
|
||||
# User Guide
|
||||
|
||||
## 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}
|
||||
|
||||
## Bold
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using **double asterisks** symbols before and after the text selection.
|
||||
|
||||
#### Shortcuts
|
||||
- By selecting text, then clicking the {.radius-4} button in the toolbar.
|
||||
- By selecting text, then pressing <kbd>CTRL</kbd> + <kbd>B</kbd>
|
||||
|
||||
#### Examples
|
||||
|
||||
```js
|
||||
Lorem **ipsum** dolor
|
||||
```
|
||||
|
||||
Lorem **ipsum** dolor
|
||||
|
||||
## 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.
|
||||
|
||||
## Content Tabs
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
> This feature is only available from version 2.4 and up.
|
||||
{.is-info}
|
||||
|
||||
Using headers and adding the `{.tabset}` class to the parent header. The parent header text will not be shown in the final result.
|
||||
|
||||
Note that you can use any header level, as long as the children headers are one level higher. For example, if a parent header is `###` *(h3)*, the tabs headers must be `####` *(h4)*. The maximum header level for a parent being 5 and the children 6.
|
||||
|
||||
#### Examples
|
||||
|
||||
```
|
||||
# Tabs {.tabset}
|
||||
## First Tab
|
||||
|
||||
Any content here will go into the first tab...
|
||||
|
||||
## Second Tab
|
||||
|
||||
Any content here will go into the second tab...
|
||||
|
||||
## Third Tab
|
||||
|
||||
Any content here will go into the third tab...
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
## Footnotes
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Use the syntax `[^1]` for the location of the footnote in the main text, and `[^1]: this is a footnote` for the actual footnote. Footnotes themselves will automatically appear at the bottom of the page under a horizontal line.
|
||||
|
||||
#### Examples
|
||||
|
||||
```markdown
|
||||
This sentence[^1] needs a few footnotes.[^2]
|
||||
|
||||
[^1]: A string of syntactic words.
|
||||
[^2]: A useful example sentence.
|
||||
```
|
||||
This sentence[^1] needs a few footnotes.[^2]
|
||||
|
||||
[^1]: A string of syntactic words.
|
||||
[^2]: A useful example sentence.
|
||||
|
||||
## Headers
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using between 1 and 6 **hashtag** symbol(s), followed by a space, before the text selection.
|
||||
|
||||
#### Shortcuts
|
||||
- On the desired line, then clicking the {.radius-4} dropdown button in the toolbar.
|
||||
- On the desired line, press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Right</kbd> to increase the header level.
|
||||
- On the desired line, press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Left</kbd> to decrease the header level.
|
||||
|
||||
#### Examples
|
||||
|
||||
```
|
||||
# Header 1
|
||||
## Header 2
|
||||
### Header 3
|
||||
#### Header 4
|
||||
##### Header 5
|
||||
###### Header 6
|
||||
```
|
||||
|
||||
## Horizontal Line
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using **triple dash** symbols on a dedicated line.
|
||||
|
||||
#### Shortcuts
|
||||
- By clicking the {.radius-4} button in the toolbar.
|
||||
|
||||
#### Examples
|
||||
|
||||
```js
|
||||
Lorem ipsum dolor
|
||||
|
||||
---
|
||||
|
||||
Consectetur adipiscing elit
|
||||
```
|
||||
|
||||
Lorem ipsum dolor
|
||||
|
||||
---
|
||||
|
||||
Consectetur adipiscing elit
|
||||
|
||||
## 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 <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 {.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
|
||||
|
||||
## Mermaid Diagrams
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using a code block with the language **mermaid**.
|
||||
|
||||
Refer to [Mermaid website](https://mermaid-js.github.io/mermaid) for the language reference.
|
||||
|
||||
#### Examples
|
||||
|
||||
````
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice ->> Bob: Hello Bob, how are you?
|
||||
Bob-->>John: How about you John?
|
||||
Bob--x Alice: I am good thanks!
|
||||
Bob-x John: I am good thanks!
|
||||
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||||
|
||||
Bob-->Alice: Checking with John...
|
||||
Alice->John: Yes... John, how are you?
|
||||
```
|
||||
````
|
||||
|
||||
## Ordered Lists
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using an **number**, followed by a **dot** symbol, followed by a space, before each line of text.
|
||||
|
||||
#### Shortcuts
|
||||
- By selecting text, then clicking the {.radius-4} button in the toolbar.
|
||||
|
||||
#### Examples
|
||||
|
||||
```
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Morbi vehicula aliquam
|
||||
```
|
||||
|
||||
1. Lorem ipsum dolor sit amet
|
||||
1. Consectetur adipiscing elit
|
||||
1. Morbi vehicula aliquam
|
||||
|
||||
> While you can number each line numerically in order, it's easier to use the number **1** on each line. The final result will be incremented automatically. This way you don't need to re-number every single line when adding or removing a line later on.
|
||||
{.is-info}
|
||||
|
||||
## PlantUML Diagrams
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using a code block with the language **plantuml**.
|
||||
|
||||
Refer to [PlantUML website](https://plantuml.com/) for the language reference.
|
||||
|
||||
#### Examples
|
||||
|
||||
````
|
||||
```plantuml
|
||||
Bob->Alice : hello
|
||||
```
|
||||
````
|
||||
|
||||
```plantuml
|
||||
Bob->Alice : hello
|
||||
```
|
||||
|
||||
## Strikethrough
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using **double tildes** symbols 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
|
||||
|
||||
## Subscript
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using a **single tilde** 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
|
||||
|
||||
## Superscript
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using a **single caret** 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
|
||||
|
||||
## 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
|
||||
|
||||
## Unordered Lists
|
||||
|
||||
### Tab {.tabset}
|
||||
|
||||
#### Usage
|
||||
|
||||
Using an **asterisk** or a **dash** 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
|
||||
- Morbi vehicula aliquam
|
||||
```
|
||||
|
||||
- Lorem ipsum dolor sit amet
|
||||
- Consectetur adipiscing elit
|
||||
- Morbi vehicula aliquam
|
||||
|
||||
#### Stylings
|
||||
|
||||
By adding a class on a separate line, after the list, you can change the look of the list:
|
||||
|
||||
- `links-list`
|
||||
- `grid-list`
|
||||
|
||||
For example:
|
||||
|
||||
```markdown
|
||||
- Grid Item 1
|
||||
- Grid Item 2
|
||||
- Grid Item 3
|
||||
{.grid-list}
|
||||
|
||||
- [Lorem ipsum dolor sit amet *Subtitle description here*](https://www.google.com)
|
||||
- [Consectetur adipiscing elit *Another subtitle description here*](https://www.google.com)
|
||||
- [Morbi vehicula aliquam *Third subtitle description here*](https://www.google.com)
|
||||
{.links-list}
|
||||
```
|
||||
will result in:
|
||||
|
||||
- Grid Item 1
|
||||
- Grid Item 2
|
||||
- Grid Item 3
|
||||
{.grid-list}
|
||||
|
||||
and:
|
||||
|
||||
- [Link Title 1 *Subtitle description here*](https://www.google.com)
|
||||
- [Link Title 2 *Another subtitle description here*](https://www.google.com)
|
||||
- [Link Title 3 *Third subtitle description here*](https://www.google.com)
|
||||
{.links-list}
|
||||
|
||||
> Note that these stylings are specific to Wiki.js and will fallback to standard list styling in other applications.
|
||||
{.is-warning}
|
||||
|
||||
# Decorate Syntax
|
||||
|
||||
In some cases, using the `{.class-name}` syntax doesn't apply the styling class to the correct element because of ambiguous content. For example:
|
||||
|
||||
```
|
||||
> Lorem ipsum
|
||||
> - Line 1
|
||||
> - Line 2
|
||||
{.is-info}
|
||||
```
|
||||
Because the parser doesn't know whether the `.is-info` class should be applied to the list or the blockquote, it ends up being applied to the wrong element (the deepest element preceding it).
|
||||
|
||||
You can specify the correct target by using the decorate syntax `<!-- {tag-name:.class-name} -->` instead. For example:
|
||||
|
||||
```
|
||||
> Lorem ipsum
|
||||
> - Line 1
|
||||
> - Line 2
|
||||
<!-- {blockquote:.is-info} -->
|
||||
```
|
||||
|
||||
The `.is-info` class will now correctly be applied to the blockquote element.
|
||||
Loading…
x
Reference in New Issue
Block a user