3.0 KiB
title |
---|
x0: Using Markdown |
Using Markdown
Using standard markdown syntax for documentation means that your docs will be easy to edit and render in many different markdown renderers, such as on GitHub.com.
In addition to the standard markdown syntax, x0 supports front matter and special fenced code blocks that can render as live examples or previews of React components.
Links
Standard markdown links work out of the box.
Under the hood, x0 converts relative links to React Router Link
components,
and absolute URLs are standard <a>
tags.
- [Link to another page](about)
- [Link to another site](http://example.com)
Images
Images in the same directory can be included with relative URLs, but we recommend using a CDN and absolute URLs for any images.
![Hubble telescope image of a nebula](https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20)
Note: When using relative URLs, be sure to copy image assets to the dist folder when exporting a site with the x0 build
command.
Code Fences
To include a code snippet use a code fence.
```sh
npm install @compositor/x0
```
Live Editor
x0 includes support for special code fence language attributes for rendering live examples of React components.
Use the .jsx
(note the .
prefix) to render a live preview with an editable code editor.
```.jsx
<Button>Hello</Button>
```
The above code will render as the following (note this is only visible on the documentation site). Try editing the JSX code below the preview.
<Button>Hello</Button>
Using code fences means that your example code will render in any standard markdown renderer, including GitHub.
Important Note: To include custom components in scope for the live preview code fences,
you must use the ScopeProvider
in a custom App component.
MDX
The LiveEditor also supports MDX format. Use the .mdx
language attribute to use MDX.
```.mdx
# Hello MDX
<Button>Hello</Button>
```
# Hello MDX
<Button>Hello</Button>
Live Preview
To render a component preview without the code editor below, use the !jsx
(note the !
prefix) language attibute.
```!jsx
<Button>Hello</Button>
```
The above code will render the following:
<Button>Hello</Button>
Front Matter
All .md
, .mdx
, and .jsx
files in x0 support the use of front-matter for setting default props and page-level metadata.
---
title: Getting Started
---
Options
Use the following front-matter options for controlling aspects of how a page renders.
ignore
: when set to true, x0 will not add the file as a route
HTML Template Options
Front matter will be passed to the HTML template to allow control over the page title, metatags and more.