<div>
  <button id='bintro'>Intro: b</button>
</div>
<p id='content'>Click the button to change this text</p>
button {
  font-size: 36px;
}

#content {
  font-size: 36px;
}
function b(strings, ...values) {
  const result = [];
  strings.forEach(s => {
    result.push(s);
    result.push('<b>' + (values.shift() || '') + '</b>');
  });
  return result.join('');
}

function intro() {
  const user = 'Jones';
  const text = 'hello world';
  const result = b`1. ${user} said: "${text}"`
  $('#content').html(result);
}

$('#bintro').on('click', intro);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js