esironal

Change e.getSession().setMode(...) to "ace/mode/<language>" where <language> is your preferred programming language to have proper syntax highlighting. Then copy and paste the code into your browser bar and edit away :D.

data:text/html,
<div class="e" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;" id="editor"></div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
	var e = ace.edit("editor");
	e.setTheme("ace/theme/monokai");
	e.getSession().setMode("ace/mode/javascript");

Regular Colors

Value	Color
\e[0;30m	Black
\e[0;31m	Red
\e[0;32m	Green
\e[0;33m	Yellow
\e[0;34m	Blue
\e[0;35m	Purple

	// My brand

	.brand
	%a{:href => 'https://www.jamiecoulter.co.uk',:target => '_blank'}
	%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'}

	// Begin Body

	.swanky

	//REMOKU
	//A. Cassidy Napoli
	//Copyright 2012
	//License: NEW BSD
	//
	////////////////////////
	//BEGIN HELPER FUNCTIONS
	//list of variable stored to cookies/localStorage
	var remokuVarNames = "rokuAddress manualRokus namedRokus scannedRokus myNetwork rokuCount macros showFavs fav1 fav2 fav3 bgColor fgColor".split(" ");



	tttt tttt iiii
	ttt:::t ttt:::t i::::i
	t:::::t t:::::t iiii
	t:::::t t:::::t
	ttttttt:::::ttttttt eeeeeeeeeeee ssssssssss ttttttt:::::ttttttt iiiiiiinnnn nnnnnnnn ggggggggg ggggg
	t:::::::::::::::::t ee::::::::::::ee ss::::::::::s t:::::::::::::::::t i:::::in:::nn::::::::nn g:::::::::ggg::::g
	t:::::::::::::::::t e::::::eeeee:::::eess:::::::::::::s t:::::::::::::::::t i::::in::::::::::::::nn g:::::::::::::::::g
	tttttt:::::::tttttt e::::::e e:::::es::::::ssss:::::stttttt:::::::tttttt i::::inn:::::::::::::::ng::::::ggggg::::::gg

	var Gistlink = (function() {

	var _permalink = {};

	// 1) makes a new private gist
	// 2) adds gist id to url
	// 3) creates new browser history
	_permalink.set = function(json) {
	if (!json) return;

	<script src="https://metroui.org.ua/js/jquery-3.3.1.min.js"></script>
	<script src="https://metroui.org.ua/metro/js/metro.js"></script>
	<script src="https://metroui.org.ua/examples/desktop/desktop.js"></script>
	<script>
	var w_icons = [
	'rocket', 'apps', 'cog', 'anchor'
	];
	var w_titles = [
	'rocket', 'apps', 'cog', 'anchor'
	];


	<!DOCTYPE html><html lang='en' class=''>
	<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vaidyasr/pen/waboEY?depth=everything&order

	$(document).ready(function() {
	function pageY(elem) {
	return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
	}

	var buffer = 0; //scroll bar buffer

	function resizeIframe() {
	var height = document.documentElement.clientHeight;
	height -= pageY(document.getElementById('ifm')) + buffer;

	<div class="desktop">

	<div class="taskbar"><center>
	<a class="taskbar__item taskbar__item--video" data-window="video">
	<i class="fa fa-video-camera"></i>
	</a>
	<a class="taskbar__item taskbar__item--notepad" data-window="notepad">
	<i class="fa fa-pencil"></i>
	</a>
	<a class="taskbar__item taskbar__item--terminal" data-window="terminal">