JSFiddle - React, Tailwind, and code Playground
by icodeforlove
HTML
<script>
var colors=function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="",n(0)}([function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}function o(){for(var t=arguments.length,n=Array(t),e=0;e<t;e++)n[e]=arguments[e];return new c.default(n)}Object.defineProperty(n,"__esModule",{value:!0});var u=e(1),i=r(u),f=e(36),c=r(f),a=e(91),s=r(a),l=e(65),p=r(l);(0,s.default)(),o.define=p.default.define;var y={black:[0,0,0],red:[237,80,65],green:[102,172,92],yellow:[225,178,60],blue:[73,148,201],magenta:[127,23,53],cyan:[78,181,230],white:[255,255,255],gray:[124,124,124],grey:[124,124,124]};(0,i.default)(y).forEach(function(t){var n=y[t];o.define(t+"BG","rgbBG("+n[0]+", "+n[1]+", "+n[2]+")"),o.define(""+t,"rgb("+n[0]+", "+n[1]+", "+n[2]+")")}),o.define("underline",'style("text-decoration: underline")'),o.define("bold",'style("font-weight: bold")'),o.define("italic",'style("font-style: italic")'),o.define("strikethrough",'style("text-decoration: line-through")'),o.define("dim",'style("opacity: 0.75")'),o.define("hidden",'style("opacity: 0.00")'),n.default=o,t.exports=n.default},function(t,n,e){t.exports={default:e(2),__esModule:!0}},function(t,n,e){e(3),t.exports=e(23).Object.keys},function(t,n,e){var r=e(4),o=e(6);e(21)("keys",function(){return function(t){return o(r(t))}})},function(t,n,e){var r=e(5);t.exports=function(t){return Object(r(t))}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,n,e){var r=e(7),o=e(20);t.exports=Object.keys||function(t){return r(t,o)}},function(t,n,e){var r=e(8),o=e(9),u=e(12)(!1),i=e(16)("IE_PROTO");t.exports=function(t,n){var e,f=o(t),c=0,a=[];for(e in f)e!=i&&r(f,e)&&a.push(e);for(;n.length>c;)r(f,e=n[c++])&&(~u(a,e)||a.push(e));return a}},function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return...JavaScript
// Example #1: example of a colored string
let example1 = colors`Example #1`.white.blackBG;
console.log(example1);
// Example #2: example of a embeded colored string
console.log(colors`Example #2: ${example1}`.red.bold);
// Example #3: example of raw strings
console.log('Example #3'.blue.bold);
// Example #4: escaped args
console.log(colors`Example #${4}.bold.underline`);
// Example #5: overall styling
console.log(colors`${'Exa'.red}${'mp'.green}${'le'.blue} ${'#5'.magenta}`.bold.underline.strikethrough.greyBG);
// Example #6: custom style
console.log(colors`${'Example '.style('color: red; font-weight: bold')}${'#6'.style('font-size: 8px').white.blackBG}`.style('text-decoration: underline; font-size: 16px;'));
// Example #7: custom definitions
colors.define('log', 'style("text-decoration: underline; color: blue; font-weight: bold")');
console.log('Example #7'.log);
// Example #8: composing custom definitions
colors.define('imporant', ['log', 'bold', 'style("font-size: 24px")']);
console.log('Example #8'.imporant);
// Example #9: HTML output
console.log(`Example #9: ${colors`${'styled'.blackBG.white} string html`.imporant.toString()}`);
document.body.innerHTML = colors`Example #9: ${'styled'.blackBG.white} ${'string'}.red ${'html'.white.blackBG}`.imporant.toString();