Special Symbols
xyd provides several special symbols that enhance your markdown content.
Learn how to use them below.
Component Directive
Component Directive (:::<component>) is used to render UI components directly in your markdown:
to pass props into component use {<key>=<value>}:
if component props accept booleans you can use sugar syntax:
if component does not have a children prop you can use shorter directive syntax(::):
if nested components, parent must use extra ::
Function Calling
Function Calling (@<function>) is used to execute functions within your markdown content:
~/ points to root of your docs project.
Output VariableComing Soon
Output Variable (@out(<name>=<expression>)) is used to pass output variables from content files, useful for composing documentation content:
or if output variable is a callback:
Output Variable API
Define your own custom output variable using follow API:
Read VariableComing Soon
Read Variable ({<read_variable>}) is used to access read variables from page meta and other pages:
Attributes
Some built-in tags has abilities to pass attributes (<tag|expression>[<attributes>]):
Learn more about toc attributes here.
Full Example
Here's how you can combine all these symbols in a single markdown file:
Summary
These special symbols provide powerful ways to enhance your markdown documentation:
- Components: Add rich UI elements directly in markdown
- Functions: Import and execute code dynamically
- Variables: Pass data between content files
- Page Meta Access: Use metadata from your content files
By combining these features, you can create interactive and dynamic documentation with minimal effort.
Show your support! Star us on GitHub ⭐️