Zum Vergrößern in das Bild klicken

Markdown2Oxid

Artikelnummer: 6002

Markdown zur Formatierung von Artikel- / Kategorie-Langbeschreibung und CMS-Seiten

(zzgl. MwSt.)
 
Sofort lieferbar

Markdown zur Formatierung von Artikel- / Kategorie-Langbeschreibung und CMS-Seiten

Was ist Markdown eigentlich?

Markdown ist eine Möglichkeit, Texte mit geringen Aufwand und ohne zusätzlichen Texteditor zu formatieren.
Hierzu werden einfache (Satz-) Zeichen verwendet, die vom Author direkt beim Verfassen des Textes ohne Unterbrechung des Schreibflusses mit eingetippt werden.

Dabei entsteht ein sauber strukturierter "Reintext" ohne überflüssige Zeichen, der bereits im Grundzustand bestens lesbar ist.
Markdown konvertiert einen solchen Reintext automatisch für die Ausgabe auf einer Website in das html-Format.
Für den Websitebesucher ist nicht erkennbar, ob der Text mit Markdown oder mit einem WYSIWYG-Editor (zB. TinyMCE oder CK-Editor) formatiert wurde.

Diese Artikelbeschreibung wurde übrigens bei der Eingabe ausschließlich mit Markdown formatiert.


Wie wird ein Text mit Markdown formatiert?

Die Formatierung erfolgt bei Markdown durch einfache Satzzeichen, die der Author i.d.R. bereits nach wenigen Text-Zeilen problemlos beherrscht.
Verglichen mit WYSIWYG-Editoren, ist die Formatierung sehr intuitiv und benötigt weniger Zeichen.

Als Beispiel ein Vergleich, zunächst formatiert mit Markdown:

### Überschrift
Das ist ein *kursives*, **fettes** ***Beispiel***.
- Punkt A
- Punkt B

und nun formatiert mit dem TinyMCE-Editor:

<h3>Überschrift</h3>
<p>Das ist ein <em>kursives</em>, <strong>fettes <em>Beispiel</em></strong>.</p>
<ul>
<li>Punkt A</li>
<li>Punkt B</li>
</ul>

Beide Beispiele ergeben folgendes (identisches) Ergebnis:

Überschrift

Das ist ein kursives, fettes Beispiel.

  • Punkt A
  • Punkt B

Wie an diesem Beispiel erkennbar, benötigt Markdown nur etwa die Hälfte der Zeichen (73 Zeichen) der Formatierung mit einem WYSIWYG-Editor (134 Zeichen).
Das fertige Ergebnis, das der Webseitenbesucher zu sehen bekommt, ist aber exakt das Gleiche.


Was leistet Markdown2Oxid?

Im Bereich der Texteingabe im Adminbereich ist kein Eingreifen des Moduls erforderlich. Sie schreiben Ihre Texte einfach intuitiv inkl. Markdown-Formatierung als reiner, sauberer Text.
Das Modul konvertiert die mit Markdown formatierten Artikel-Langbeschreibungen und CMS-Seiten vor der Ausgabe im Shop-Frontend in das html-Format.

Bei jeder einzelnen Artikelbeschreibung und CMS-Seite kann Markdown aktiviert werden.
Sie können es immer verwenden - oder auch nicht. Es können die bereits vorhandenen Texte in der aktuellen Form bestehen bleiben, während neue Texte mit Markdown formatiert werden.

Markdown2Oxid stellt außerdem Shortcodes für zB. Bilder { img } und Mediendateien{ media } zur Verfügung. Diese integrieren automatisch die passenden Pfade zu den jeweiligen Standardverzeichnissen des Shops:

![md]({ img }markdown.png)

Ergebnis: md

Zwar erscheint der Codeschnipsel für das obige Bild zunächst aufwändig, verglichen mit einem img-Tag werden auch hier bei der Eingabe Zeichen gespart:

<img src="https://ecomstyle.de/out/pictures/wysiwigpro/markdown.png" alt="md">  

Mit welchen Zeichen wird formatiert?

I.d.R. genügen bereits folgende Zeichen zur sauberen Formatierung eines Textes.

# Überschrift H1 
## Überschrift H2 
### Überschrift H3

*kursiver Text* 
**fetter Text** 
`Code`
> am Zeilenanfang erzeugt ein Zitat

- oder * oder + = Liste Kreis
1. = Liste nummeriert

2 (oder mehr) Leerzeichen nach einem Satz erzeugen einen Zeilenumbruch (neue Zeile, wie <br /> )  
Eine Leerzeile erzeugt einen Absatz ( <p></p> )
*** oder --- oder *** (je 3 oder mehr) werden zu horizontalen Linien

[Beschriftung](http://example.de/) hier wird das Wort Beschriftung verlinkt
![Alttext](pfad/bild.png) fügt ein Bild ein  

Smarty Tags nutzen

Kein Problem, Smarty Tags können natürlich im Shop in CMS-Seiten oder in Langbeschreibungen genutzt werden:

***[{ $oxcmp_shop->oxshops__oxname->value }]***  
Inh. [{ $oxcmp_shop->oxshops__oxfname->value }] [{ $oxcmp_shop->oxshops__oxlname->value }]  
[{ $oxcmp_shop->oxshops__oxstreet->value }]  
[{ $oxcmp_shop->oxshops__oxzip->value }] [{ $oxcmp_shop->oxshops__oxcity->value }]  
[{ $oxcmp_shop->oxshops__oxcountry->value }]  

eComStyle.de
Inh. Josef Andreas Puckl
Kiebitzweg 1
92660 Neustadt a.d. Waldnaab
Deutschland

Unter https://ecomstyle.de/blog/markdown2oxid-doku/ ist eine ausführlichere Beschreibung der Syntax zu finden.


Installation

composer require ecs/markdown2oxid

Kategorie Administration
Plattform GitHub
OXID eShop 6 6.0 - 6.1
Verschlüsselung keine
Aktuelle Version OXID6 2.2
Modul bei GitHub
Es liegen keine Bewertungen zu diesem Artikel vor.