3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-02 19:57:25 +02:00
Code Issues Projects Releases Packages Wiki Activity

docs(v2): minor revisions on live coding docs (#1594)

Browse source 
* Use relative file path in md

* Need .md file extention in link

* docs(v2): minor revisions on live coding block
This commit is contained in:
Wei Gao 2019-06-09 12:04:37 +08:00 • committed by GitHub
parent 3496f6e609
commit e2338bd0c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
website/docs/configuration.md
View file

@ -9,7 +9,7 @@ Docusaurus has a unique take on configurations. We encourage you to congregate i
Keeping a well-maintained `docusaurus.config.js` helps you, your collaborators, and your open source contributors be able to focus on docs while having certain fields easy to customize.
For reference to each of the configurable fields, you may refer to the API reference of [docusaurus.config.js](/docs/docusaurus.config.js).
For reference to each of the configurable fields, you may refer to the API reference of [docusaurus.config.js](docusaurus.config.js.md).
## What goes into `docusaurus.config.js`?
@ -24,8 +24,6 @@ The configurations can be categorized into:
- [Theme configurations, plugins, and presets](#theme-plugins-and-presets-configurations)
- [Custom configurations](#custom-configurations)
For more details on the API, check out [the API Reference on `docusaurus.config.js`](docusaurus.config.js)
### Site meta
Site meta contains the essential meta information such as titles and `favicon`.

14
website/docs/writing-docs.mdx
View file

@ -191,15 +191,19 @@ console.log('Every repo must come with a mascot.');
**Work in Progress** Currently the Prism theme we use is [Night Owl](https://github.com/FormidableLabs/prism-react-renderer/blob/master/themes/nightOwl.js). We will support customized theme in a future version.
## React Live Editor
## Interactive Coding Editor
You can also create a react live editor by installing a plugin.
(Powered by [React Live](https://github.com/FormidableLabs/react-live))
You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin.
First, add the plugin to your package.
```bash
npm i @docusaurus/theme-live-codeblock
```
Add it to your `docusaurus.config.js`.
You will also need to add the plugin to your `docusaurus.config.js`.
```diff
module.exports = {
@ -209,7 +213,7 @@ module.exports = {
}
```
Then create a code block with `live` attached to the language meta string.
To use the plugin, create a code block with `live` attached to the language meta string.
```jsx live
function Clock(props) {
@ -234,7 +238,7 @@ Then create a code block with `live` attached to the language meta string.
}
```
It will render an interactive editor. Changes to the code will reflect on the result panel live.
The code block will be rendered as an interactive editor. Changes to the code will reflect on the result panel live.
```jsx live
function Clock(props) {