JSFiddle - React, Tailwind, and code Playground
by CyberLight
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Code Climate Report for code</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-core.min.js" data-manual></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.css" />
<script>
/**
* Report JS
*/
(function(){
Prism.hooks.add('complete', function(env) {
var pre = env.element.parentNode;
var lines = pre && pre.dataset.line;
if (!pre || !lines || !/pre/i.test(pre.nodeName)) {
console.log('nope');
return;
}
var container = pre.parentElement;
if (!container || !container.classList.contains('code')) {
return;
}
console.log('collapsing', container);
container.style.height = 'auto';
});
})();
jQuery(function(){
function isVisible(element) {
return !!(
element.offsetWidth ||
element.offsetHeight ||
element.getClientRects().length
...