Diese Seite orientiert sich inhaltlich eng an ➔ folgender Seite aus der Dokumentation des Hugo Learn Themes
Zur Erstellung der Inhalte wird Markdown verwendet. Markdown ist eine sehr leicht zu erlernende Auszeichnungssprache, die sich als offenes Reintextformat ideal zur Erstellung von Open Educational Resources eignet und in zahlreiche Zielformate überführt werden kann (neben HTML auch XML, PDF, ePUB oder Office-Formate).
Markdown wurde von John Gruber und Aaron Swartz entworfen und liegt seit 2021 in einer durch die Anwendungscommunity erstellten Spezifikation vor.
The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email. – John Gruber
Diese Seite gibt einen Überblick über die von der Vorlage unterstützten Standardformatierungen. Jenseits der Standarformatierungen implementiert die Vorlage mehrere Markdown-Erweiterungen, deren Syntax im Kapitel Specials anhand von Beispielen erläutert wird.
# Überschrift 1
## Überschrift 2
### Überschrift 3
#### Überschrift 4
##### Überschrift 5
###### Überschrift 6
Ausgabe:
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
Ausgabe:
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
Folgender Textteil wird fett dargestellt.
**wird fett dargestellt**
Folgender Textteil wird kursiv dargestellt.
*wird kursiv dargestellt*
Folgender Textteil wird durchgestrichen dargestellt.
~~wird durchgestrichen dargestellt~~
Zitate können mit einem >
vor dem zitierten Absatz markiert werden
> To be or not to be
Ausgabe:
To be or not to be
Zitate können auch verschachtelt werden:
> To be or not to be
> > That is the question
Ausgabe:
To be or not to be
That is the question
Punktlisten können mit folgenden vorangestellten Zeichen erzeugt werden:
* valid bullet
- valid bullet
+ valid bullet
Beispiel:
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
Ausgabe
Eine nummerierte Liste wird durch vorangestellte Zahlen erzeugt:
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem
Ausgabe:
Code-Snippets im Text können mit `
markiert werden.
In diesem Beispiel wird `<section></section>` als Code dargestellt.
Ausgabe:
In diesem Beispiel wird <section></section>
als Code dargestellt.
Um mehrzeilige Code-Blöcke zu erzeugen wird der Code zwischen ```
gestellt. Hierbei kann durch die Angabe eines Schlüsselworts für den darzustellenden Code ein Syntax Highlighting erzeugt werden.
```js
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
```
Ausgabe:
grunt.initConfig({
assemble: {
options: {
assets: 'docs/assets',
data: 'src/data/*.{json,yml}',
helpers: 'src/custom-helpers.js',
partials: ['src/partials/**/*.{hbs,md}']
},
pages: {
options: {
layout: 'default.hbs'
},
files: {
'./': ['src/templates/pages/index.hbs']
}
}
}
};
Tabellen werden durch Hinzufügen von Pipes als Trennlinien zwischen den einzelnen Zellen und durch Hinzufügen einer Reihe von Strichen (ebenfalls durch Pipes getrennt) unter der Kopfzeile erstellt.
| Kopfzeile 1 | Kopfzeile 2 |
| ----------- | ----------- |
| Zelle 1 | Zelle 2 |
| Zelle 2 | Zelle 4 |
| Zelle 5 | Zelle 6 |
Ausgabe
Kopfzeile 1 | Kopfzeile 2 |
---|---|
Zelle 1 | Zelle 2 |
Zelle 2 | Zelle 4 |
Zelle 5 | Zelle 6 |
Durch Hinzufügen eines Doppelpunkts auf der rechten Seite der Striche unter einer Überschrift wird der Text für diese Spalte rechts ausgerichtet.
| Kopfzeile 1 | Kopfzeile 2 |
| -----------: | -------------------------------------: |
| Eins | Lorem ipsum dolor |
| Zwei | consetetur sadipscing elitr |
| Drei | sed diam nonumy eirmod tempor invidunt |
Augabe:
Kopfzeile 1 | Kopfzeile 2 |
---|---|
Eins | Lorem ipsum dolor |
Zwei | consetetur sadipscing elitr |
Drei | sed diam nonumy eirmod tempor invidunt |
[mainzed](https://mainzed.org)
Ausgabe:
[mainzed](https://mainzed.org "Mainzer Zentrum für Digitalität in den Geistes und Kulturwissenschaften")
Ausgabe:
Mit Ankern können Sprunglinks zu Überschriften auf der gleichen oder einen anderen Seite erzeugt werden.
* [Überschriften](#überschriften)
* [Tabellen](#tabellen)
* [Hyperlinks](#hyperlinks)
Ausgabe:
Auf folgende Weise kann eine Trennlinie erzeugt werden
___
: drei Unterstriche---
: drei Striche***
: drei SternchenAusgabe:
Bilder haben die gleiche Syntax wie Hyperlinks mit einem vorangestellten Ausrufezeichen (und optional mit einem Alternativtext).
![Diginaut](diginaut.png "Diginauten der Digitalen Methodik")
Ausgabe:
Die Bildgröße kann durch die Angabe von Höhe und Breite als Paramter verändert werden
Add HTTP parameters width
and/or height
to the link image to resize the image. Values are CSS values (default is auto
).
![Diginaut](diginaut.png?width=10pc)
![Diginaut](diginaut.png?height=50px)
Durch die Angabe der Schlüsselwörter shadow
und/oder border
können Rahmen und Schlagschatten für eingebundene Bilder erzeugt werden.
![Diginaut](diginaut.png?width=10pc&classes=shadow)
![Diginaut](diginaut.png?width=10pc&classes=border)
![Diginaut](diginaut.png?width=10pc&classes=border,shadow)
Standardmäßig ist bei allen Bildern die Klickvergrößerung aktiviert. Diese kann über den Parameter featherlight
mit dem Wert false
abgeschaltet werden.
![Diginaut](diginaut.png?width=10pc&featherlight=false)
:-)