Code-Syntax

Code ist ein zentrales Element in technischer Dokumentation. Markdown bietet verschiedene Möglichkeiten, Code darzustellen, darunter Inline-Code und Codeblöcke.

Inline-Code

Grundlegende Syntax

Verwenden Sie Backticks `, um Code einzuschließen:

markdown

Dies ist ein Beispiel für `Inline-Code`.
Verwenden Sie die Funktion `console.log()`, um Informationen auszugeben.

Gerenderte Ausgabe:

Dies ist ein Beispiel für Inline-Code. Verwenden Sie die Funktion console.log(), um Informationen auszugeben.

Code mit Backticks

Wenn der Code selbst Backticks enthält, verwenden Sie doppelte Backticks:

markdown

``Verwenden Sie die Funktion `console.log()```

Gerenderte Ausgabe:

``Verwenden Sie die Funktion `console.log()```

Mehrere Backticks handhaben

markdown

```Code mit mehreren Backticks `` ` ``` hier```

Gerenderte Ausgabe:

Code mit mehreren Backticks `` ` hier```

Codeblöcke

Eingezogene Codeblöcke

Verwenden Sie 4 Leerzeichen oder 1 Tab zum Einrücken:

markdown

    function hello() {
        console.log("Hallo, Welt!");
    }

Gerenderte Ausgabe:

function hello() {
    console.log("Hallo, Welt!");
}

Abgegrenzte Codeblöcke

Verwenden Sie drei Backticks ``` oder Tilden ~~~, um Code einzuschließen:

markdown

```
function hello() {
    console.log("Hallo, Welt!");
}
```

Gerenderte Ausgabe:

function hello() {
    console.log("Hallo, Welt!");
}

Programmiersprache angeben

Geben Sie den Namen der Sprache nach den öffnenden ``` an, um Syntaxhervorhebung zu aktivieren:

markdown

```javascript
function hello(name) {
    console.log(`Hallo, ${name}!`);
}
```

Gerenderte Ausgabe:

javascript

function hello(name) {
    console.log(`Hallo, ${name}!`);
}

Beispiele für Programmiersprachen

JavaScript

markdown

```javascript
// Beispiel für eine asynchrone Funktion
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fehler:', error);
    }
}
```

Gerenderte Ausgabe:

javascript

// Beispiel für eine asynchrone Funktion
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fehler:', error);
    }
}

Python

markdown

```python
# Beispiel für eine Klassendefinition
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# Anwendungsbeispiel
calc = Calculator()
print(calc.add(5, 3))
```

Gerenderte Ausgabe:

python

# Beispiel für eine Klassendefinition
class Calculator:
    def __init__(self):
        self.result = 0
    
    def add(self, x, y):
        return x + y
    
    def multiply(self, x, y):
        return x * y

# Anwendungsbeispiel
calc = Calculator()
print(calc.add(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Beispielseite</title>
</head>
<body>
    <h1>Willkommen bei Markdown</h1>
    <p>Dies ist ein Beispielabsatz.</p>
</body>
</html>
```

Gerenderte Ausgabe:

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Beispielseite</title>
</head>
<body>
    <h1>Willkommen bei Markdown</h1>
    <p>Dies ist ein Beispielabsatz.</p>
</body>
</html>

CSS

markdown

```css
/* Beispiel für ein responsives Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}
```

Gerenderte Ausgabe:

css

/* Beispiel für ein responsives Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

Bash/Shell

markdown

```bash
#!/bin/bash

# Skriptbeispiel: Stapelverarbeitung von Dateien
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Verarbeite $file"
        cp "$file" "backup_$file"
    fi
done

# Funktionsdefinition
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git wird benötigt, ist aber nicht installiert."
        exit 1
    }
}

check_dependencies
echo "Alle Abhängigkeiten erfüllt."
```

Gerenderte Ausgabe:

bash

#!/bin/bash

# Skriptbeispiel: Stapelverarbeitung von Dateien
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Verarbeite $file"
        cp "$file" "backup_$file"
    fi
done

# Funktionsdefinition
function check_dependencies() {
    command -v git >/dev/null 2>&1 || {
        echo "Git wird benötigt, ist aber nicht installiert."
        exit 1
    }
}

check_dependencies
echo "Alle Abhängigkeiten erfüllt."

JSON

markdown

```json
{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Deutsch Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Ihr Name",
  "license": "MIT"
}
```

Gerenderte Ausgabe:

json

{
  "name": "markdown-tutorial",
  "version": "1.0.0",
  "description": "Markdown Deutsch Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Ihr Name",
  "license": "MIT"
}

Erweiterte Codeblock-Funktionen

Zeilennummern anzeigen

Einige Markdown-Prozessoren unterstützen die Anzeige von Zeilennummern:

markdown

```javascript {1}
// Dies ist Zeile eins
function beispiel() {
    console.log("Hallo");
}
```

Zeilen hervorheben

Bestimmte Zeilen hervorheben:

markdown

```javascript {2-3}
function beispiel() {
    console.log("Diese Zeile ist hervorgehoben");  // hervorgehoben
    return true;               // hervorgehoben
}
```

Dateiname anzeigen

Den Dateinamen des Codes anzeigen:

markdown

```javascript title="app.js"
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hallo Welt!');
});
```

Häufige Fehler und Lösungen

1. Falsche Anzahl an Backticks

markdown

❌ Falsch:
```javascript
function hello() {
    console.log("Hallo");
}
``  ← Falsche Anzahl an Backticks

✅ Richtig:
```javascript
function hello() {
    console.log("Hallo");
}
```

2. Inkonsistente Einrückung

markdown

❌ Falsch: Eingezogener Codeblock
    Erste Zeile (4 Leerzeichen)
  Zweite Zeile (2 Leerzeichen)  ← Inkonsistente Einrückung

✅ Richtig: Eingezogener Codeblock
    Erste Zeile (4 Leerzeichen)
    Zweite Zeile (4 Leerzeichen)

3. Falscher Sprachname

markdown

❌ Falsch:
```js  ← sollte javascript sein
function hello() {}
```

✅ Richtig:
```javascript
function hello() {}
```

Unterstützte Sprachliste

Gängige Sprachbezeichner:

Sprache	Bezeichner	Beispiel
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def function():`
Java	`java`	`public class{}`
C++	`cpp`, `c++`	`#include <iostream>`
C#	`csharp`, `cs`	`public class{}`
Go	`go`	`func main(){}`
Rust	`rust`, `rs`	`fn main(){}`
TypeScript	`typescript`, `ts`	`interface{}`
PHP	`php`	`<?php`
Ruby	`ruby`, `rb`	`def method`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.class{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`key: value`
Markdown	`markdown`, `md`	`# Titel`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

Best Practices

1. Passendes Codeformat wählen

markdown

✅ Empfohlen: Inline-Format für kurzen Code verwenden
Verwenden Sie die Methode `Array.map()`, um Arrays zu verarbeiten.

✅ Empfohlen: Codeblöcke für längeren Code verwenden
function processArray(arr) {
    return arr.map(item => item * 2);
}

2. Sinnvolle Kommentare hinzufügen

markdown

✅ Empfohlen: Erklärende Kommentare einfügen
```javascript
// Durchschnitt der Array-Elemente berechnen
function berechneDurchschnitt(werte) {
    const summe = werte.reduce((acc, num) => acc + num, 0);
    return summe / werte.length;
}
```

3. Korrekte Sprachbezeichner verwenden

markdown

✅ Empfohlen: Klarer Sprachbezeichner
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ Nicht empfohlen: Vager Sprachbezeichner
```text
interface User {
    id: number;
    name: string;
}
```

4. Code prägnant halten

markdown

✅ Empfohlen: Nur die Kernlogik zeigen
```javascript
// Benutzer-Authentifizierung
function authenticate(token) {
    return validateToken(token);
}
```

❌ Nicht empfohlen: Zu viele irrelevante Details
```javascript
// Dies ist ein langer Code mit vielen nicht relevanten Details...
```

HTML-Ausgabe

Markdown-Code wird in HTML umgewandelt:

markdown

`Inline-Code`

Umgewandelt zu:

html

<code>Inline-Code</code>

Codeblock:

markdown

```javascript
function hello() {}
```

Umgewandelt zu:

html

<pre><code class="language-javascript">
function hello() {}
</code></pre>

Praxisbeispiele

API-Dokumentation

markdown

## Benutzer-Login

Senden Sie eine POST-Anfrage an `/api/login`:

```bash
curl -X POST https://api.example.com/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "password123"
  }'
```

Beispielantwort:

```json
{
  "success": true,
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": 1,
    "email": "user@example.com",
    "name": "Zhang San"
  }
}
```

Beispiel für Konfigurationsdatei

markdown

## Projektkonfiguration

Erstellen Sie eine Datei `config.json`:

```json
{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp"
  },
  "server": {
    "port": 3000,
    "host": "0.0.0.0"
  }
}
```

Aktualisieren Sie die `package.json`-Skripte:

```json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}
```

Installationsanleitung

markdown

## Umgebung einrichten

1. Node.js installieren:

```bash
# macOS (mit Homebrew)
brew install node

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Windows (mit Chocolatey)
choco install nodejs
```

2. Installation überprüfen:

```bash
node --version
npm --version
```

3. Projekt initialisieren:

```bash
mkdir my-project
cd my-project
npm init -y
```

Übung

Versuchen Sie Folgendes zu erstellen:

Eine Sammlung von Codebeispielen in verschiedenen Programmiersprachen
Ein API-Tutorial mit Request- und Response-Code
Eine Installationsanleitung mit Befehlen für verschiedene Systeme
Eine Konfigurationsdatei-Vorlage mit ausführlichen Kommentaren

Code-Syntax ​

Inline-Code ​

Grundlegende Syntax ​

Code mit Backticks ​

Mehrere Backticks handhaben ​

Codeblöcke ​

Eingezogene Codeblöcke ​

Abgegrenzte Codeblöcke ​

Programmiersprache angeben ​

Beispiele für Programmiersprachen ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

Erweiterte Codeblock-Funktionen ​

Zeilennummern anzeigen ​

Zeilen hervorheben ​

Dateiname anzeigen ​

Häufige Fehler und Lösungen ​

1. Falsche Anzahl an Backticks ​

2. Inkonsistente Einrückung ​

3. Falscher Sprachname ​

Unterstützte Sprachliste ​

Best Practices ​

1. Passendes Codeformat wählen ​

2. Sinnvolle Kommentare hinzufügen ​

3. Korrekte Sprachbezeichner verwenden ​

4. Code prägnant halten ​

HTML-Ausgabe ​

Praxisbeispiele ​

API-Dokumentation ​

Beispiel für Konfigurationsdatei ​

Installationsanleitung ​

Verwandte Syntax ​

Übung ​

Code-Syntax

Inline-Code

Grundlegende Syntax

Code mit Backticks

Mehrere Backticks handhaben

Codeblöcke

Eingezogene Codeblöcke

Abgegrenzte Codeblöcke

Programmiersprache angeben

Beispiele für Programmiersprachen

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

Erweiterte Codeblock-Funktionen

Zeilennummern anzeigen

Zeilen hervorheben

Dateiname anzeigen

Häufige Fehler und Lösungen

1. Falsche Anzahl an Backticks

2. Inkonsistente Einrückung

3. Falscher Sprachname

Unterstützte Sprachliste

Best Practices

1. Passendes Codeformat wählen

2. Sinnvolle Kommentare hinzufügen

3. Korrekte Sprachbezeichner verwenden

4. Code prägnant halten

HTML-Ausgabe

Praxisbeispiele

API-Dokumentation

Beispiel für Konfigurationsdatei

Installationsanleitung

Verwandte Syntax

Übung