Zum Hauptinhalt springen

Erstellen von Markdown-Dateien mit Code-Blöcken

tipp

Gut formatierte Code-Blöcke in Markdown machen Ihre Dokumentation lesbarer und wartbarer.

Grundlegende Code-Blöcke​

Inline-Code​

Verwenden Sie einfache Backticks für Inline-Code:

  • Einzelnes Wort: variable
  • Mehrere Wörter: function parameter
  • Mit Symbolen: npm install package-name

Umzäunte Code-Blöcke​

Verwenden Sie dreifache Backticks für mehrzeiligen Code:

Dies ist ein einfacher Code-Block
Keine Syntaxhervorhebung

Sprachspezifische Hervorhebung​

Fügen Sie den Sprachnamen nach den öffnenden Backticks hinzu:

const greeting = 'Hello, World!';
console.log(greeting);
def greet(name):
    print(f"Hello, {name}!")

Erweiterte Formatierung​

Zeilennummern​

Einige Markdown-Prozessoren unterstützen Zeilennummern:

// Diese Zeile ist hervorgehoben
const x = 1;
// Diese Zeilen sind hervorgehoben
// Ebenso
const y = 2;

Titelleisten​

Fügen Sie Ihren Code-Blöcken Titel hinzu:

app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

Diff-Blöcke​

Zeigen Sie Code-Änderungen mit Diff-Syntax an:

- const oldCode = 'to be removed';
+ const newCode = 'to be added';
  const unchanged = 'stays the same';

MDX-Funktionen​

Interaktive Code-Blöcke​

// JavaScript-Beispiel
function add(a, b) {
  return a + b;
}

Live-Code-Beispiele​

function Button() {
  return (
    <button onClick={() => alert('Geklickt!')}>
      Klick mich
    </button>
  );
}

Gängige Sprachen​

Web-Entwicklung​

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Beispiel</title>
</head>
<body>
    <h1>Hallo Welt</h1>
</body>
</html>
styles.css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}
app.ts
interface User {
    name: string;
    age: number;
}

const user: User = {
    name: "John",
    age: 30
};

Backend-Entwicklung​

Main.java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
query.sql
SELECT users.name, orders.order_date
FROM users
JOIN orders ON users.id = orders.user_id
WHERE orders.status = 'completed';

Bewährte Praktiken​

1. Konsistente Formatierung​

✅ Richtig:

# Titel

## Abschnitt

\```javascript
// Code hier
\```

❌ Falsch:

#Titel
##Abschnitt
\```javascript
//Code hier
\```

2. Klare Sprachspezifikation​

✅ Richtig:

\```python
def example():
    pass
\```

❌ Falsch:

\```
def example():
    pass
\```

3. Korrekte Einrückung​

✅ Richtig:

- Listenelement
  \```javascript
  const x = 1;
  \```

❌ Falsch:

- Listenelement
\```javascript
const x = 1;
\```

Spezialfälle​

Shell-Befehle​

Für Befehlszeilenbefehle:

# Befehl mit Ausgabe
$ npm install package
Installing package...
Done!

Umgebungsvariablen​

.env
API_KEY=your_api_key_here
DATABASE_URL=postgres://user:pass@localhost:5432/db

Konfigurationsdateien​

package.json
{
  "name": "project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  }
}

Fehlerbehebung​

Häufige Probleme​

  1. Backticks innerhalb von Code-Blöcken

    \`\`\`
    Verwenden Sie \` für Inline-Code
    \`\`\`

  2. Zeilenumbrüche

    Dies benötigt zwei Leerzeichen  
    um einen Zeilenumbruch zu erzeugen

  3. Escape-Zeichen

    \* Kein Listenelement
    \` Kein Inline-Code

Editor-Integration​

Cursor-Tastenkombinationen​

AktionTastenkombination
Code-BlockStrg + Umschalt + K
Inline-CodeStrg + `
VorschauStrg + Umschalt + V

Erweiterungen​

Empfohlene Markdown-Erweiterungen:

  • Markdown All in One
  • markdownlint
  • Markdown Preview Enhanced
tipp

Verwenden Sie die Cursor-Markdown-Vorschaufunktion, um Ihre Formatierung in Echtzeit zu überprüfen!

Verwandte Ressourcen​