Displaying HTML from Meteor template rendered or unrendered depending on situation

Question

I want to provide users with a snippet of HTML they can copy and paste, and show them a preview of what it will look like. So far I'm doing this with two templates with the same content, only one of them has the HTML escaped like this:

<template name="pageTemplate">
  ...
  {{> tryItOut}}
  {{> getCode}}
  ...
</template>

<template name="tryItOut">
  <div>...</div>
  <script src="script.js"></script>
  <script type="text/javascript">...</script>
</template>

<template name="getCode">
  &lt;div&gt;...&lt;/div&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;...&lt;/script&gt;
</template>

So in the tryItOut section they can play with the tool as it would appear on their site, and in the getCode section they will see something like this (which they can copy and paste):

<div>...</div>
<script src="script.js"></script>
<script type="text/javascript">...</script>

How can I do this using only one template?

Answer 1

Add the meteor markdown package with: $ meteor add markdown

Use it as follows:

pageTemplate.html

<template name="pageTemplate">
  ...
  {{> tryItOut}}
  {{#markdown}}
    {{> tryItOut}}
  {{/markdown}}
  ...
</template>

<template name="tryItOut">
    <div>...</div>
    <script src="script.js"></script>
    <script type="text/javascript">...</script>
</template>