diff --git a/docs/_docset.yml b/docs/_docset.yml index 36360325f..1f81ed65d 100644 --- a/docs/_docset.yml +++ b/docs/_docset.yml @@ -65,6 +65,7 @@ toc: - file: comments.md - file: conditionals.md - file: dropdowns.md + - file: definition-lists.md - file: example_blocks.md - file: file_inclusion.md - file: frontmatter.md diff --git a/docs/syntax/definition-lists.md b/docs/syntax/definition-lists.md new file mode 100644 index 000000000..4ba2f87f2 --- /dev/null +++ b/docs/syntax/definition-lists.md @@ -0,0 +1,49 @@ +# Definition Lists + + +A Definition List in Markdown is created by writing a term on one line, followed by a colon and at least one space (`: `) on the next line, followed by the definition. Multiple paragraphs in the definition should be indented with spaces to match the definition text. + + +## Basic definition list + +::::{tab-set} + +:::{tab-item} Output + +Fruit +: A sweet and fleshy product of a tree or other plant that contains seed and can be eaten as food. Common examples include apples, oranges, and bananas. Most fruits are rich in vitamins, minerals and fiber. + +Vegetable +: Any edible part of a plant that is used in savory dishes. This includes roots, stems, leaves, flowers, and sometimes fruits that are used as vegetables. + + Unlike fruits, vegetables are typically lower in sugar content and higher in fiber. Common examples include carrots, broccoli, spinach, potatoes, and tomatoes (which are technically fruits). + +Grain +: The edible seeds or fruit of grass-like plants belonging to the family Poaceae. These include wheat, rice, corn, oats, and barley. See [Types of Grains](https://en.wikipedia.org/wiki/Grain). + +Legume +: Plants in the family Fabaceae, or their fruit or seeds, such as peas, beans, lentils and peanuts. See [Common Legumes](https://en.wikipedia.org/wiki/Legume). + +::: + +:::{tab-item} Markdown + +```markdown +Fruit +: A sweet and fleshy product of a tree or other plant that contains seed and can be eaten as food. Common examples include apples, oranges, and bananas. Most fruits are rich in vitamins, minerals and fiber. + +Vegetable +: Any edible part of a plant that is used in savory dishes. This includes roots, stems, leaves, flowers, and sometimes fruits that are used as vegetables. + + Unlike fruits, vegetables are typically lower in sugar content and higher in fiber. Common examples include carrots, broccoli, spinach, potatoes, and tomatoes (which are technically fruits). + +Grain +: The edible seeds or fruit of grass-like plants belonging to the family Poaceae. These include wheat, rice, corn, oats, and barley. See [Types of Grains](https://en.wikipedia.org/wiki/Grain). + +Legume +: Plants in the family Fabaceae, or their fruit or seeds, such as peas, beans, lentils and peanuts. See [Common Legumes](https://en.wikipedia.org/wiki/Legume). +``` + +::: + +:::: diff --git a/src/Elastic.Markdown/Assets/markdown/definition-list.css b/src/Elastic.Markdown/Assets/markdown/definition-list.css new file mode 100644 index 000000000..f3c881b2a --- /dev/null +++ b/src/Elastic.Markdown/Assets/markdown/definition-list.css @@ -0,0 +1,13 @@ +@layer components { + .markdown-content { + dl { + @apply mt-4; + } + dt { + @apply font-mono text-grey-100 mt-6; + } + dd { + @apply mt-2 ml-4; + } + } +} diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index e16fa0016..d4c49dba5 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/src/Elastic.Markdown/Assets/styles.css @@ -8,6 +8,7 @@ @import "./copybutton.css"; @import "./markdown/admonition.css"; @import "./markdown/dropdown.css"; +@import "./markdown/definition-list.css"; #default-search::-webkit-search-cancel-button { padding-right: calc(var(--spacing) * 2);