colurs
Version:
Colors for NodeJS and Browser
251 lines (238 loc) • 14.1 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Colurs</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
<div class="tsd-page-toolbar">
<div class="container">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="index.html" class="title">Colurs</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
<input type="checkbox" id="tsd-filter-inherited" checked />
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
<input type="checkbox" id="tsd-filter-externals" checked />
<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
<input type="checkbox" id="tsd-filter-only-exported" />
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container">
<ul class="tsd-breadcrumb">
<li>
<a href="globals.html">Globals</a>
</li>
</ul>
<h1> Colurs</h1>
</div>
</div>
</header>
<div class="container container-main">
<div class="row">
<div class="col-8 col-content">
<div class="tsd-panel tsd-typography">
<h1 id="colurs">Colurs</h1>
<p>Simple utility for colorizing strings using ANSI styles, css styles for the browser and/or converting to html styled elements all with only ONE dependency.</p>
<p>Nothing fancy just a stripped down Chalk or Colors written in Typescript and in a way we find useful without some of the extras. For example there are no "bright" colors.</p>
<h2 id="installation">Installation</h2>
<pre><code class="lang-sh">$ npm install colurs
</code></pre>
<h2 id="usage">Usage</h2>
<p><strong>Base Usage</strong></p>
<pre><code class="lang-ts"><span class="hljs-comment">// Import the module.</span>
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> colurs <span class="hljs-keyword">from</span> <span class="hljs-string">'colurs'</span>;
<span class="hljs-comment">// Gets default instance.</span>
<span class="hljs-keyword">const</span> clrs = colurs.get({ <span class="hljs-comment">/* your options here */</span> });
<span class="hljs-comment">// Create a string where the name "Bob" is in bold red.</span>
<span class="hljs-keyword">let</span> str = <span class="hljs-string">`My name is <span class="hljs-subst">${clrs.bold.red('Bob')}</span>.`</span>;
<span class="hljs-comment">// With additional values</span>
<span class="hljs-keyword">let</span> str = <span class="hljs-string">`My name is <span class="hljs-subst">${clrs.bold.red('Bob', 'some value to append')}</span>.`</span>;
<span class="hljs-comment">// Instead of ansi styling return array configured for</span>
<span class="hljs-comment">// use with console.log in the browser. Not the LAST</span>
<span class="hljs-comment">// argument indicates the browser stying should be returned.</span>
<span class="hljs-keyword">let</span> str = <span class="hljs-string">`My name is <span class="hljs-subst">${clrs.bold.red('Bob', true)}</span>.`</span>;
</code></pre>
<p><strong>Convert to HTML</strong></p>
<pre><code class="lang-ts"><span class="hljs-comment">// Assumes str was generated such as colurs.red('some value').</span>
<span class="hljs-keyword">let</span> htmlStr = clrs.toHtml(str);
<span class="hljs-comment">// If jQuery on window convert to element.</span>
<span class="hljs-keyword">const</span> el = <span class="hljs-built_in">window</span>.jQuery(html);
</code></pre>
<p><strong>Using Apply</strong></p>
<p>You can also call the internal method directly. This is useful and more handy in certain scenarios.</p>
<pre><code class="lang-ts"><span class="hljs-comment">// Apply your styles.</span>
<span class="hljs-keyword">let</span> name = clrs.applyAnsi(<span class="hljs-string">'Bob Smith'</span>, <span class="hljs-string">'bgRed'</span>, <span class="hljs-string">'white'</span>);
<span class="hljs-comment">// OR</span>
<span class="hljs-keyword">let</span> name = clrs.applyAnsi(<span class="hljs-string">'Bob Smith'</span>, [<span class="hljs-string">'bgRed'</span>, <span class="hljs-string">'white'</span>]);
</code></pre>
<p><strong>Using Apply Html</strong></p>
<p>Much like the above it is also possible in one step to apply ANSI styles and convert them to stylized html elements.</p>
<pre><code class="lang-ts"><span class="hljs-keyword">let</span> name = clrs.applyHtml(<span class="hljs-string">'Bob Smith'</span>, <span class="hljs-string">'bgRed'</span>, <span class="hljs-string">'white'</span>);
<span class="hljs-comment">// OR</span>
<span class="hljs-keyword">let</span> name = clrs.applyHtml(<span class="hljs-string">'Bob Smith'</span>, [<span class="hljs-string">'bgRed'</span>, <span class="hljs-string">'white'</span>]);
</code></pre>
<h2 id="strip-color">Strip Color</h2>
<p>Applicable only for ANSI styles, Colurs exposes the strip method for stripping color from a colorized value.
It also supports objects by iterating and inspecting values which contain .replace methods to strip colors.</p>
<pre><code class="lang-ts"><span class="hljs-comment">// Create colorized string.</span>
<span class="hljs-keyword">let</span> str = <span class="hljs-string">`My name is <span class="hljs-subst">${clrs.bold.red('Bob')}</span>.`</span>;
<span class="hljs-keyword">let</span> sripped = clrs.strip(str);
</code></pre>
<h2 id="options">Options</h2>
<p>Available options:</p>
<ul>
<li>enabled whether or not to colorize values.</li>
<li>browser whether or not to enable browser mode (true when NOT node)</li>
<li>ansiStyles object containing ansi color tuples.</li>
<li>cssStyles object contaiing css styles by color or bgColor name.</li>
</ul>
<p>Simply call the setOption method.</p>
<pre><code class="lang-ts">clrs.setOption(<span class="hljs-string">'enabled'</span>, <span class="hljs-literal">false</span>);
<span class="hljs-comment">// OR</span>
clrs.setOption({ enabled: <span class="hljs-literal">false</span> });
</code></pre>
<h2 id="colurs-instance">Colurs Instance</h2>
<p>You can also create an instance of Colurs. The module is initialized with a default instance
however you can create a new instance if required.</p>
<pre><code class="lang-ts"><span class="hljs-keyword">import</span> { Colurs } <span class="hljs-keyword">from</span> <span class="hljs-string">'colurs'</span>;
<span class="hljs-keyword">const</span> clrs = <span class="hljs-keyword">new</span> Colurs({ <span class="hljs-comment">/* your options here */</span>});
</code></pre>
<h2 id="browser">Browser</h2>
<p>In the dist folder there is a browserify.js file you can include in your project however the best way to include the library is to compile using Webpack, Gulp, Grunt etc. Kind of cheated here in that probably should prevent exposing some methods not avail in the browser but for now just detects if is in node or not.</p>
<h2 id="license">License</h2>
<p>See <a href="License.md">LICENSE.md</a></p>
</div>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="globals.html"><em>Globals</em></a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_colurs_.html">"colurs"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_constants_.html">"constants"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_extens_.html">"extens"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_index_.html">"index"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_interfaces_.html">"interfaces"</a>
</li>
<li class=" tsd-kind-external-module">
<a href="modules/_test_spec_.html">"test.spec"</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
</nav>
</div>
</div>
</div>
<footer class="with-border-bottom">
<div class="container">
<h2>Legend</h2>
<div class="tsd-legend-group">
<ul class="tsd-legend">
<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
</ul>
<ul class="tsd-legend">
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
</ul>
</div>
</div>
</footer>
<div class="container tsd-generator">
<p>Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>