The default markdown syntax is supported when writing documentation.
Front matter is used to add metadata to your Markdown file (title & description). It is provided at the very top of the file, enclosed by three dashes ---. The content is parsed as YAML.
If no Front matter is detected, the metadata will be populated with the following:
title: first main title detecteddescription: first paragraph detected
---
title: This is a custom title
description: This is a custom description
---The documentation website nx.dev is using custom Markdown syntax to enable the authors to add functionality to its content.
Callouts are available to get the attention of the reader on some specific type of information.
{% callout type="caution|check|note|warning" title="string" %}
Your content goes here.
{% /callout %}Cards allow to show content in a grid system with a title, a description, a type and an url (internal/external).
{% cards %}
{% card title="string" description="string" type="documentation|external|video" url="string" /%}
{% card title="string" description="string" type="documentation|external|video" url="string" /%}
// as many as cards you want
{% /cards %}You can add specific languages and a filename on the code snippet displayed.
```javascript {% fileName="main.js" %}
const code = "goes here";
```
You can display your terminal output with a dedicated component the same way you would show code.
``` {% command="node index.js" %}
My terminal output here!
```
You can optionally also pass a path like
``` {% command="node index.js" path="~/myorg" %}
My terminal output here!
```
We can display a special iframe and setting its width inside the document.
{% iframe
src="https://staging.nx.app/orgs/62d013d4d26f260059f7765e/workspaces/62d013ea0852fe0a2df74438?hideHeader=true"
title="Nx Cloud dashboard"
width="100%" /%}If the type of the card is set to type="video" the url is a valid YouTube url, then the card will show a thumbnail of the video.
We can display a special button inviting the reader to go to a GitHub repository.
{% github-repository url="https://github.com/nrwl/nx-examples" /%}We can display a special button inviting the reader to go to a VSCode marketplace to install the official Nx plugin.
{% install-nx-console /%}We can display Nx Cloud related content in the documentation with a visual cue.
{% nx-cloud-section %}
Your content goes here.
{% /nx-cloud-section %}You can show content in a grid of 2 columns, via the side-by-side shortcode.
{% side-by-side %}
You first content is here.
You second content is over here. _Note the space in between._
{% /side-by-side %}You can display multiple related information via a tabbing system.
{% tabs %}
{% tab label="npm" %}
NPM related information.
{% /tab %}
{% tab label="yarn" %}
Yarn related information.
{% /tab %}
{% /tabs %}Embed a YouTube video directly with the following shortcode, control the title and the associated width.
{% youtube
src="https://www.youtube.com/embed/rNImFxo9gYs"
title="Nx Console Run UI Form"
width="100%" /%}Embed an Nx Graph visualization that can be panned by the user.
{% graph height="450px" %}
```json
{
"projects": [
{
"type": "app",
"name": "app-changed",
"data": {
"tags": ["scope:cart"]
}
},
{
"type": "lib",
"name": "lib",
"data": {
"tags": ["scope:cart"]
}
},
{
"type": "lib",
"name": "lib2",
"data": {
"tags": ["scope:cart"]
}
},
{
"type": "lib",
"name": "lib3",
"data": {
"tags": ["scope:cart"]
}
}
],
"groupByFolder": false,
"workspaceLayout": {
"appsDir": "apps",
"libsDir": "libs"
},
"dependencies": {
"app-changed": [
{
"target": "lib",
"source": "app-changed",
"type": "direct"
}
],
"lib": [
{
"target": "lib2",
"source": "lib",
"type": "implicit"
},
{
"target": "lib3",
"source": "lib",
"type": "direct"
}
],
"lib2": [],
"lib3": []
},
"affectedProjectIds": []
}
```
{% /graph %}