Skip to content

Documenting the editor #521 #552

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.

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

Merged
merged 1 commit into from
Jan 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions book-example/book.toml
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,6 @@ author = "Mathieu David"

[output.html]
mathjax-support = true

[output.html.playpen]
editable = true
1 change: 1 addition & 0 deletions book-example/src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- [Theme](format/theme/theme.md)
- [index.hbs](format/theme/index-hbs.md)
- [Syntax highlighting](format/theme/syntax-highlighting.md)
- [Editor](format/theme/editor.md)
- [MathJax Support](format/mathjax.md)
- [Rust code specific features](format/rust.md)
- [For Developers](lib/index.md)
Expand Down
40 changes: 40 additions & 0 deletions book-example/src/format/theme/editor.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Editor

In addition to providing runnable code playpens, mdBook optionally allows them to be editable. In order to enable editable code blocks, the following needs to be added to the ***book.toml***:

```toml
[output.html.playpen]
editable = true
```

To make a specific block available for editing, the attribute `editable` needs to be added to it:

<pre><code class="language-markdown">```rust,editable
fn main() {
let number = 5;
print!("{}", number);
}
```</code></pre>

The above will result in this editable playpen:

```rust,editable
fn main() {
let number = 5;
print!("{}", number);
}
```

Note the new `Undo Changes` button in the editable playpens.

## Customizing the Editor

By default, the editor is the [Ace](https://ace.c9.io/) editor, but, if desired, the functionality may be overriden by providing a different folder:
Copy link
Contributor Author

@projektir projektir Jan 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was originally intended that the playpen editor was also customizable in the same way the theme is: by providing a folder with files that are named the same. But I am a bit confused because the theme page says that the new theme folder needs to be next to src, while I always thought it was inside src, and when I added a folder next to src rather than inside, mdBook did not report that it was copying anything.

I generally had trouble getting this functionality working regardless; I only ever recall theme/playpen replacement working if I manually specified the folder in the .toml. Not sure if bug, or I'm using it wrong, or... but since it's not functionality I can replicate I decided to not document it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not exactly sure how it works either :(

I'm planning to give the HTML renderer a massive makeover some time soon and in the process I'll be able to document how it actually does rendering.

That kind of functionality should be easy to test. We just drop a themes/ directory in the dummy book's src/ (or next to it) and then make sure mdbook picks it up.


```toml
[output.html.playpen]
editable = true
editor = "/path/to/editor"
```

Note that for the editor changes to function correctly, the `book.js` inside of the `theme` folder will need to be overriden as it has some couplings with the default Ace editor.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So what this is saying is that technically you can override the editor, but in doing so you also need to maintain your own patched version of book.js? That sounds... not ideal 😜

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not, but it is the truth. At least at the time that I worked on this, I didn't see any feasible way of making book.js decoupled. That would require quite a bit of refactoring.

1 change: 1 addition & 0 deletions book-example/src/misc/contributors.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ If you have contributed to mdBook and I forgot to add you, don't hesitate to add
- Fu Gangqiang ([FuGangqiang](https://github.com/FuGangqiang))
- [Michael-F-Bryan](https://github.com/Michael-F-Bryan)
- [Chris Spiegel](https://github.com/cspiegel)
- [projektir](https://github.com/projektir)