How to Enable Editable Code Playgrounds in mdBook?

help
1

I'm using mdBook for a project and want to allow users to edit and rerun code snippets, not just run them. Here's my current book.toml:

default-theme = "light"
preferred-dark-theme = "navy"
smart-punctuation = true
mathjax-support = false
copy-fonts = true
no-section-label = false
git-repository-url = "https://github.com/author/repo"
git-repository-icon = "fa-github"
edit-url-template = "https://github.com/author/repo/edit/main/guide/{path}"
site-url = "/project/"
cname = "project.rs"
input-404 = "not-found.md"

[output.html.playpen]
editable = true
copy-js = true
line-numbers = true  # Optional: adds line numbers for better usability
2

Editor - mdBook Documentation

You might be missing the editable tag on the code snippet itself?

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

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

Sure thanks. This works.

Is there any way if I want to enable this at the config level?

4

I’m not sure, I never used mdbook configuration/customization much myself. Judging from documentation I could find online, this might not have a top-level configuration, except perhaps the (presumably overkill) solution of writing a whole preprocessor just for this. But of course, someone else might know more/better :slight_smile:

5

Doesn't setting output.html.playground.editable = true work? It's described on the page steffahn linked above.

1 Like
6

For some reasons. It doesn’t work when I enable it. but when I set the editable in the code snippet it works!

7

I think that the documentation states that one need to do both – enable the feature in the first place in the config, and tag each code block that should be editable with that attribute.

8

You are right, I checked it locally. Was this immediately clear to you? I read the first paragraph as "make all code blocks editable", rather than "enable the feature so that the editable marker on code blocks works". Might be just me, but if not, maybe the wording of the paragraph could be improved.

1 Like
9

No, not immediately clear; though after re-reading it once, that’s what I did understand from it. I too think the wording of the documentation can be improved here.

2 Likes
10

I PRed something.

3 Likes