[SOLVED] How to indent HTML in a Handlebars data object

How to indent HTML in a Handlebars data object

So I'm using Handlebars to template a static HTML site.

What I am having trouble with is indenting the HTML inside the data object copyright. If I had multiple h1's in the object, I want to able to format it nicely, like in my example.

When trying to indent the HTML in the data object, I get a syntax error in the console: unterminated string literal.

$(function() {
  // Grab the template script
  var theTemplateScript = $("#address-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // Define our data object (this one works)
  var copyright = {
    "copyright": "<h1>This is heading 1</h1>"
  };

  ////////
  // This one doesn't work
  ////////
  var copyright = {
    "copyright": "
        <h1>This is heading 1</h1>
        <h1>Another heading indented</h1>
        "
  };

  // Pass our data to the template
  var theCompiledHtml = theTemplate(copyright);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
  <div>{{{copyright}}}</div>
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<script src="index.js"></script>

Solution

Proper multiline formatting:

var copyright={
    "copyright":"\
    <h1>This is heading 1</h1>\
    <h1>Another heading indented</h1>\
    "
};

or better:

var copyright={
    "copyright": "<h1>This is heading 1</h1>" +
    "<h1>Another heading indented</h1>"
};