title: Format console.log with color and variables surrounding non-formatted text
body: <h2>The issue</h2>
  
  <p>I wrote a function to demonstrate how to format Chrome developer console console.log() messages in a variety of ways. However, the one I'm having trouble with is printing a variable on the left with a color scheme, then a string in the middle with no styling, followed by another variable that is styled. Here is a graphic to illustrate:</p>
  
  <p><a href="https://i.stack.imgur.com/NxDQi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NxDQi.png" alt="![Screenshot showing desired output in console."></a></p>
  
  <p>Also, this HTML/CSS code will demonstrate what I'm trying to produce in the developer console:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;p&gt;Array values printed out (equals sign not formatted):&lt;/p&gt;
  
      &lt;span style="background: #ffa600; color: #ffe4b3;"&gt;Array[index0]&lt;/span&gt; = &lt;span style="background: yellow; color: black; font-style: italic;"&gt;http://www.google.com&lt;/span&gt;&lt;br&gt;
      &lt;span style="background: #ffa600; color: #ffe4b3;"&gt;Array[index1]&lt;/span&gt; = &lt;span style="background: yellow; color: black; font-style: italic;"&gt;http://www.pinterest.com&lt;/span&gt;&lt;br&gt;
      &lt;span style="background: #ffa600; color: #ffe4b3;"&gt;Array[index2]&lt;/span&gt; = &lt;span style="background: yellow; color: black; font-style: italic;"&gt;http://www.facebook.com&lt;/span&gt;&lt;br&gt;
  
  
      &lt;p&gt;Multiple combinations of formatted and non formatted text:&lt;/p&gt;
      &lt;p&gt;
          &lt;span style="background:red;"&gt;Red&lt;/span&gt;
          &lt;span&gt; and &lt;/span&gt;
          &lt;span style="background:aliceblue"&gt;AliceBlue&lt;/span&gt;
          &lt;span&gt; OR &lt;/span&gt;
          &lt;span style="color:forestgreen; font-style: italic; font-weight: bold;"&gt;Forest Green&lt;/span&gt;
          &lt;span style="background: orange"&gt;Orange&lt;/span&gt;
          &lt;span&gt;, also this: &lt;span&gt;
          &lt;span style="background:pink; color: brown"&gt;  Error Styling &lt;/span&gt;
          &lt;span&gt;, etc ...&lt;/span&gt;
      &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>What I've tried that didn't work</h2>
  
  <p>This code from christianvuerings in <a href="https://stackoverflow.com/questions/7505623/colors-in-javascript-console">Colors in JavaScript console</a> works to print two different styles back-to-back:</p>
  
  <p><code>console.log("%cHello, "+"World","color:red;","color:blue;")</code></p>
  
  <p>I based my attempts on that code. The trouble is, Christian's code doesn't account for having non-formatted code sandwiched between formatted code, nor for having multiple variables. I made many tries to find the right combination of code and ordering, but the three most promising (to me) were these:</p>
  
  <p><code>console.log("%c%s"+" is "+"%c%d"+"years old.", "color:red","Bob", "color:blue", 42).</code></p>
  
  <p><code>console.log("%c%s"," is ","%c%d","years old.", "color:red","Bob", "color:blue", 42).</code></p>
  
  <p><code>console.log("%c%s is %c%d years old.", "color:red", "Bob", "color:blue", 42).</code></p>
  
  <h2>My question</h2>
  
  <p>How can I print console.log() messages with multiple combinations of formatted and non-formatted code all on the same line?</p>