Code block with `python,playground` cause wrong playground behaviour

[dalance]

Problem

This issue is a part of #3124.

Now code block with python,playground is not supported, so it is expected no-op.
But actually it causes some strange behaviours.

Steps

[output.html.playground]
editable = true

```python,playground
print("hello")
```

```rust
fn main() { println!("hello"); }
```

• broken copy button is shown at the first python code block
• play/copy button is not show at the second rust code block

I think the expected behaviour is the python code block is not playground (because python,playground is not supported) and the rust code block works fine.
If this issue is fixed, user can insert python,playground support by the way of #3124.

Possible Solution(s)

The necessary code change is probably like below:

mdBook/crates/mdbook-html/front-end/js/book.js

Line 45 in a57975d

const playgrounds = Array.from(document.querySelectorAll('.playground'));

-    const playgrounds = Array.from(document.querySelectorAll('.playground'));
+    const playgrounds = Array.from(document.querySelectorAll('pre.playground'));

mdBook/crates/mdbook-html/front-end/js/book.js

Line 273 in a57975d

Array.from(document.querySelectorAll('.playground')).forEach(function(pre_block) {

-    Array.from(document.querySelectorAll('.playground')).forEach(function(pre_block) {
+    Array.from(document.querySelectorAll('pre.playground')).forEach(function(pre_block) {

Notes

No response

Version

mdbook v0.5.3

[abhinav-phi]

Hi! I'd like to work on this.

Plan: I'll reproduce the reported behavior, trace the faulty logic, patch it, and add a test covering the reported case.

Could you please assign this issue to me? Thanks!

/assign take