Styleguide

Dieses Dokument ist der Styleguide für diese Website. Dies ist der erste Absatz des Artikels und als dieser wird er anders gestaltet. Der weitere Text hier ist nur geschrieben worden, damit man sehen kann, wie der erste Absatz in weitere Zeilen umbricht.

Überschriften

Die Hauptüberschrift dieses Styleguides1 in eine h1. Jede Überschrift kann auch Links enthalten.

Die 2. Überschrift oben ist eine h2, die benutzt werden kann um Hauptsektionen auf Seitenebene zu markieren. Davon kann mehr als eine Überschrift pro Seite verwendet werden.

## Überschrift der zweiten Ordnung

Überschrift der dritten Ordnung

Die Überschrift oben ist eine h3, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h2 ist.

### Überschrift der dritten Ordnung

Überschrift der vierten Ordnung

Die Überschrift oben ist eine h4, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h3 ist.

#### Überschrift der vierten Ordnung
Überschrift der fünften Ordnung

Die Überschrift oben ist eine h5, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h4 ist.

##### Überschrift der fünften Ordnung
Überschrift der sechsten Ordnung

Die Überschrift oben ist eine h6, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h5 ist.

###### Überschrift der sechsten Ordnung

Absätze

Alle Absätze werden in p gewrappt. Zusätzlich können p auch in blockquote gewrappt werden.

Absätze sind in der Textgestaltung einen aus einem oder mehreren Sätzen bestehenden Abschnitt eines fortlaufenden Textes. Ein Absatz ist ein Sinnzusammenhang oder ein eigenes kleines Thema. Ist dieser Gedanke ausgeführt, folgt ein neuer Absatz.

Dies ist ein Absatz.

Dies ist ein zweiter Absatz.

Sektionen-Trenner

Das hr kennzeichnet einen thematischen Bruch auf Absatzebene, z. B. einen Szenenwechel in einer Geschichte oder einen Übergang zu einem anderen Thema. Der folgende Auszug aus Pandora’s Star von Peter F. Hamilton zeight zwei Absätze, die einen Szenenwechel zeigen:

Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel.

Maybe it won’t be that bad, he told himself. The lie was comforting enough to get him through the rest of the night’s shift.


The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond’s winters.

Dudley was ninety-two, in his second life …

---------------------------------------

The Carlton AllLander drove Dudley home just after dawn. …

Preformatierter Text

Das pre wird verwendet, um preformatierten Text anzuzeigen, also Text, der genau so angezeigt werden soll, wie er geschrieben war, also inklusive eventueller mehrfacher Leerzeichen, Einrückungen oder ASCII-Zeichen2.

! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
<pre>
Dies    soll genau  S O  aussehen.
</pre>

Zitate

Blockzitat

Die blockquote repräsentiert einen Abschnitt, der aus einer anderen Quelle zitiert.

Zusätzlich dazu kann auch das Element cite verwendet werden, um ein Werk zu marieren aus dem zitiert wurde.

Einfaches Blockzitat

Mit Markdown:

Dies ist ein Zitat.

{{% blockquote %}}
Dies ist ein **Zitat**.
{{% /blockquote %}}

Ohne Markdown:

Dies ist ein **Zitat**.
{{< blockquote >}}
Dies ist ein **Zitat**.
{{< /blockquote >}}

Zitat aus einem gedruckten Werk

Drei Ringe den Elben, hoch im Licht. Sieben den Zwergen in ihren Hallen aus Stein. Den Sterblichen, ewig dem Tode verfalln: Neun. Ein Ring sie zu knechten, sie alle zu finden, ins Dunkel zu treiben und ewig zu binden. Im Lande Mordor, wo die Schatten drohn.

J.R.R. Tolkien Der Herr der Ringe
Flying is learning how to throw yourself at the ground and miss.
Douglas Adams The Hichhikers Guide to the Galaxy
{{< blockquote author="Douglas Adams" cite="The Hichhikers Guide to the Galaxy" >}}
…
{{< /blockquote >}}

Zitat von Twitter

Over the past 24 hours I've been reflecting on my life & I've realized only one thing. I need a medieval battle axe.
{{< blockquote author="@allanbranch" url="https://twitter.com/allanbranch/status/90766146063712256" >}}
…
{{< /blockquote >}}

Zitat aus einem Artikel im Internet

Every interaction is both precious and an opportunity to delight.
Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

Pullquote

Pullquote (rechts)

Wenn man sehr lange Absätze schreibt, ist es hilfreich ein herausgeschobenen Zitatblock zu verwenden, der einen wichtigen Teil des Abschnitts markiert. Einige benutzen vielleicht lieber viele Überschriften, was auch meistens gut funktioniert, aber weniger gut für lange Prosa geeignet ist.

Wichtig anzumerken ist, dass die Pullquotes nur visuelle Präsentation sind und nicht zweimal im Code erscheinen. Deshalb werden CSS-Techniken angewandt, um das Zitat ein weiteres mal sichtbar zu machen. In Octopress kann man dieses sehr einfach mit dem Pullquote-Tag erreichen.

Wenn man sehr lange Absätze schreibt, ist es hilfreich ein herausgeschobenen Zitatblock zu verwenden, der einen wichtigen Teil des Abschnitts markiert. Einige benutzen vielleicht lieber viele Überschriften, was auch meistens gut funktioniert, aber weniger gut für lange Prosa geeignet ist.

Wichtig anzumerken ist, dass die Pullquotes nur visuelle Präsentation sind und nicht zweimal im Code erscheinen. Deshalb werden CSS-Techniken angewandt, um das Zitat ein weiteres mal sichtbar zu machen. In Octopress kann man dieses sehr einfach mit dem Pullquote-Tag erreichen.

{{% pullquote class="left" quote="Wichtig anzumerken ist, dass die Pullquotes nur visuelle Präsentation sind und nicht zweimal im Code erscheinen." %}}
…
{{% /pullquote %}}

Pullquote (zentriert)

Manchmal möchte man einen kurzen Zitatblock verwenden, der nicht im Text vorkommt, oder besonders prägnant ist und daher zentriert stehen soll. Wenn ein Attribute lang mitgegeben wird, werden automatisch die korrekten Zitatzeichen verwendet (für Deutsch, Englisch und Japanisch).

No time for pessimism.

{{% pullquote language="en" %}}
No time for pessimism.
{{% /pullquote %}}

Inline-Zitate

Peter sagte Sie soll mir das sofort hergeben und war ziemlich sauer.

Peter sagte <q>Sie soll mir das sofort hergeben</q> und war ziemlich sauer.

Deutsche Zitate (verschachtelt)

Luke führte weiter aus, Und sie nannte ihn einen total blöd-aussehenen Idioten! Ich denke ich habe eine Chance! Dieser arme Idiot …

Luke führte weiter aus, <q>Und sie nannte ihn einen <q>total blöd-aussehenen Idioten</q>! Ich denke ich habe eine Chance!</q> Dieser arme Idiot …

Englische Zitate (verschachtelt)

Luke conntinued, And the she called him a scruffy-looking nerf-herder! I think I’ve got a chance! The poor naive fool …

<p lang="en">Luke conntinued, <q>And the she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool …</p>

Japanische Zitate (verschachtelt)

彼女は日本語に猫はにゃんと鳴くと言った。

<p lang="ja">彼女は<q>日本語に猫は<q>にゃん</q>と鳴く</q>と言った。</p>

Verse

Gedichte und Verse sollen so geschrieben werden, wie sie vom Autor gedacht waren und außerdem in der Seite zentriert stehen. Dafür gibt es einen Stil:

‘Twas brillig, and the slithy toves Did gyre and gimble in the wabe; All mimsy were the borogoves, And the mome raths outgrabe.

Lewis CarrollJabberwocky (1832-98)
{{< verse author="Lewis Carroll" cite="Jabberwocky (1832-98)" >}}
‘Twas brillig, and the slithy toves
Did gyre and gimble            in the wabe;
All mimsy     were     the borogoves,
And       the mome     raths            outgrabe.
{{< /verse >}}

Hinweis

Wenn etwas besonders wichtiges markiert werden soll, kann dafür eine spezielle Formatierung verwendet werden:

{{% hint headline="Hinweis" %}}
Dies ist ein wichtiger Hinweis. Und hier ist ein [Link](/). Und etwas `code`.
{{% /hint %}}

Listen

Geordnete Listen

Das Element ol kennzeichnet eine geordnete Lste, und durch CSS sind verschiedenste Nummerierungen möglich (z. B. 1, 2, 3, … a, b, c, … und so weiter).

  1. Dies ist eine geordnete Liste
  2. Dies ist der zweite Listeneintrag, der eine Unterliste enthält
    1. Dies ist die Unterliste, ebenfalls geordnet
    2. Sie hat zwei Einträge
  3. Dies ist der letzte Eintrag auf dieser Liste
1. Dies ist eine geordnete Liste
2. Dies ist der zweite Listeneintrag, der eine Unterliste enthält
   1. Dies ist die Unterliste, ebenfalls geordnet
   2. Sie hat zwei Einträge
3. Dies ist der letzte Eintrag auf dieser Liste

Ungeordnete Listen

Das Element ul kennzeichnet eine ungeordnete Liste (z. B. eine Liste von Einträgen, die nur locker sortiert sind oder eine Punktliste).

  • HTML
  • CSS
    • Sass
    • Compass
    • LESS
    • Stylus
  • JavaScript
    • Backbone.js
    • Angular.js
    • Ember.js
* HTML
* CSS
  * Sass
    * Compass
  * LESS
  * Stylus
* JavaScript
  * Backbone.js
  * Angular.js
  * Ember.js

Manchmal soll eine Liste auch Blockelemente enthalten, üblicherweise einen Absatz oder zwei.

  • HTML ist eine Auszeichnungssprache die verwendet wird, um die semantische Struktur eines Dokumentes zu schreiben.

  • CSS ist eine deklarive Sprache für Stilvorlagen. Damit wird das visuelle Aussehen eines HTML-Dokumentes gesteuert.

  • JavaScript ist eine Programmiersprache, die verwendet wird um Interaktionen zu einer Website hinzuzufügen oder ganze Programme für das Internet zu schreiben.

* HTML ist eine Auszeichnungssprache die verwendet wird, um …

* CSS ist eine deklarive Sprache für Stilvorlagen. Damit wird …

* JavaScript ist eine Programmiersprache, die verwendet wird um …

Definitionslisten

Das Element dl ist ein weiterer Typ von Liste, nämlich eine Defintionsliste. Anstelle von Listeneinträgen besteht eine dl aus Paaren von dt (Defintion Term) und dd (Definition Description). Auch wenn diese Listenform Definitionsliste genannt wird, kann sie auch in anderen Szenarios verwendet werden, in denen Eltern/Kind-Beziehungen vorkommen.

Dies ist eine Bezeichnung.
Dies ist die Definition für die Bezeichnung.
Dies ist eine weitere Bezeichnung.
Und dies ist die Definitions für die Bezeichnung.

Dies ist eine Bezeichnung.
: Dies ist die Definition für die Bezeichnung.

Dies ist eine weitere Bezeichnung.
: Und dies ist die Definitions für die Bezeichnung.

Inline-Text

Es gibt eine Vielzahl von Inline-HTML-Elementen, die überall in anderen Elementen verwendet werden können.

Das Element a wird verwendet um Text zu verlinken, ob auf eine andere Seite, ein benanntes Fragment der aktuellen Seite oder auf einen anderen Ort im Internet:

Gehe zur Startseite zurück, Springe zum Anfang der Seite oder besuche eine fantastische Website im Internet.

Dies ist ein Link mit einem Tooltip.

[Dies ist ein Link](http://kogakure.de)

Betonte Texte

Das Element em wird benutzt, um Betonung für Text auszuzeichnen, also z. B. wenn etwas anders ausgesprochen wird oder wichtiger ist. Um Text nur schräg zu stellen ist das Element i vorzuziehen:

Du musst einfach Negitoro Maki3 probieren!

Du *musst* einfach Negitoro Maki probieren!

Wichtige Texte

Das Element strong wird verwendet, um Text mit starker Wichtigkeit auszuzeichnen. Wo Text nur fett sein soll, ist das Element bvorzuziehen:

Das Eis zu betreten ist verboten!

Das Eis zu betreten ist **verboten**!

Durchgestrichene Texte

Das Element s wird verwendet um Inhalte auszuzeichnen, die nicht länger akturat oder relevant sind. Um in Dokumenten zu markieren, dass ein Text entfernt wurde, ist das Element del zu verwenden.

Empfohlene Preisempfehlung: 3,99 € pro Flasche
Jetzt für nur noch 2,99 € pro Flasche!

~~Empfohlene Preisempfehlung: 3,99 € pro Flasche~~<br>
**Jetzt für nur noch 2,99 € pro Flasche!**

Zitat-Quellen

Das Element cite wird verwendet um den Titel einer Arbeit (z. B. ein Buch, Aufsatz, Gedicht, Song, Film, TV-Show, Skulptur, Gemälde, Musical, Ausstellung etc) zu markieren.

Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).

<cite>Universal Declaration of Human Rights</cite>, United Nations, …

Definitionen

Das Element dfn wird verwendet um Begriffe zu markieren, die erklärungsbedürftig sind. Mit dem Attribute title kann die Erklärung hinzugefügt werden.

Die Ninja wurden im Zeitalter Sengokujidai von Japan als Spione, Kundschafter oder Attentäter eingesetzt, um Aufgaben zu erledigen, die den Samurai aufgrund ihres Ehrenkodex nicht möglich war.

Die <dfn title="geheime Person">Ninja</dfn> wurden im Zeitalter …

Abkürzungen

Das Element abbr wird für abgekürzten Text verwenden, egal ob es sich um Akronyme, Initialworte oder ähnliches. Ein Plugin geht durch alle Abkürzungen des Textes und wandelt sie automatisch in abbr um. Nur wenn die Abkürzung nicht in Kapitälchen geschrieben werden soll, muss es per Hand ausgezeichnet werden.

BBC, HTML, and Staffs.

BBC, HTML, and <abbr class="no-caps" title="Staffordshire">Staffs.</abbr>

Zeiten

Das Element time wird benutzt, um entweder die Zeit auf einer 24-Stunden-Uhr zu markieren oder ein präzises Datum des Gregorianischen Kalenders zu kennzeichnen.

Die Schlacht von Sekigahara4 am stellte einen Wendepunkt der japanischen Geschichte dar. Durch den Sieg gelangt es dem Haus Tokugawa, die Vormachtstellung in Japan zu sichern.

Die Schlacht von Sekigahara am <time datetime="1600-10-21">21. Oktober 1600</time> …

Variablen

Das Element var wird verwendet, um Variablen in mathematischen Ausdrücken oder Programmcode zu kennzeichnen, kann aber auch verwendet werden um Platzhalter zu markieren, bei denen der Wert mit dem eigenen Wert ersetzt werden soll.

Wenn n Rohre zur Eiscreme-Fabrik führen, dann erwarte ich wenigstens n verschiedene Geschmacksrichtungen für den Verkauf!

Wenn <var>n</var> Rohre zur Eiscreme-Fabrik führen, dann erwarte …

Beispiel-Ausgabe

Das Element samp wird verwendet um beispielhafte Ausgaben von Programmen oder Computer-Systemen zu kennzeichnen.

Der Computer gab Fehler -1 auf dem Bildschirm aus, aber ich weiß nicht, was das bedeutet.

Der Computer gab <samp>Fehler -1</samp> auf dem Bildschirm aus, aber …

Keyboard-Tasten

Mit dem Element kbd werden Benutzereingaben gekennzeichnet (üblicherweise über die Tastatur, aber es können auch andere Eingaben, wie Sprachbefehle gekennzeichnet werden).

Dies ist nur etwas zufälliger Text, um sicherzustellen, dass die Tastaturbefehle in der mitte des Absatz gezeigt werden, da so die korrekte Zeilenhöhe geprüft werden kann. Um einen Screenshot am Mac zu erstellen, drücke ⌘ Cmd + ⇧ Shift + 3. Und noch etwas Text danach, nur um sicherzugehen, das alles gut aussieht.

Drücke <kbd>⌘ Cmd</kbd> + <kbd>⇧ Shift</kbd> + <kbd>3</kbd>

Superskript und Subskript

Das Element sup kennzeichnet Superskript und das Element sub Subskript.

Die Koordinate des iten Punktes ist (xi, yi). Der zehnte Punkt hat die Coordinate (x10, y10). Dies ist nur etwas weiterer Text der nur dafür da ist zu prüfen, ob die Zeilenhöhe stimmt.

Mathe ist eine nette Sache, manchmal möchte man mitten im Text eine Formel haben. Und sogar Berechnungen wie diese f(x, n) = log4xn sollte funktionieren und nicht die Zeilenhöhe verändern oder den Textfluß verändern.

x<sub>i</sub>

f(x, n) = log<sub>4</sub>x<sup>n</sup>

Kursive Texte

Das Element i wird benutzt um eine andere Stimme oder Stimmung zu kennzeichnen oder Text, der auf andere Weise vom Fließtext abweicht. Dies können z. B. technische Begriffe, umgangssprachliche Begriffe aus anderen Sprachen, der Name eines Schiffes oder andere Arten von Text, die üblicherweise kursiv dargestellt werden.

Es liegt eine bestimmte je ne sais quoi in der Luft.

Es liegt eine bestimmte <i lang="fr">je ne sais quoi</i> in der Luft.

Fette Texte

Das Element b wird verwendet um Worte vom Text abzuheben ohne ihnen extra Bedeutung zu geben, wie z. B. Schlüsselworte, Produktnamen oder andere Arten von Text, die üblicherweise fett dargestellt werden.

Du betrittst einen kleinen Raum. Dein Schwert leuchtet heller. Eine Ratte huscht an der Wand vorbei.

Dein <b>Schwert</b> leuchtet heller. Eine <b>Ratte</b> huscht an der Wand vorbei.

Markierte oder hervorgehobene Texte

Das Element mark wird verwendet um einen Textmarker zu repräsentieren, der durch einen Text geht und stellen hervorhebt. Wenn es in einem Zitat verwendet wird, dann um eine Stelle hervorzuheben, die vorher nicht hervorgehoben war, aber auf die hingewiesen werden soll.

Mit <mark>mark</mark> kann man Worte markieren.

Bearbeitungen

Das Element del wird verwendet um Text zu markieren, der nicht mehr gültig ist und entfernt werden müsste, aber aus bestimmten Gründen auf der Seite stehen bleiben muss. Sein Gegenstück, das Element ins markiert Text, der hinzugefügt wurde. Es kann optional ein Zeitstempel hinzugefügt werden, der anzeigt, wann die Änderung durchgeführt wurde.

Sie kaufte zwei fünf Paar Schuhe.

Sie kaufte <del datetime="2005-05-30T13:00:00">zwei</del> <ins datetime="2005-05-30T13:00:00">fünf</ins> Paar Schuhe.

Ruby

Das Element ruby hat nichts mit der Programmiersprache Ruby zu tun. Damit wird in verschiedenen asiatischen Sprachen die Aussprache von seltenen Schriftzeichen übertitelt. Im Japanischen gelten z. B. nur 1945 Zeichen als offizielle Zeichen, die im täglichen Sprachgebrauch von offiziellen Dokumenten verwendet werden dürfen. Es gibt aber viele tausend Zeichen mehr. Um auch weniger gebildeten zu ermöglichen, das Zeichen zu lesen, wird dann über diesen Zeichen Lautschrift geschrieben.

攻殻こうかく機動隊きどうたい

Das Japanische Kino hat einige Meisterwerke hervorgebracht, sowohl in Farbe als auch in Schwarz/Weiß. Der bekannte Film 7 Samurai (七人の侍しちにんのさむらい) von Akira Kurosawa ist einer der besten Filme der japanischen Geschichte. Der Film ist so gut, dass er sogar ein Remake erfahren hat: Die Glorreichen Sieben.

<ruby>攻殻<rp>(</rp><rt>こうかく</rt><rp>)</rp>機動隊<rp>(</rp><rt>きどうたい</rt><rp>)</rp></ruby>

Tabellen

Tabellen sollten verwendet werden, um tabellarische Daten anzuzeigen. Die Elemente thead, tbody und tfoot sind dafür da Reihen in der Tabelle zu gruppieren.

Einfache Tabellen

# Vorname Nachname Benutzername
1 Mark Otto @mdo
2 Jacob Thronton @fat
3 Larry the Bird @twitter
\# | Vorname | Nachname | Benutzername
---|---------|----------|-------------
1  | Mark    | Otto     | @mdo
2  | Jacob   | Thronton | @fat
3  | Larry   | the Bird | @twitter

Gestreifte Tabellen

# Vorname Nachname Benutzername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table-zebra">
…
</table>

Tabellen mit Rand

# Vorname Nachname Benutzername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table-border">
…
</table>

Tabellen mit Hover-Interaktion

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table-hover">
…
</table>

Verdichtete Tabellen

# Vorname Nachname Benutzername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table-condense">
…
</table>

Bilder

Ein einfaches Bild:

Example image

<img src="http://lorempixel.com/680/408/nightlife/" alt="Example image">

Abbildungen

Das Element figure wird verwendet um mehrere Objekte in einer Abbildung mit einem Untertitel zusammenzufassen. Überlicherweise werden ein oder mehrer Bilder in einer Abbildung angezeigt, es können aber auch andere Objekte, wie z. B. Code angezeigt werden.

Abbildung ohne Untertitel

Example image
{{< figure class="image-figure" >}}
<img src="http://lorempixel.com/680/408/fashion/" alt="Example image">
{{< /figure >}}

Abbildungen mit Untertitel

Normalerweise sind die Untertitel zentriert ausgerichtet. Es gibt aber fälle, in denen der Untertitel zu lang ist und mehrzeiliger Text sieht zentriert nicht gut aus. Dafür gibt es das Klassen-Attribut image-figure-longcaption.

Example image
Dies ist die Caption des Fotos, die ich etwas länger schreibe, nur damit ich testen kann, wie sie aussieht, wenn sie sich über mehrere Zeilen erstreckt. Diese verwendet .image-figure-longcaption als Klassen-Attribut.

Im aktuellen Design haben zwar sowieso alle Abbildungen einen Rand, dies mag sich aber in Zukunft ändern. Bei Abbildungen, die also auf jeden Fall einen Rand benötigen, weil sie sonst nicht wirken oder schlecht aussehen, fügt man daher das Klassen-Attribut image-figure-border hinzu.

Example image
Dies ist ein normales Foto in einer figure mit dem Klassen-Attribut .image-figure-border.

Abbildungen, die einen Schatten haben sollen, können das Klassen-Attribut image-figure-shadow bekommen.

Example image
Dies ist ein normales Foto in einer figure mit dem Klassen-Attribut .image-figure-shadow.
{{< figure class="image-figure image-figure-shadow" caption="Dies ist ein normales Foto in einer figure mit dem Klassen-Attribut <b>.image-figure-shadow</b>." >}}
<img src="http://lorempixel.com/680/408/sports/" alt="Example image">
{{< /figure >}}

Abbildungen mit Quellenangabe

Example image

Lorem Pixel, Foto

{{< figure class="image-figure attribution" author="Lorem Pixel" cite="Foto" url="http://lorempixel.com" cc="true" >}}
<img src="http://lorempixel.com/680/408/fashion/" alt="Example image">
{{< /figure >}}

Videos

Es ist auch möglich Videos einzubetten, und zwar als natives HTML5, direkt von YouTube oder Vimeo.

Native HTML5-Videos

{{% video width="640" height="420" poster="http://s3.imathis.com/video/zero-to-fancy-buttons.png" source="http://s3.imathis.com/video/zero-to-fancy-buttons.mp4" type="mp4" %}}

YouTube-Videos

{{% youtube RFPsvF3UOdo %}}

Vimeo-Videos

{{% vimeo 45858333 %}}

Codeblöcke

Mit Hightlighting

$ chmod a+x *.txt
def index
  puts "Hallo Welt"
end

Mit Untertitel

$ chmod a+x *.txt
Ausführende Rechte für alle Text-Dateien

Längere Beispiele

namespace :images do

  desc "Crush all images"
  task :crush do
    App::Application.config.assets.paths.each do |dir|
      ImageCrusher.optimize({
        directory: dir,
        quantize: true
      })
    end
  end

end

Dies ist inline-code in einem Satz.

/**
 * CSS/Markup: Flexbox
 */

article {
  margin-bottom: 20px;
}

article > div {
  display: -webkit-flex;
  display: flex;
  background: red;
}

.trigger {
  background: red;
  display: block;
}

.opportunity {
  background: green;
  flex: 1;
}

.match {
  background: blue;
  flex: 1;
}

Download-Block

{{< download url="https://github.com/kogakure/stefanimhoff.de-jekyll/" text="View Source on GitHub" >}}

  1. Ein Styleguide (oder deutsch Gestaltungsrichtlinie) beschreibt, wie bestimmte Elemente eines Druckerzeugnisses oder einer Website zu gestalten sind. Diese Richtlinien sollen ein einheitliches Erscheinungsbild verschiedener Kommunikationsmittel einer Institution oder Firma, z. B. Werbe- und Informationsmaterial, Geschäftsbriefe oder Internetauftritte, gewährleisten und so die Bildung einer Corporate Identity ermöglichen. Daneben werden Styleguides auch für die Software-Erstellung oder Produkte allgemein eingesetzt; auch hier ist das Ziel: Produkte sollen als zusammengehörig wahrgenommen werden und ggf. auch mit der verbundenen Marke assoziiert werden. [return]
  2. Der American Standard Code for Information Interchange ist eine 7-Bit-Zeichenkodierung; sie entspricht der US-Variante von ISO 646 und dient als Grundlage für spätere, auf mehr Bits basierende Kodierungen für Zeichensätze. Die ASCII-Kodierung wurde am 17. Juni 1963 von der American Standards Association (ASA) als Standard ASA X3.4-1963 veröffentlicht und 1967 sowie zuletzt im Jahr 1968 (ANSI X3.4-1968) aktualisiert. Die Zeichenkodierung definiert 128 Zeichen, bestehend aus 33 nicht druckbaren sowie 95 druckbaren. [return]
  3. Maki-Sushi (巻き寿司, Maki-Zushi, dt. „Rollen-Sushi“) sind mit einer Bambusmatte (Makisu) gerollte Stücke. Es wird für gewöhnlich in Nori eingepackt. [return]
  4. Die Schlacht von Sekigahara (jap. 関ヶ原の戦い, Sekigahara no tatakai) am 21. Oktober 1600 stellte einen Wendepunkt in der japanischen Geschichte dar. Durch den Sieg in dieser Schlacht gelang es dem Haus Tokugawa, seine Vormachtstellung in Japan zu festigen. Im Laufe der nächsten fünfzig Jahre gab es zwar noch einige kleinere Aufstände, aber das Land wurde letztlich befriedet. Viele Historiker setzen den Übergang von der Sengoku-Zeit zur Edo-Zeit auf das Datum dieser Schlacht. [return]