After running the snippet, code is concatenated in a single line

hmemcpy commented 6 years ago

Hello! First, thanks so much for this integration, I found it after watching your video from F(by), looks great!

I'm using remark.js, which is a more lightweight presentation builder, similar to reveal.js, runs and renders markdown completely in the browser, no build step needed.

Remark renders markdown code snippets (inside ``` blocks) with a <pre> tag, so I used jquery to wrap the pre tags with <div data-scalafiddle>. It did the trick, and added the Run button. Unfortunately, when the fiddle had loaded, it displayed the code condensed to a single line:

Unfortunately, I'm not too good with JavaScript to even figure out why is this happening... :(

Here's the entire slide code to reproduce. Unfortunately I was unable to make this work in a codepen... Please save this as index.html and run locally.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8">
  </head>
  <body>
    <textarea id="source">
### Single line bug :(
```scala
println("Hello world")

println("Another line")

println(sum(2, 2))

</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script defer src="https://embed.scalafiddle.io/integration.js"></script>
<script>
  remark.create();

  $('pre').wrap('<div data-scalafiddle></div>')
</script>



Thanks, and sorry for the long issue!

hmemcpy commented 6 years ago

And, of course, if you have a better suggestion for embedding this than my jquery hack, please, let me know :)

ochrons commented 6 years ago

The integration script simply calls textContent on the DOM element, so if everything is on a single line (and formatted as multiline via CSS or something), then it cannot work correctly. Do you have some examples of HTML that remark.js produces for Markdown code snippets?

hmemcpy commented 6 years ago

Hey.. sorry for the late response. The generated html for the snippet looks like this:

<code class="scala hljs remark-code">
   <div class="remark-code-line">println(<span class="hljs-string">"Hello world"</span>)</div>
   <div class="remark-code-line"></div>
   <div class="remark-code-line">println(<span class="hljs-string">"Another line"</span>)</div>
   <div class="remark-code-line"></div>
   <div class="remark-code-line">println(sum(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>))</div>
</code>

I guess the extra html elements cause it to break?

ochrons commented 6 years ago

Right, So it's not really a true pre block but lines are created using special divs. Since the line breaks happen between divs, they are not visible to textContent. What happens if you paint the text with mouse and copy paste it? Do you get line breaks or is everything on a single line? (I tried this on their example site and didn't get line breaks)

ochrons commented 6 years ago

I suggest you file this as an issue on remark.js, stating that copy-pasting code examples from the slides doesn't work correctly, since that's something that affects anyone using it.

scalafiddle / scalafiddle-core

After running the snippet, code is concatenated in a single line #24