title: How to render linebreaks as <br> tags with Aurelia
body: <p>I am retrieving some textual data using JSON, this data includes text formatted with linebreaks. I would very much like to render those linebreaks to the user.</p>
  
  <p><strong>Question:</strong> What is the <em>"correct" / "recommended"</em> approach to achieve this? </p>
  
  <p>Options I've tried:</p>
  
  <ul>
  <li>Binding normally: <code>&lt;p&gt;${myText}&lt;/p&gt;</code> : Renders no linebreaks</li>
  <li>Using <code>&lt;pre&gt;</code>: <code>&lt;p&gt;&lt;pre&gt;${myText}&gt;&lt;/pre&gt;&lt;/p&gt;</code> : Renders linebreaks, but have all the known and loved issues with long <code>&lt;pre&gt;</code> text, like horizontal scrolling in some browsers and suboptimal word breaking.</li>
  <li>Binding normally using a valueConverter that replaces linebreaks with <code>&lt;br&gt;</code> tags: <code>&lt;p&gt;${myText | textFormat}&lt;/p&gt;</code></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>export class TextFormatValueConverter {
    toView(value) {
      return value.replace(new RegExp('\r?\n','g'), '&lt;br&gt;');
    }
  }
  </code></pre>
  
  <p>This does render <code>&lt;br&gt;</code> tags, but the Aurelia binder escapes the tags and shows them as literal text to the user.
   * Binding using the above converter and innerHTML: <code>&lt;p innerHTML.bind="myText | textFormat"&gt;&lt;/p&gt;</code>: Renders ok but I'm worried that it might be vulnerable to exploits, as the texts comes from a legacy system that does not do any input sanitazion with regards to usage for the web.  </p>