# Content Authoring URL: /bengal/docs/build-sites/write/authoring/ Section: authoring Description: Markdown, MyST directives, and rich content --- > For a complete page index, fetch /bengal/llms.txt. Write in CommonMark Markdown and extend with 60+ MyST directives for tabs, callouts, code blocks, and interactive components. Note Do I need this? Yes when authoring rich docs content. Start with Writer Quickstart (/bengal/docs/get-started/quickstart-writer/) if you have not scaffolded a site yet. For directive syntax lookup, see Directive Kitchen Sink (/bengal/docs/reference/directives/kitchen-sink/). Linking Guide Markdown links, cross-references, anchors, and target directives (/bengal/docs/build-sites/write/authoring/linking/) Linking Reference Template link functions, path resolution, and linking best practices (/bengal/docs/build-sites/write/authoring/linking-reference/) External References Link to external documentation like Python stdlib, NumPy, and other Bengal sites (/bengal/docs/build-sites/write/authoring/external-references/) Code Blocks Add syntax-highlighted code with Rosettes, include files, configure themes, and create multi-language examples (/bengal/docs/build-sites/write/authoring/code-blocks/) Code Blocks Reference Multi-language code tabs, Rosettes syntax themes, and advanced options (/bengal/docs/build-sites/write/authoring/code-blocks-reference/) Images & Media Add images, figures, videos, and embeds to your content (/bengal/docs/build-sites/write/authoring/images-media/) Math and LaTeX Inline and block mathematical expressions with LaTeX (/bengal/docs/build-sites/write/authoring/math/) Tables Create simple and complex tables using pipe syntax, list-table directive, and interactive data-tables (/bengal/docs/build-sites/write/authoring/tables/) Callouts & Admonitions Draw attention to important information with notes, warnings, and tips (/bengal/docs/build-sites/write/authoring/callouts/) Interactive Elements Create tabs, dropdowns, steps, and other interactive content (/bengal/docs/build-sites/write/authoring/interactive/) ## Quick Reference - Text (#) - Links (#) - Math (#) - Code (#) - Callouts (#) markdown MARKDOWN ``` **bold** and *italic* ~~strikethrough~~ `inline code` ``` markdown MARKDOWN ``` [External](https://example.com) [Internal](/docs/get-started/) [[Cross-reference]] docs/page [[#heading]] Anchor link [[ext:python:pathlib.Path]] ``` markdown MARKDOWN ``` $E = mc^2$ $$ \sum_{i=1}^n x_i $$ {math}`\frac{a}{b}` ``` markdown MARKDOWN ``` ```python def hello(): print("Hello!") ``` ``` With line highlighting: markdown MARKDOWN ``` ```python {hl_lines="2"} def hello(): print("Highlighted!") ``` ``` markdown MARKDOWN ``` :::{note} Informational callout. ::: :::{warning} Important warning! ::: :::{tip} Helpful suggestion. ::: ``` ## How Content Flows flowchart LR A[Markdown] --> B[MyST Parser] B --> C{Directive?} C -->|Yes| D[Render Component] C -->|No| E[Render HTML] D --> F[Final Page] E --> F ## Variable Substitution Use`{{ variable }}`syntax to insert frontmatter values directly into your content: markdown MARKDOWN ``` --- product_name: Bengal version: 1.0.0 beta: true --- Welcome to **{{ product_name }}** version {{ version }}. {% if beta %} :::{warning} This is a beta release. ::: {% end %} ``` Note Bengal uses Kida (https://lbliii.github.io/kida/) templating which supports both`{% end %}` (unified syntax) and `{% endif %}`(Jinja-compatible). Use whichever you prefer. ### Available Variables Variable Source Example `Content Authoring` Current page `Content Authoring` `Markdown, MyST directives, and rich content` Current page `Markdown, MyST directives, and rich content` `{{ product_name }}` Frontmatter Direct access to any frontmatter key `` Frontmatter Hugo-style access via`params` `Bengal` Site config `Bengal` `/bengal` Site config `/bengal` ### Cascaded Variables Variables cascade from parent sections. Set them once in a section's`_index.md`: yaml YAML ``` # docs/api/_index.md --- title: API Reference cascade: api_version: v2 deprecated: false --- ``` Then use in any child page: markdown MARKDOWN ``` # docs/api/users.md This endpoint uses API {{ api_version }}. ``` Tip Common use cases: Product names, version numbers, feature flags, environment-specific values, and cascaded metadata like API versions or status badges. ## Available Directives Bengal provides 60+ directives organized by category: Category Directives Admonitions `note`, `tip`, `warning`, `danger`, `error`, `info`, `example`, `success`, `caution`, `seealso` Layout `tabs`, `tab-set`, `cards`, `card`, `child-cards`, `grid`, `container`, `steps`, `step`, `dropdown` Tables `list-table`, `data-table` Code `code-tabs`, `literalinclude` Media `youtube`, `vimeo`, `tiktok`, `video`, `audio`, `figure`, `gallery` Embeds `gist`, `codepen`, `codesandbox`, `stackblitz`, `asciinema`, `spotify`, `soundcloud` Navigation `breadcrumbs`, `siblings`, `prev-next`, `related` Versioning `since`, `deprecated`, `changed` Utilities `badge`, `button`, `icon`, `rubric`, `target`, `include`, `glossary`, `checklist`, `marimo` Seealso - Directives Reference (/bengal/docs/reference/directives/) — Complete directive documentation - Icon Reference (/bengal/docs/reference/icons/) — Available icons ## In This Section Notebooks (/bengal/docs/build-sites/write/authoring/notebooks/) Native Jupyter notebook support — drop .ipynb into content and build 4 pages Callouts & Admonitions (/bengal/docs/build-sites/write/authoring/callouts/) Draw attention to important information with notes, warnings, and tips Code Blocks (/bengal/docs/build-sites/write/authoring/code-blocks/) Add syntax-highlighted code with Rosettes, include files, configure themes, and create multi-language examples Code Blocks Reference (/bengal/docs/build-sites/write/authoring/code-blocks-reference/) Multi-language code tabs, Rosettes syntax themes, and advanced options External References (/bengal/docs/build-sites/write/authoring/external-references/) Link to external documentation like Python stdlib, NumPy, and other Bengal sites Images & Media (/bengal/docs/build-sites/write/authoring/images-media/) Add images, figures, videos, and embeds to your content Interactive Elements (/bengal/docs/build-sites/write/authoring/interactive/) Create tabs, dropdowns, steps, and other interactive content Linking Guide (/bengal/docs/build-sites/write/authoring/linking/) Markdown links, cross-references, anchors, and target directives Linking Reference (/bengal/docs/build-sites/write/authoring/linking-reference/) Template link functions, path resolution, and linking best practices Math and LaTeX (/bengal/docs/build-sites/write/authoring/math/) Inline and block mathematical expressions with LaTeX Tables (/bengal/docs/build-sites/write/authoring/tables/) Create simple and complex tables using pipe syntax, list-table directive, and interactive data-tables Related Pages Content Organization (/bengal/docs/build-sites/structure/organization/) Pages, sections, and bundles explained Related Structure (/bengal/docs/build-sites/structure/) Organize pages, collections, i18n, versioning, and site analysis Related Build Sites (/bengal/docs/build-sites/) Write, structure, customize, and extend your Bengal site Related The Component Model (/bengal/docs/build-sites/structure/organization/component-model/) Understanding Bengal's Component Model: Identity, Mode, and Data. Related Component Model Reference (/bengal/docs/build-sites/structure/organization/component-model-reference/) Exhaustive type, variant, props, cascade, and skeleton examples for Bengal's component model Related persona-writer (/bengal/tags/persona-writer/)