How to make JavaScript code examples runnable?

[rpearce]

Hi! Thanks for this great project.

Is there a way to run editable and runnable JS examples like the Rust ones? It seems those go to a remote location, which could be doable with a nodejs backend somewhere, but I'm not sure how to do that in mdBook.

Is there a configuration option somewhere for what backend to send requests to? Is it something to do with Ace? Do I need a different editor entirely?

My use case: I'm writing a small book on ramda.js and want to have runnable examples of that but without having to pull in runkit or some other such thing.

I'm sure other people would want backends for Go, Python, Ruby, etc., too!

Thanks for your time. 💜

[remexre]

I imagine you'd do some tinkering with book.js in the theme, specifically in the vicinity of:

mdBook/src/theme/book.js

Line 127 in 4c951d5

fetch_with_timeout("https://play.rust-lang.org/evaluate.json", {

[rpearce]

@remexre Thanks for the advice. I'll see if I can find a backend, how much I need to alter the code, and I will follow up here with results when I get them.

[KritR]

I'm trying to get this to work with C. So far I've modified the book.js but I can't get the play buttons to show up yet when language isn't set to rust. Will update if there's any progress.

[KritR]

Ok juts got this working here.
https://github.com/KritR/my-intro-cs/blob/master/theme/book.js
One annoying thing that's happening right now is that #'s are being stripped from the beginning of my includes.
But besides that. Here's what's changed.

• Removed rust crates stuff
  • These blocks of code seemed redundant, but I don't know if removing this is necessary.
• Replaced run-rust with run-c
  • This is where the main c running logic is
• Replaced all instances of language-rust with language-c
  • In markdown the formatt is specified as c,editable
• Added code to wrap language-c blocks with playground class
  • This enables the play button support

That should be most of it.

If you wanted to tweak my version of book.js.
It would be easy enough to replace all instances of language-c with language-javascript.
And then replace the runC() method with something that ran the javascript code, and outputted the text to the result box.

[rpearce]

I appreciate you. I haven't gotten to this point yet (still doing other building stuff), but I will pretty soon.

[md-rehman]

Making JS example runnable is simple, you can check the demo here.

To do this simply add this inside the theme folder.

I have tried to add comments and make the code more readable.

There is one issue though, i.e., syntax highlighting is not working. If someone knows how to do it, please share.

[JSH32]

Did anyone figure out syntax highlighting?

[dalance]

@md-rehman @JSH32

I've opened #2286.
It is a complete guide including syntax highlighting for custom playground.

[ronyhe]

@md-rehman @JSH32

I've opened #2286. It is a complete guide including syntax highlighting for custom playground.

Thank you for this! Helps me immensely!