JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/languages/r.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/github.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fdfcfd4773d48d3"></script>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3 style='color:#444444;'>Example</h3>
            <!-- AddThis Button BEGIN -->
            <div class="addthis_toolbox addthis_default_style ">
                <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                <a class="addthis_button_tweet"></a>
                <a class="addthis_button_pinterest_pinit"></a>
                <a class="addthis_counter addthis_pill_style"></a>    
            </div>
            <!-- AddThis Button END -->
            <iframe name='chart' width='100%' height=500>
            </iframe>
          <div class='row' class="col-md-8 col-md-offset-2">
              <p class='pull-left'>Created with <a href='http://rcharts.io'>rCharts</a></p>
              
              
            <a class='pull-right' href="https://gist.github.com/ramnathv/532a1e4e4219f4a47f24/raw/be5dd09797e79e85d3a698995aa1c655960e3736/data.csv" download="data.csv">Download Data</a>
            </div>
            <div id='codewrap' class='row' class="col-md-8 col-md-offset-2">
           <pre id="info"><code id='code'></code></pre>
             <div id="disqus_thread"></div>
            </div>
        </div>
    </div>
</div>

CSS

iframe {
  border: 1px solid #DEDEDE;   
}

body{margin-top:40px;}
#codewrap{
    margin-top: 20px;
}
#disqus_thread{
  padding-top:20px;
}

JavaScript

var addthis_config = {"data_track_addressbar":true}

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'rcharts2'; 
(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

function loadgist(gistid, filename, callback) {

    $.ajax({
      url: 'https://api.github.com/gists/'+gistid,
      type: 'GET',
      dataType: 'jsonp'
    }).success( function(gistdata) {
        var content = gistdata.data.files[filename].content;
        callback(content)
      }).error( function(e) {
      // ajax error
    });
}


function showChart(gistid) {

    $.ajax({
      url: 'https://api.github.com/gists/' + gistid,
      type: 'GET',
      dataType: 'jsonp'
    }).success( function(gistdata) {
        var html = gistdata.data.files['index.html'].content;
        writeToFrame('chart', html)
        var code = gistdata.data.files['README.R'].content;
        addCode(code)
      }).error( function(e) {
      // ajax error
    });
}

function writeToFrame(id, content) {
  var iframe = window.frames[id].document;
  iframe.open();
  iframe.write(content);
  iframe.close();
}

function DoSomethingWith(content) {
    //$("#info").text(content);
  writeToFrame('chart', content)
}

function addCode(content){
  $('#code').text(content)
  $('#code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
}

//loadgist("532a1e4e4219f4a47f24", "index.html", DoSomethingWith);
//loadgist("532a1e4e4219f4a47f24", "README.R", addCode);
showChart("532a1e4e4219f4a47f24")