Zum Hauptinhalt springen

Deflist

Mit Definitionslisten ist es einfach, Wort-Definitionen oder ähnliche Inhalte zu erstellen.

<dl>
    <dt>Hello World</dt>
    <dd>The simplest example</dd>
    <dt>World</dt>
    <dd>Our planet</dd>
</dl>
http://localhost:3000
Hello World
The simplest example
World
Our planet

Um dies im Markdown mit weniger Aufwand zu erstellen, kann eine an 👉 pandoc angelehnte Syntax verwendet werden:

Hello World
: The simplest example
World
: Our planet

mit demselben Resultat:

http://localhost:3000
Hello World
The simplest example
World
Our planet

Mehrzeilige Definitionen​

Streetfood
: Auf der Strasse zubereitete Speisen, die oft in mobilen Verkaufsständen oder -wagen verkauft werden.
: ![--width=350px --margin=0](../images/street-food.jpg)
Schnee auf der Strasse
: In der Regel ein Zeichen für Winter :mdi[snowflake]{.blue}.
: In __Bern__ zuletzt gesehen am 10. Januar 2024.
: ![--width=350px --margin=0](../images/snowy-street.jpg)
http://localhost:3000
Streetfood
Auf der Strasse zubereitete Speisen, die oft in mobilen Verkaufsständen oder -wagen verkauft werden.
@
Schnee auf der Strasse
In der Regel ein Zeichen für Winter .
In Bern zuletzt gesehen am 10. Januar 2024.
@

Block-Elemente​

Es können auch Block-Elemente eingefügt werden. Dazu muss allerdings eine Blockdirective :::dd verwendet werden.

Hallo Welt
: In Python
:::dd

    ```python
    print("Hello World")
    print('Ich bin ein Block!')
    ```
:::
Hallo Welt in Live
: In Brython
:::dd

    ```py live_py
    print("Hello World")
    print('Ich bin ein Block!')
    ```
:::
http://localhost:3000
Hallo Welt
In Python
print("Hello World")
print('Ich bin ein Block!')
Hallo Welt in Live
In Brython
print("Hello World")
print('Ich bin ein Block!')

Kontext durch Eltern-Klassen​

Die Definitionen können auch durch Eltern-Klassen kontextualisiert werden. Dies ermöglicht eine bessere Organisation und Strukturierung der Inhalte.

`default`
: The simplest example
World
: Our planet

---

<div className="compactDeflist">
`compactDeflist`
: The simplest example
World
: Our planet
</div>

---

<div className="smallDeflist">
`smallDeflist`
: The simplest example
World
: Our planet
</div>
http://localhost:3000
default
The simplest example
World
Our planet
compactDeflist
The simplest example
World
Our planet
smallDeflist
The simplest example
World
Our planet

Manuelle Verwendung​

Es kann auch direkt die entsprechende React-Komponente verwendet werden:

import DefinitionList from "@tdev-components/DefinitionList";

<DefinitionList>
    <dt>Hello World</dt>
    <dd>The simplest example</dd>
    <dt>World</dt>
    <dd>Our planet</dd>
</DefinitionList>
http://localhost:3000
Hello World
The simplest example
World
Our planet

Attribute​

small
Stellt dt und dd untereinander dar - standardmässig auf kleiner Displaygrösse aktiviert.
compact
Reduziert den links-seitigen Abstand und richtet die dt Elemente linksbündig aus.
gridTemplateColumns
Ermöglicht ie Übergabe einer eigenen Definitionder Anordnung von dt und dd Elementen.
default: minmax(8em, 1fr) minmax(10em, 2fr)
ignoreMediaQueries
Ignoriert die automatische Anpassung der Darstellung basierend auf der Displaygrösse.
deault: Ist das Display kleiner als 620px Breit, so wird automatisch small aktiviert.

Installation​

Code
  • src/plugins/remark-deflist
  • src/components/DefinitionList
src/theme/MDXComponents.tsx
import MDXComponents from '@theme-original/MDXComponents';
import DefinitionList from '@tdev-components/DefinitionList';

export default {
  ...MDXComponents,
  Dl: DefinitionList,
};
docusaurus.config.ts
import deflistPlugin from './src/plugins/remark-deflist/plugin';
const BEFORE_DEFAULT_REMARK_PLUGINS = [
    /* ensure to place it before! the images plugin! ... */
    [
        deflistPlugin,
        {
            tagNames: {
                dl: 'Dl',
            },
        }
    ],
];
Zusammenspiel mit dem 👉 remark-images Plugin

Damit Bilder ohne weiteres in Definitionen eingebunden werden können, muss das remark-deflist Plugin vor dem 👉 remark-images Plugin platziert werden.

CC 4.0