SELFHTML:Forum/Formatierung der Beiträge

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im Forum wird zur Formatierung der Beiträge Markdown verwendet.

Zeichen, die in kramdown eine besondere Bedeutung haben, müssen maskiert werden, wenn sie im Text verwendet werden sollen. Das Maskierungszeichen ist der Backslash (\).

Inhaltsverzeichnis

[Bearbeiten] Block- vs. Inline-Elemente

Alle Blockelemente wie Absätze, Überschriften oder Listen müssen von Leerzeilen eingeschlossen werden.

Beachten Sie: Leerzeilen müssen wirklich leer sein, dürfen also auch keine Leerzeichen enthalten.

[Bearbeiten] Hervorhebung

Hervorhebungen erreichen Sie, indem Sie den hervorzuhebenden Abschnitt in Asteriske oder Unterstriche einschließen. Beachten Sie, dass Sie zwischen dem hervorzuhebenden Text und den Formatierungszeichen keine Leerzeichen setzen dürfen.

Ziel Kramdown
Hervorhebung *Hervorhebung*
_Hervorhebung_
starke Hervorhebung **starke Hervorhebung**
__starke Hervorhebung__
starke Hervorhebung ***starke Hervorhebung***
___starke Hervorhebung___
Die Sonderzeichen müssen Sie maskieren, wenn Sie sie im Fließtext verwenden wollen.
*wichtig*
_wichtig_
\*wichtig\*
\_wichtig\_
**sehr wichtig**
__sehr wichtig__
\*\*sehr wichtig\*\*
\_\_sehr wichtig\_\_

Im Forum gibt es oberhalb des Antwortformulars Buttons um diese Darstellung zu erzielen.

[Bearbeiten] Durchstreichung

Sie können einen Text durchstreichen, indem sie ihn in jeweils zwei Tilden einschließen.

Ziel Kramdown
durchgestrichen ~~durchgestrichen~~

[Bearbeiten] Links

Ziel Kramdown
http://example.com <http://example.com>
Linktext [Linktext](http://example.com)

Für die zweite Variante gibt es im Forum einen Button oberhalb des Antwortfeldes.

[Bearbeiten] Absätze und Zeilenumbrüche

Absätze und andere Blockelemente werden in Leerzeilen eingeschlossen, für einen einfachen Zeilenumbruch setzen Sie zwei Leerzeichen an das Zeilenende.

Beachten Sie: Leerzeilen müssen wirklich leer sein, dürfen also auch keine Leerzeichen enthalten.
Ziel Kramdown

Absatz1

Absatz2


Absatz1

Absatz2
Zeile1
Zeile2
Zeile1  
Zeile2

[Bearbeiten] Überschriften

Ziel Kramdown
Überschrift
# Überschrift #
Überschrift
===
Überschrift
## Überschrift ##
Überschrift
---

Im Forumsbeiträgen sind die Überschriften letztlich dritter bzw. vierter Ordnung.

[Bearbeiten] Fußnoten

Die Kombination aus [^Zahl] und [^Zahl]: erzeugt eine Fußnote. Die Nummerierung der Fußnoten beginnt bei 1, unabhängig von den gewählten Zahlen, die eigentlichen Fußnoten können als eigene Zeile in beliebiger Reihenfolge an eine beliebige Stelle des Textes gesetzt werden.

Ziel Kramdown
Text[1]
  1. Erläuterung
Text[^1]

[^1]:Erläuterung

[Bearbeiten] Bilder

Die Syntax für Bilder ähnelt sehr der für Links.

Ziel Kramdown
Hund.gif ![Doku-Hund](http://example.com/img.png)
![Doku-Hund](http://example.com/img.png "Der Hund aus der Dokumentation")

Für die zweite Variante gibt es im Forum einen Button oberhalb des Antwortfeldes, die Angabe für das title-Attribut kann man auch entfernen.

[Bearbeiten] Code

Inline-Code wird in Backticks eingeschlossen.

Ziel Kramdown
<html> `<html>`
<html> `<html>`{: .language-html}


Mehrzeilige Codebeispiele werden in drei Tilden eingeschlossen, eine optionale Sprachangabe legt Regeln für das Syntax-Highlighting fest. Dieser Codeblock wiederum muss (wie jedes Blockelement) in Leerzeilen eingeschlossen werden.

Ziel Kramdown
<html>
  <head>
~~~
<html>
  <head>
~~~
<html>
  <head>
~~~ html
<html>
  <head>
~~~

Die farbliche Gestaltung des Quelltextes übernimmt dabei das Tool Pygments, eine Liste der möglichen Sprachen finden Sie unter http://pygments.org/languages/.

Sie können Codebespiele, die so nicht verwendet werden sollten, auszeichnen. Dazu fügen Sie der Sprachangabe das Schlüsselwort bad hinzu; für besonders gelungene Codebeispiele können Sie das Schlüsselwort good verwenden.

Ziel Kramdown
<html>
  <header>
~~~ html, bad
<html>
  <header>
~~~

Der Button oberhalb des Antwortblockes schlägt situationsbedingt einen ein- oder mehrzeiligen Codeabschnitt vor. Befindet sich der Cursor unterhalb einer Leerzeile, so wird ein mehrzeiliger Codeabschnitt angeboten (3 Tilden, optionale Eingabe einer Sprache), anderenfalls wird ein einzeiliger Codeabschnitt vorgeschlagen (Backticks).

[Bearbeiten] ASCII-Art

Die Auszeichnung als Code erlaubt auch die Darstellung von ASCII-Art oder Tabellen, falls die Kramdown-Umsetzung ungeeignet erscheint.

Ziel Kramdown
><o(((°>
~~~
><o(((°>
~~~

[Bearbeiten] Listen

Listen sind Blockelemente und müssen als solche oberhalb und unterhalb von Leerzeilen eingeschlossen sein.

[Bearbeiten] ungeordnete Listen

Ziel Kramdown
  • Listenpunkt
  • Listenpunkt
 
* Listenpunkt
* Listenpunkt

Als Aufzählungszeichen dürfen Sie den Asterisk (*), das Pluszeichen (+) sowie das Minuszeichen (-) verwenden. Die Zeichen können auch innerhalb einer Liste beliebig gewechselt werden.

Im Forum gibt es einen Button oberhalb des Antwortfeldes.

[Bearbeiten] geordnete Listen

Ziel Kramdown
  1. Listenpunkt
  2. Listenpunkt
 
1. Listenpunkt
2. Listenpunkt

Die Kombination [Zahl][Punkt][Leerzeichen] erzeugt eine geordnete Liste. Derzeit ist es nicht möglich, einen Startwert für die Liste feszulegen. Eine neue Liste beginnt also immer mit dem Startwert 1.

Möchte man einen Absatz mit einer Zahl und einem Punkt beginnen, so muss der Punkt maskiert werden.

Ziel Kramdown

1995. Ein guter Jahrgang.

 
1995\. Ein guter Jahrgang.

Um zwei aufeinander folgende Listen zu erstellen, müssen Sie die erste Liste ausdrücklich beenden - dafür ist in kramdown der End-Of-Block Marker ^ vorgesehen:

* foo
* bar
^ 
* foo
* bar

[Bearbeiten] Beschreibungslisten

Den dd-Elementen wird ein Doppelpunkt vorangestellt.

Ziel Kramdown
Vokabel
Beschreibung
 
Vokabel
: Beschreibung

Bei Verwendung mehrerer zusammengehörender dt-Elemente muss man wieder den Zeilenumbruch berücksichtigen, mehrere dd-Elemente kann man „einfach so“ einfügen.

Ziel Kramdown
Vokabel 1
Vokabel 2
Beschreibung
Vokabel 1   Vokabel 2 : Beschreibung
Vokabel
Beschreibung 1
Beschreibung 2
 
Vokabel
: Beschreibung 1
: Beschreibung 2

[Bearbeiten] Tabellen

Durch die Verwendung von Pipes (|) werden einfache Tabellen erstellt. Ein Pipe im Text beendet eine Tabellenzelle, ein Pipe am Zeilenanfang kennzeichnet eine neue Zeile.

Ziel Kramdown
td td
td|td
td td
td td
|td|td
|td|td

Mit Trennlinien können Sie Tabellenkopf, -fuß und (beliebig viele) -körper von einander trennen sowie die Ausrichtung festlegen. Im einfachsten Fall besteht die Trennlinie aus zwei Pipes und beliebig vielen Minuszeichen dazwischen. Die erste Trennlinie trennt den Tabellenkopf ab, eine Trennlinie mit Gleichheitszeichen leitet den Footer ein.

Ziel Kramdown
th th
td td
|th|th
|---|
|td|td
th th
td td
td td
|th|th
|---|
|td|td
|===|
|td|td

Mit Doppelpunkten innerhalb der Trennlinien regeln Sie die Ausrichtung in der entsprechenden Spalte.

Ziel Kramdown
linksbündig zentriert rechtsbündig
Dieser Text sollte linksbündig sein. Wenn der Platz nicht reicht, sieht man es auch. ein längerer Text Und schließlich noch was rechtsbündiges.
|linksbündig | zentriert | rechtsbündig |
|:-----------|:---------:|---:|
|Dieser Text … | ein längerer Text | … was rechtsbündiges.

[Bearbeiten] horizontale Linien

Enthält eine Zeile ausschließlich Minus- und Leerzeichen oder ausschließlich Asteriske und Leerzeichen, so wird eine horizontale Linie erzeugt. Allerdings darf die Zeile nicht mit mehr als 4 Leerzeichen beginnen, weil sonst der folgende Text als Codeblock interpretiert wird.

Ziel Kramdown

---
* ** *** ** *

[Bearbeiten] LaTeX

TeX ermöglicht unter anderem das Erstellen mathematischer Formeln. Sie können die zu erstellende Formel in Dollarzeichenpaare einschließen um die Formel darzustellen.

$$ \mathrm e^{\mathrm i \pi} + 1 = 0 $$

Eine Übersicht über die LaTeX-Befehle finden Sie in der Wikipedia: de.wikipedia.org/wiki/Hilfe:TeX

[Bearbeiten] Auszeichnung von Text in einer abweichenden Sprache

Um eine Textphrase als anderssprachig zu kennzeichnen, verwenden Sie im HTML das lang-Attribut.

Ziel Kramdown
<em lang="fr">Salut!</em> **Salut!**{: @fr}

Sie können auch ganze Absätze als anderssprachig kennzeichen.

Ziel Kramdown
<p lang="fr">Salut!</p> Salut!

{: @fr}

[Bearbeiten] Emojis

Durch die Eingabe eines Doppelpunktes nach einem Whitespace-Zeichen öffnet sich eine Auswahl von Emojis.

Ziel Kramdown
😉 :wink

Die vollständige Liste unterstützer Emojis finden Sie unter github.com/felixrieseberg/.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML