Phila Markdown Plugin Demo

Live-Demo

Testen Sie das Phila Markdown Plugin direkt hier. Geben Sie Markdown-Text ein und sehen Sie die Ausgabe im Phila-Stil.

Markdown-Eingabe

Gerenderte Ausgabe

Installation und Verwendung

Das Phila Markdown Plugin kann auf verschiedene Arten in Ihre Anwendung integriert werden. Wählen Sie die für Sie passende Methode.

CDN-Integration

Die einfachste Methode, das Phila Markdown Plugin zu verwenden, ist über unseren CDN. Fügen Sie einfach die folgenden Zeilen in Ihren HTML-Code ein:

<!-- CSS einbinden -->
<link rel="stylesheet" href="https://plugin.companion.at/plugin/phila-markdown.css">

<!-- JavaScript einbinden -->
<script src="https://plugin.companion.at/plugin/phila-markdown.js"></script>

Verwendung mit CDN

<!-- HTML -->
<div id="markdown-container"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Plugin initialisieren
    const philaMarkdown = new PhilaMarkdown();
    
    // Markdown rendern
    const markdown = '# Hallo Welt\n\nDies ist ein **Beispiel**.';
    philaMarkdown.renderToElement(markdown, '#markdown-container');
  });
</script>

Installation über NPM

Für Projekte, die NPM verwenden, können Sie das Plugin wie folgt installieren:

npm install phila-markdown-plugin

Verwendung mit NPM

// JavaScript
import PhilaMarkdown from 'phila-markdown-plugin';
import 'phila-markdown-plugin/dist/phila-markdown.css';

// Plugin initialisieren
const philaMarkdown = new PhilaMarkdown();

// Markdown rendern
const markdown = '# Hallo Welt\n\nDies ist ein **Beispiel**.'
philaMarkdown.renderToElement(markdown, '#markdown-container');

Direkter Download

Sie können die Plugin-Dateien auch direkt herunterladen und in Ihr Projekt einbinden:

Laden Sie die Dateien phila-markdown.js und phila-markdown.css herunter.
Kopieren Sie die Dateien in Ihr Projekt.
Binden Sie sie in Ihre HTML-Datei ein:

<!-- CSS einbinden -->
<link rel="stylesheet" href="pfad/zu/phila-markdown.css">

<!-- JavaScript einbinden -->
<script src="pfad/zu/phila-markdown.js"></script>

API-Dokumentation

Das Phila Markdown Plugin bietet folgende Methoden:

Konstruktor

const philaMarkdown = new PhilaMarkdown(options);

Options:

containerSelector: CSS-Selektor für den Container (Standard: '.phila-markdown-container')
enableMath: Mathematische Formeln aktivieren (Standard: true)
enableSyntaxHighlighting: Syntax-Highlighting aktivieren (Standard: true)

render(markdown)

Rendert Markdown zu HTML und gibt den HTML-String zurück.

const html = philaMarkdown.render('# Überschrift');

renderToElement(markdown, selector)

Rendert Markdown und fügt es in das angegebene Element ein.

philaMarkdown.renderToElement('# Überschrift', '#container');

init(markdown)

Initialisiert das Plugin und rendert Markdown in allen Containern, die dem containerSelector entsprechen.

philaMarkdown.init('# Optionaler Markdown-Inhalt');

fetchAndRender(url, container)

Lädt Markdown von einer URL und rendert es in den angegebenen Container.

philaMarkdown.fetchAndRender('pfad/zur/datei.md', '#container');

Unterstützte Markdown-Funktionen

Das Phila Markdown Plugin unterstützt folgende Markdown-Funktionen:

Überschriften

# Überschrift 1
## Überschrift 2
### Überschrift 3

Textformatierung

**Fett**, *Kursiv*, ~~Durchgestrichen~~

Listen

- Punkt 1
- Punkt 2
  - Unterpunkt 2.1

1. Nummerierter Punkt 1
2. Nummerierter Punkt 2

Links und Bilder

[Link-Text](https://example.com)
![Bild-Beschreibung](pfad/zum/bild.jpg)

Code-Blöcke mit Syntax-Highlighting

```javascript
function beispiel() {
  return 'Hallo Welt';
}
```

Mathematische Formeln (KaTeX)

Inline: $E = mc^2$

Block:
$$
\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x)
$$

Tabellen

| Spalte 1 | Spalte 2 |
|----------|----------|
| Zelle 1  | Zelle 2  |
| Zelle 3  | Zelle 4  |