JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Showdown - Markdown in Javascript</title>
	<script type="text/javascript" src="showdown.js"></script>
	<script type="text/javascript" src="showdown-gui.js"></script>
	<style type="text/css">
		html,body {
			margin:0;
			padding:0;
			font-family: Helvetica, Arial, Verdana, sans-serif;
			font-size: 90%;
			background-color: #e0d8d8;
		}

		html {
			overflow: hidden;
		}

		textarea {
			font-family: monospace;
		}

		#pageHeader {
			margin: 0;
			padding: 0;
			text-align: center;
			margin-bottom: 0;
			margin-top: 0.4em;
			color: #766;
		}

		#pageHeader h1 {
			font-size: 3em;
		}

		#pageHeader * {
			margin: 0;
			padding: 0;
			line-height: 1em;
			font-weight: 100;
		}

		#pageHeader a {
			color: #766;
			text-decoration: none;
			position: relative;
			z-index: 20;
		}

		#pageHeader h1 a:hover {
			color: #fff;
		}

		#pageHeader h4 a:hover {
			text-decoration: underline;
		}

		#leftContainer, #rightContainer {
			margin: 0;
			padding: 0;
			position: relative;
			width: 47.5%;
			margin-top: -1.4em;
		}

		#leftContainer {
			float: left;
			left: 1.5%;
		}

		#rightContainer {
			float: right;
			right: 1.5%;
		}

		#rightContainer > * {
			float: right;
		}

		.paneHeader {
			margin: 0;
			padding: 0;
			position: relative;
			width: 100%;
			display: block;
			height: 2em;
		}

		.paneHeader * {
			position: relative;
			font-weight: 900;
		}

		.paneHeader span {
			background-color: #ddd5d5;
			color: #444;
			padding: 0 0.75em;
			font-size: 110%;
		}

		#paneSetting {
			display: block;
			margin-left: auto;
			margin-right: 0.5em;
			font-size: 110%;
			font-weight: 900;
			font-family: Arial, Verdana, sans-serif;
			background-color: #dacccc;
			color:...

JavaScript

var Showdown={extensions:{}},forEach=Showdown.forEach=function(a,b){if(typeof a.forEach=="function")a.forEach(b);else{var c,d=a.length;for(c=0;c<d;c++)b(a[c],c,a)}},stdExtName=function(a){return a.replace(/[_-]||\s/g,"").toLowerCase()};Showdown.converter=function(a){var b,c,d,e=0,f=[],g=[];if(typeof module!="undefind"&&typeof exports!="undefined"&&typeof require!="undefind"){var h=require("fs");if(h){var i=h.readdirSync((__dirname||".")+"/extensions").filter(function(a){return~a.indexOf(".js")}).map(function(a){return a.replace(/\.js$/,"")});Showdown.forEach(i,function(a){var b=stdExtName(a);Showdown.extensions[b]=require("./extensions/"+a)})}}this.makeHtml=function(a){return b={},c={},d=[],a=a.replace(/~/g,"~T"),a=a.replace(/\$/g,"~D"),a=a.replace(/\r\n/g,"\n"),a=a.replace(/\r/g,"\n"),a="\n\n"+a+"\n\n",a=M(a),a=a.replace(/^[ \t]+$/mg,""),Showdown.forEach(f,function(b){a=k(b,a)}),a=z(a),a=m(a),a=l(a),a=o(a),a=K(a),a=a.replace(/~D/g,"$$"),a=a.replace(/~T/g,"~"),Showdown.forEach(g,function(b){a=k(b,a)}),a};if(a&&a.extensions){var j=this;Showdown.forEach(a.extensions,function(a){typeof a=="string"&&(a=Showdown.extensions[stdExtName(a)]);if(typeof a!="function")throw"Extension '"+a+"' could not be loaded.  It was either not found or is not a valid extension.";Showdown.forEach(a(j),function(a){a.type?a.type==="language"||a.type==="lang"?f.push(a):(a.type==="output"||a.type==="html")&&g.push(a):g.push(a)})})}var k=function(a,b){if(a.regex){var c=new RegExp(a.regex,"g");return b.replace(c,a.replace)}if(a.filter)return a.filter(b)},l=function(a){return a+="~0",a=a.replace(/^[ ]{0,3}\[(.+)\]:[ \t]*\n?[ \t]*<?(\S+?)>?[ \t]*\n?[ \t]*(?:(\n*)["(](.+?)[")][ \t]*)?(?:\n+|(?=~0))/gm,function(a,d,e,f,g){return d=d.toLowerCase(),b[d]=G(e),f?f+g:(g&&(c[d]=g.replace(/"/g,"&quot;")),"")}),a=a.replace(/~0/,""),a},m=function(a){a=a.replace(/\n/g,"\n\n");var...