Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Docs] Add section on how to preview docs changes on VSCode #51019

Merged
merged 5 commits into from
Jun 9, 2023
Merged

[Docs] Add section on how to preview docs changes on VSCode #51019

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
01bd3f1
Add section on previewing docs changes locally
delbaoliveira Jun 9, 2023
c7a79a0
Update 01-contribution-guide.mdx
delbaoliveira Jun 9, 2023
17031d9
Formatting
delbaoliveira Jun 9, 2023
482acab
Merge branch 'canary' into docs-bi0f
manovotny Jun 9, 2023
79d1f13
Merge branch 'canary' into docs-bi0f
manovotny Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 20 additions & 2 deletions docs/05-community/01-contribution-guide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,27 @@ If you're new to GitHub, we recommend reading the [GitHub Open Source Guide](htt

The docs are written in [MDX](https://mdxjs.com/), a markdown format that supports JSX syntax. This allows us to embed React components in the docs. See the [GitHub Markdown Guide](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) for a quick overview of markdown syntax.

### VSCode Extensions
### VSCode

Although you can use any code editor to write MDX, we recommend the following extensions for VSCode users:
#### Previewing Changes Locally

VSCode has a built-in markdown previewer that you can use to see your edits locally. To enable the previewer for MDX files, you'll need to add a configuration option to your user settings.

Open the command pallete (`⌘ + ⇧ + P` on Mac or `Ctrl + Shift + P` on Windows) and search from `Preferences: Open User Settings (JSON)`.

Then, add the following line to your `settings.json` file:

```json filename="settings.json"
"files.associations": {
"*.mdx": "markdown"
}
```

Next, open the command palette again, and search for `Markdown: Preview File` or `Markdown: Open Preview to the Side`. This will open a preview window where you can see your formatted changes.

#### Extensions

We also recommend the following extensions for VSCode users:

- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx): Intellisense and syntax highlighting for MDX.
- [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly): Grammar and spell checker.
Expand Down