Created
July 4, 2017 22:20
-
-
Save bennadel/71eb3670ccf51daabf1658fb13b337b1 to your computer and use it in GitHub Desktop.
Using Chalk 2.0's Tagged Template Literals For Nested And Complex Styling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Require the core node modules. | |
var chalk = require( "chalk" ); | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
// Try using plain-old interpolation. | |
// -- | |
// CAUTION: Will not work as hoped, "reset" bleeds into rest of string. | |
console.log( chalk.dim.underline( `Alpha ${ chalk.reset.bold.red( 'Beta' ) } Charlie` ) ); | |
// Try using nested invocations. | |
// -- | |
// CAUTION: Will not work as hoped, "reset" bleeds into rest of string. | |
console.log( chalk.dim.underline( "Alpha", chalk.reset.bold.red( "Beta" ), "Charlie" ) ); | |
// Try using NEW tagged templates (in v2.0) with embedded blocks. | |
console.log( chalk`{dim.underline Alpha {reset.bold.red Beta} Charlie}` ); | |
// Try using NEW tagged templates with interpolated block values. | |
// -- | |
// CAUTION: This will not work because interpolated "{" "}" characters are escaped (as | |
// documented in the Chalk read-me). | |
var embedded = "{reset.bold.red Beta}"; | |
console.log( chalk`{dim.underline Alpha ${ embedded } Charlie}` ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Require the core node modules. | |
var chalk = require( "chalk" ); | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
// Here is our proxy to the chalk() template method. | |
function chalkish( parts, ...substitutions ) { | |
var rawResults = []; | |
var cookedResults = []; | |
var partsLength = parts.length; | |
var substitutionsLength = substitutions.length; | |
for ( var i = 0 ; i < partsLength ; i++ ) { | |
rawResults.push( parts.raw[ i ] ); | |
cookedResults.push( parts[ i ] ); | |
if ( i < substitutionsLength ) { | |
rawResults.push( substitutions[ i ] ); | |
cookedResults.push( substitutions[ i ] ); | |
} | |
} | |
// Now that we have all the template parts and the value substitutions from the | |
// original string, we can build the SINGLE value that we pass onto chalk. This | |
// will cause chalk to evaluate the original template as if it were a static | |
// string (rather than a set of value substitutions). | |
var chalkParts = [ cookedResults.join( "" ) ]; | |
chalkParts.raw = [ rawResults.join( "" ) ]; | |
return( chalk( chalkParts ) ); | |
} | |
// ----------------------------------------------------------------------------------- // | |
// ----------------------------------------------------------------------------------- // | |
var embedded = "{reset.bold.red Beta}"; | |
console.log( chalkish`{dim.underline Alpha ${ embedded } Charlie}` ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment