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!')

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.