Feature Request: Javascript for Viz (d3.js)

[koaning]

If you copy and paste this:

<!-- $theme: default -->

# Better Slides with Marp

<iframe src="http://koaning.io/theme/iframes/predict.html" height="300px" width="100%" frameBorder="0"></iframe>

### Vincent D.Warmerdam - @fishnets88 - koaning.io

---

Div below here.
<div id="viz"></div>
Above here. 

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>

<script type="text/javascript">

var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    

sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");});

</script>

You'll notice that the iframe loads splendidly (awesome!). This opens up the potential for truly interactive presentations, but it might be preferable to have the d3 visualisation live inside the slidedeck instead of having to use an iframe to access it. You'll notice that the second page containing the script tag and the custom javascript yields no results.

Is javascript turned off by default? Is this a possible feature?

[koaning]

Wow. Ok. Nevermind.

This feature does work when you add --- at the bottom of that snippet. Otherwise the parser probably does not recognize the end of the file.

[koaning]

This is amazing.

<!-- $theme: default -->

# Better Slides with Marp

<iframe src="http://koaning.io/theme/iframes/predict.html" height="300px" width="100%" frameBorder="0"></iframe>

### Vincent D.Warmerdam - @fishnets88 - koaning.io

---

Div below here.
<div id="viz"></div>
Above here. 

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>

<script type="text/javascript">

var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    

sampleSVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");});

</script>

---

<iframe src="http://koaning.io/fluctuating-repetition.html" height="300px" width="100%" frameBorder="0"></iframe>

---