diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..32ebab4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none"
+}
diff --git a/Makefile b/Makefile
index dafe1ae..bf1b9e9 100644
--- a/Makefile
+++ b/Makefile
@@ -20,4 +20,7 @@ test:
 publish: test clean dist
 	yarn semantic-release
 
-.PHONY: clean storybook test publish
+format:
+	yarn prettier --write "**/*.{ts,js,json}"
+
+.PHONY: clean storybook test publish format
diff --git a/package.json b/package.json
index 7a6e094..fc8eb30 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "express": "^4.17.1",
     "handlebars-loader": "^1.7.1",
     "mocha": "6.2.2",
+    "prettier": "^2.6.2",
     "semantic-release": "^17.2.3",
     "ts-loader": "^6.2.1",
     "typescript": "^2.8.1",
diff --git a/src/base.ts b/src/base.ts
index 17e5c85..cbfe669 100644
--- a/src/base.ts
+++ b/src/base.ts
@@ -1,3 +1,5 @@
+import { SafeString } from 'handlebars';
+
 export interface Colors {
   primary: string;
   foreground: string;
@@ -30,8 +32,8 @@ export interface EmojiRating {
 }
 
 export interface BaseTemplateOptions {
-  intro: string;
-  outro: string;
+  intro: string | SafeString;
+  outro: string | SafeString;
   question: string;
   colors: Colors;
   direction: string;
diff --git a/src/partials/bot-honeypot-link.hbs b/src/partials/bot-honeypot-link.hbs
index 940abf5..befa16c 100644
--- a/src/partials/bot-honeypot-link.hbs
+++ b/src/partials/bot-honeypot-link.hbs
@@ -4,7 +4,7 @@
     <td class="" style="vertical-align:top;width:0px;">
 <![endif]-->
 <div style="display:none;">
-  <a href="{{{url}}}" target="_blank" rel="nofollow" style="font-size:0px;color:#f0f0f0;text-decoration:none;"> </a>
+  <a href="{{url}}" target="_blank" rel="nofollow" style="font-size:0px;color:#f0f0f0;text-decoration:none;"> </a>
 </div>
 <!--[if mso | IE]>
     </td>
diff --git a/src/partials/choice-list.hbs b/src/partials/choice-list.hbs
index e9462b4..ad2212f 100644
--- a/src/partials/choice-list.hbs
+++ b/src/partials/choice-list.hbs
@@ -29,7 +29,7 @@
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                             <tr>
                               <td align="center" bgcolor="{{../colors.primary}}" role="presentation" style="border:none;border-radius:3px;cursor:auto;height:40px;mso-padding-alt:0px;background:{{../colors.primary}};"
-                                valign="middle"> <a {{#if url}} href="{{{url}}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 0px;mso-padding-alt:0px;border-radius:3px;"
+                                valign="middle"> <a {{#if url}} href="{{url}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 0px;mso-padding-alt:0px;border-radius:3px;"
                                   target="_blank">
                                   {{label}}
                                 </a> </td>
diff --git a/src/partials/long-text.hbs b/src/partials/long-text.hbs
index a6bb887..497a228 100644
--- a/src/partials/long-text.hbs
+++ b/src/partials/long-text.hbs
@@ -20,7 +20,7 @@
               <tbody>
                 <tr>
                   <td style="vertical-align:top;padding:1px 2px;">
-                    <a {{#if surveyUrl}} href="{{{surveyUrl}}}" {{/if}} style="background:{{colors.primary}};color:{{colors.background}};padding: 8px 14px;cursor: pointer;display: inline-block;font-size: 15px;border: none;border-radius: 0px;min-width: 100px;width: initial;margin: initial;zoom: 1;line-height: normal;white-space: nowrap;vertical-align: baseline;text-align: center;user-select: none;font-family:arial, helvetica, sans-serif;text-decoration: none;"
+                    <a {{#if surveyUrl}} href="{{surveyUrl}}" {{/if}} style="background:{{colors.primary}};color:{{colors.background}};padding: 8px 14px;cursor: pointer;display: inline-block;font-size: 15px;border: none;border-radius: 0px;min-width: 100px;width: initial;margin: initial;zoom: 1;line-height: normal;white-space: nowrap;vertical-align: baseline;text-align: center;user-select: none;font-family:arial, helvetica, sans-serif;text-decoration: none;"
                       target="_blank">{{submit}}</a>
                   </td>
                 </tr>
diff --git a/src/partials/number-scale.hbs b/src/partials/number-scale.hbs
index 03819f5..151e075 100644
--- a/src/partials/number-scale.hbs
+++ b/src/partials/number-scale.hbs
@@ -79,7 +79,7 @@
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                             <tr>
                               <td align="center" bgcolor="{{../colors.primary}}" role="presentation" style="border:none;border-radius:3px;cursor:auto;height:40px;mso-padding-alt:0px;background:{{../colors.primary}};"
-                                valign="middle"> <a {{#if url}} href="{{{url}}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 0px;mso-padding-alt:0px;border-radius:3px;"
+                                valign="middle"> <a {{#if url}} href="{{url}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 0px;mso-padding-alt:0px;border-radius:3px;"
                                   target="_blank">
                                   {{rating}}
                                 </a> </td>
diff --git a/src/partials/paragraph.hbs b/src/partials/paragraph.hbs
index 7512d9d..8a8d820 100644
--- a/src/partials/paragraph.hbs
+++ b/src/partials/paragraph.hbs
@@ -19,7 +19,7 @@
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
               <tr>
                 <td align="left" style="font-size:0px;padding:0px 2px;word-break:break-word;">
-                  <div style="font-family:arial, helvetica, sans-serif;font-size:15px;line-height:150%;text-align:{{left}};color:#454545;">{{{text}}}</div>
+                  <div style="font-family:arial, helvetica, sans-serif;font-size:15px;line-height:150%;text-align:{{left}};color:#454545;">{{text}}</div>
                 </td>
               </tr>
             </table>
diff --git a/src/partials/smiley.hbs b/src/partials/smiley.hbs
index 35b2583..efd55bf 100644
--- a/src/partials/smiley.hbs
+++ b/src/partials/smiley.hbs
@@ -79,7 +79,7 @@
                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                             <tr>
                               <td align="center" bgcolor="{{../colors.primary}}" role="presentation" style="border:none;border-radius:3px;cursor:auto;height:40px;mso-padding-alt:0px;background:{{../colors.primary}};"
-                                valign="middle"> <a {{#if url}} href="{{{url}}}" {{else}} sm-preview-value="{{value}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:1;margin:0;text-decoration:none;text-transform:none;padding:10px;mso-padding-alt:0px;border-radius:3px;"
+                                valign="middle"> <a {{#if url}} href="{{url}}" {{else}} sm-preview-value="{{value}}" {{/if}} style="display:block;background:{{../colors.primary}};color:{{../colors.background}};font-family:arial, helvetica, sans-serif;font-size:14px;font-weight:normal;line-height:1;margin:0;text-decoration:none;text-transform:none;padding:10px;mso-padding-alt:0px;border-radius:3px;"
                                   target="_blank">
                                   <div style="width:36px;height:auto;border-radius: 50%;filter: drop-shadow(rgba(51, 51, 51, 0.5) 0px 0px 3px);">
                                     <img src="{{imageUrl}}" alt="{{emoji}}" width="36" height="auto" />
diff --git a/src/templates/inline.hbs b/src/templates/inline.hbs
index e860831..b259ec6 100644
--- a/src/templates/inline.hbs
+++ b/src/templates/inline.hbs
@@ -268,7 +268,7 @@
   {{> bot-honeypot-link url=botHoneypotUrl}}
 {{/if}}
 <div class="ee_editable ee_element">
-  {{{intro}}}
+  {{intro}}
   <p style="margin: 0px; line-height: 150%; font-family: arial, helvetica, sans-serif; text-align: {{left}}; font-size: 15px; color: rgb(69, 69, 69);">{{question}}</p>
 </div>
 <table class="ee_element ee_borders eeb_width" cellpadding="0" cellspacing="0" data-eewidth="530" style="table-layout: auto; width: 530px;">
@@ -303,7 +303,7 @@
                                       <td class="ee_pad" style="width: auto; padding: 0px;">
                                         <div class="ee_editable eev_element" style="width: 43px;">
                                           <p style="margin: 0px; text-align: center; font-family: arial, helvetica, sans-serif; color: rgb(255, 255, 255); font-size: 14px;">
-                                            <b><a {{#if url}} href="{{{url}}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
+                                            <b><a {{#if url}} href="{{url}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
                                           </p>
                                         </div>
                                       </td>
@@ -355,5 +355,5 @@
   </tbody>
 </table>
 <div class="ee_editable ee_element">
-  {{{outro}}}
+  {{outro}}
 </div>
diff --git a/src/templates/survey.hbs b/src/templates/survey.hbs
index dd6ad72..d85af01 100644
--- a/src/templates/survey.hbs
+++ b/src/templates/survey.hbs
@@ -58,7 +58,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                   <tbody>
                                                     <tr>
                                                       <td width="100%" valign="top" class="ee_dropzone ved-scaled-cols" align="{{left}}" style="width: 530px; padding-top: 0px;padding-{{right}}: 0px;padding-bottom: 0px;padding-{{left}}: 0px;"><div class="ee_editable ee_element">
-                                                          {{{intro}}}
+                                                          {{intro}}
                                                           <p style="margin: 0px; line-height: 150%; font-family: arial, helvetica, sans-serif; text-align: {{left}}; font-size: 15px; color: rgb(69, 69, 69);">{{question}}</p>
                                                         </div>
                                                         <table class="ee_element ee_borders eeb_width" cellpadding="0" cellspacing="0" data-eewidth="530" style="table-layout: auto; width: 530px; border-spacing: 0;"><tbody><tr><td class="ee_pad" style="padding-top: 15px; padding-bottom: 25px; width: auto;"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_columns eev_element" style="width: 530px; position: relative; table-layout: auto; border-spacing: 0;" data-eewidth="530">
@@ -79,7 +79,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                                                               <tr>
                                                                                                 <td class="ee_pad" style="width: auto; padding: 0px;"><div class="ee_editable eev_element" style="width: 43px;">
                                                 																									<p style="margin: 0px; text-align: center; font-family: arial, helvetica, sans-serif; color: rgb(255, 255, 255); font-size: 14px;">
-                                                                                                    <b><a {{#if url}} href="{{{url}}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
+                                                                                                    <b><a {{#if url}} href="{{url}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
                                                                                                   </p>
                                                                                                 </div></td>
                                                                                               </tr>
@@ -106,7 +106,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                                   </tbody>
                                                                 </table></td></tr></tbody></table>
                                                         <div class="ee_editable ee_element">
-                                                          {{{outro}}}
+                                                          {{outro}}
                                                         </div></td>
                                                     </tr>
                                                   </tbody>
diff --git a/src/templates/zonky-survey.hbs b/src/templates/zonky-survey.hbs
index f2843c2..a8bc06a 100644
--- a/src/templates/zonky-survey.hbs
+++ b/src/templates/zonky-survey.hbs
@@ -90,7 +90,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                     <tr>
                                                       <td width="100%" valign="top" class="ee_dropzone ved-scaled-cols" align="{{left}}" style="width: 530px; padding-top: 0px;padding-{{right}}: 0px;padding-bottom: 0px;padding-{{left}}: 0px;"><div class="ee_editable ee_element">
                                                           <img src="https://zonky.cz/images/logo/logo-satismeter.png" class="ee_logo" style="float: right; margin-top: -10px; width: 116px; height: 35px;"/>
-                                                          {{{intro}}}
+                                                          {{intro}}
                                                           <img src="https://zonky.cz/images/zebra/zebra-point-self-fill-flipped.png" class="ee_intro_img" style="float: right; width: 76px; height: 80px; margin-right: 50px;"/>
                                                           <p class="ee_question_outer" style="margin: 0px; margin-top: 30px; line-height: 150%; font-family: arial, helvetica, sans-serif; text-align: {{left}}; font-size: 15px; color: rgb(69, 69, 69);">
                                                               {{question}}
@@ -114,7 +114,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                                                               <tr>
                                                                                                 <td class="ee_pad" style="width: auto; padding: 0px;"><div class="ee_editable eev_element" style="width: 43px;">
                                                 																									<p style="margin: 0px; text-align: center; font-family: arial, helvetica, sans-serif; color: rgb(255, 255, 255); font-size: 14px;">
-                                                                                                    <b><a {{#if url}} href="{{{url}}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
+                                                                                                    <b><a {{#if url}} href="{{url}}" {{/if}} style="display:block; line-height: 100%; color: {{../colors.background}}; text-decoration: none; border: 12px solid {{../colors.primary}};">{{rating}}</a></b>
                                                                                                   </p>
                                                                                                 </div></td>
                                                                                               </tr>
@@ -142,7 +142,7 @@ table.ee_mobiletemplate { table-layout: fixed !important; }
                                                                 </table></td></tr></tbody></table>
                                                         <div class="ee_editable ee_element">
                                                             <img src="https://zonky.cz/images/zebra/zebra-think-cropped.png" class="ee_outro_img" style="float: right; margin-bottom: 20px; margin-right: 120px;"/>
-                                                          {{{outro}}}
+                                                          {{outro}}
                                                         </div></td>
                                                     </tr>
                                                   </tbody>
diff --git a/src/tests/test.ts b/src/tests/test.ts
index 78bee85..25d6e20 100644
--- a/src/tests/test.ts
+++ b/src/tests/test.ts
@@ -4,8 +4,8 @@ import cheerio from 'cheerio';
 import render, { renderV2 } from '..';
 import messages from '../messages';
 
-describe('email', function() {
-  it('should render email', function() {
+describe('email', function () {
+  it('should render email', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -36,7 +36,7 @@ describe('email', function() {
     assert.equal($('a:not([href])').length, 0);
   });
 
-  it('should include passed urlParams', function() {
+  it('should include passed urlParams', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -62,7 +62,7 @@ describe('email', function() {
     );
   });
 
-  it('should escape question', function() {
+  it('should escape question', function () {
     var html = render({
       url: 'http://localhost/survey',
       urlParams: {
@@ -81,7 +81,7 @@ describe('email', function() {
     assert.include($.root().text(), 'Je ACME <b>dobry</b>?');
   });
 
-  it('should not include unsubscribe', function() {
+  it('should not include unsubscribe', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -103,7 +103,7 @@ describe('email', function() {
     assert.equal($('a:not([href])').length, 0);
   });
 
-  it('should include bot-honeypot-link', function() {
+  it('should include bot-honeypot-link', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -122,7 +122,7 @@ describe('email', function() {
     assert.equal($('a[href="http://localhost/honeypot"]').length, 1);
   });
 
-  it('should handle undefined values', function() {
+  it('should handle undefined values', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -138,7 +138,7 @@ describe('email', function() {
     assert.equal($('a:not([href])').length, 11);
   });
 
-  it('should handle other templates', function() {
+  it('should handle other templates', function () {
     var html = render({
       intro: 'Hi!\n\nPlease fill in the survey below:',
       outro: 'Bye!',
@@ -160,8 +160,8 @@ describe('email', function() {
     );
   });
 
-  describe('V2', function() {
-    it('should handle V2 survey', function() {
+  describe('V2', function () {
+    it('should handle V2 survey', function () {
       const html = renderV2({
         url: 'localhost/survey',
         urlParams: { token: 'aaa' },
@@ -190,7 +190,7 @@ describe('email', function() {
       assert.equal($('a[href*="survey?token=aaa"]').length, 11);
     });
 
-    it('should handle NPS in legacy rating parameter mode', function() {
+    it('should handle NPS in legacy rating parameter mode', function () {
       const html = renderV2({
         legacyRatingParameterMode: true,
         url: 'localhost/survey',
@@ -213,7 +213,7 @@ describe('email', function() {
       assert.equal($('a[href*="survey?token=aaa&rating="]').length, 11);
     });
 
-    it('should handle single-choice surveys', function() {
+    it('should handle single-choice surveys', function () {
       const html = renderV2({
         question: {
           choices: ['abc', '123'],
@@ -229,11 +229,17 @@ describe('email', function() {
       });
 
       const $ = cheerio.load(html);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=abc"]').length, 1);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=123"]').length, 1);
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=abc"]').length,
+        1
+      );
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=123"]').length,
+        1
+      );
     });
 
-    it('should handle custom scale surveys', function() {
+    it('should handle custom scale surveys', function () {
       const html = renderV2({
         question: {
           max: 3,
@@ -252,12 +258,21 @@ describe('email', function() {
       });
 
       const $ = cheerio.load(html);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=1"]').length, 1);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=2"]').length, 1);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=3"]').length, 1);
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=1"]').length,
+        1
+      );
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=2"]').length,
+        1
+      );
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=3"]').length,
+        1
+      );
     });
 
-    it('should handle odd custom scales', function() {
+    it('should handle odd custom scales', function () {
       const html = renderV2({
         question: {
           max: -1,
@@ -276,12 +291,21 @@ describe('email', function() {
       });
 
       const $ = cheerio.load(html);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=-1"]').length, 1);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=-2"]').length, 1);
-      assert.equal($('a[href*="survey?token=aaa&answers%5BQID%5D=-3"]').length, 1);
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=-1"]').length,
+        1
+      );
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=-2"]').length,
+        1
+      );
+      assert.equal(
+        $('a[href*="survey?token=aaa&answers%5BQID%5D=-3"]').length,
+        1
+      );
     });
 
-    it('should include bot-honeypot-link', function() {
+    it('should include bot-honeypot-link', function () {
       const html = renderV2({
         url: 'localhost/survey',
         urlParams: { token: 'aaa' },
diff --git a/src/transform.ts b/src/transform.ts
index 4e1e33c..e20d9ce 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -5,6 +5,7 @@ import is from 'is';
 import escapeHtml from 'escape-html';
 import xtend from 'xtend';
 import { Colors } from './base';
+import { SafeString } from 'handlebars/runtime';
 
 var DEFAULT_COLORS = {
   primary: '#ff4981',
@@ -16,7 +17,7 @@ function escape(html: string) {
   if (!html) {
     return null;
   }
-  return escapeHtml(html);
+  return new SafeString(escapeHtml(html));
 }
 
 export interface TransformOptions {
@@ -67,7 +68,7 @@ export default function transform(options: TransformOptions) {
 
   var renderer = new marked.Renderer();
 
-  renderer.paragraph = function(text: string) {
+  renderer.paragraph = function (text: string) {
     return (
       '<p style="margin: 0px; line-height: 150%; font-family: arial, helvetica, sans-serif; text-align: ' +
       left +
@@ -83,7 +84,7 @@ export default function transform(options: TransformOptions) {
     }
     var uri = new Uri(options.url);
 
-    Object.keys(urlParams).forEach(function(paramName) {
+    Object.keys(urlParams).forEach(function (paramName) {
       const paramValue = urlParams[paramName];
 
       if (paramValue !== undefined) {
@@ -98,8 +99,12 @@ export default function transform(options: TransformOptions) {
   }
 
   return {
-    intro: marked(options.intro || t('INTRO'), { renderer: renderer }),
-    outro: marked(options.outro || t('OUTRO'), { renderer: renderer }),
+    intro: new SafeString(
+      marked(options.intro || t('INTRO'), { renderer: renderer })
+    ),
+    outro: new SafeString(
+      marked(options.outro || t('OUTRO'), { renderer: renderer })
+    ),
     question: t('HOW_LIKELY'),
     colors: colors,
     direction: direction,
@@ -107,7 +112,7 @@ export default function transform(options: TransformOptions) {
     right: right,
     unlikely: t('UNLIKELY'),
     likely: t('LIKELY'),
-    ratings: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function(rating) {
+    ratings: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (rating) {
       return {
         rating: rating,
         url: escape(ratingUrl(rating)!)
diff --git a/src/transformV2.ts b/src/transformV2.ts
index 77ac705..1e21d29 100644
--- a/src/transformV2.ts
+++ b/src/transformV2.ts
@@ -1,9 +1,17 @@
+import { SafeString } from 'handlebars/runtime';
 import is from 'is';
 import Uri from 'jsuri';
 import { marked } from 'marked';
 import twemoji from 'twemoji';
 
-import { BaseTemplateOptions, Colors, Emoji, EmojiRating, Rating, TemplateV2Options } from './base';
+import {
+  BaseTemplateOptions,
+  Colors,
+  Emoji,
+  EmojiRating,
+  Rating,
+  TemplateV2Options
+} from './base';
 
 export interface BaseQuestion {
   id: string;
@@ -33,7 +41,11 @@ export interface SmileyQuestion extends BaseQuestion {
   minLegend: string;
 }
 
-export type Question = ScaleQuestion | SingleChoiceQuestion | LongTextQuestion | SmileyQuestion;
+export type Question =
+  | ScaleQuestion
+  | SingleChoiceQuestion
+  | LongTextQuestion
+  | SmileyQuestion;
 
 export interface TransformV2Options {
   colors?: Colors;
@@ -123,8 +135,8 @@ export function transformV2(options: TransformV2Options): TemplateV2Options {
 
   const direction = options.direction || 'ltr';
   const templateOptions: BaseTemplateOptions = {
-    intro: marked(options.intro, { renderer }),
-    outro: marked(options.outro, { renderer }),
+    intro: new SafeString(marked(options.intro, { renderer })),
+    outro: new SafeString(marked(options.outro, { renderer })),
     question: options.question.label,
     colors: {
       ...DEFAULT_COLORS,
@@ -146,7 +158,7 @@ export function transformV2(options: TransformV2Options): TemplateV2Options {
   };
 
   if (options.question.type === 'single-choice') {
-    const choices = options.question.choices.map(choice => {
+    const choices = options.question.choices.map((choice) => {
       return {
         label: choice,
         url: url(choice)
diff --git a/stories/choice.ts b/stories/choice.ts
index 7a1db4a..dcfb67e 100644
--- a/stories/choice.ts
+++ b/stories/choice.ts
@@ -21,5 +21,4 @@ const choice: OptionsV2 = {
 
 export const basic = () => renderV2(choice);
 
-export const RTL_direction = () =>
-  renderV2({ ...choice, direction: 'rtl' });
+export const RTL_direction = () => renderV2({ ...choice, direction: 'rtl' });
diff --git a/stories/mobile.ts b/stories/mobile.ts
index d594eb3..3fb726b 100644
--- a/stories/mobile.ts
+++ b/stories/mobile.ts
@@ -26,39 +26,47 @@ const basic: OptionsV2 = {
 };
 
 export const NPS = () => renderV2(basic);
-export const Rating = () => renderV2({
-  ...basic,
-  question: {
-    id: 'rating',
-    type: 'scale',
-    label: 'I am satisfied with the service',
-    max: 5,
-    min: 1,
-    maxLegend: messages.AGREE,
-    minLegend: messages.DISAGREE
-  }
-});
-export const Text = () => renderV2({
-  ...basic,
-  question: {
-    id: 'text',
-    type: 'long-text',
-    label: 'Do you have any comments for us?',
-  }
-});
-export const Choice = () => renderV2({
-  ...basic,
-  question: {
-    id: 'choice',
-    type: 'single-choice',
-    label: 'We are sorry you are leaving. What is the reason?',
-    choices: ['Bad support', 'Not enough features', 'The price is too high']
-  }
-});
-export const V1Template = () => render({
-  urlParams: { token: 'token', user: 'user' },
-  unsubscribeUrl: 'http://localhost/unsubscribe',
-  url: 'http://localhost/survey',
-  botHoneypotUrl: 'http://localhost/honeypot',
-  previewDevice: 'mobile'
-});
\ No newline at end of file
+
+export const Rating = () =>
+  renderV2({
+    ...basic,
+    question: {
+      id: 'rating',
+      type: 'scale',
+      label: 'I am satisfied with the service',
+      max: 5,
+      min: 1,
+      maxLegend: messages.AGREE,
+      minLegend: messages.DISAGREE
+    }
+  });
+
+export const Text = () =>
+  renderV2({
+    ...basic,
+    question: {
+      id: 'text',
+      type: 'long-text',
+      label: 'Do you have any comments for us?'
+    }
+  });
+
+export const Choice = () =>
+  renderV2({
+    ...basic,
+    question: {
+      id: 'choice',
+      type: 'single-choice',
+      label: 'We are sorry you are leaving. What is the reason?',
+      choices: ['Bad support', 'Not enough features', 'The price is too high']
+    }
+  });
+
+export const V1Template = () =>
+  render({
+    urlParams: { token: 'token', user: 'user' },
+    unsubscribeUrl: 'http://localhost/unsubscribe',
+    url: 'http://localhost/survey',
+    botHoneypotUrl: 'http://localhost/honeypot',
+    previewDevice: 'mobile'
+  });
diff --git a/stories/nps.ts b/stories/nps.ts
index 165ccc3..1901070 100644
--- a/stories/nps.ts
+++ b/stories/nps.ts
@@ -25,10 +25,26 @@ const nps: OptionsV2 = {
 
 export const basic = () => renderV2(nps);
 
-export const RTL_direction = () =>
-  renderV2({ ...nps, direction: 'rtl' });
+export const RTL_direction = () => renderV2({ ...nps, direction: 'rtl' });
 
 export const whitelabeled = () => renderV2({ ...nps, showPoweredBy: false });
 
 export const no_unsubscribe_link = () =>
   renderV2({ ...nps, unsubscribeUrl: undefined });
+
+export const markdown = () =>
+  renderV2({
+    ...nps,
+    intro: 'Hey **man**',
+    outro: 'Bye **bye**'
+  });
+
+export const xss = () =>
+  renderV2({
+    ...nps,
+    question: {
+      ...nps.question,
+      label:
+        '**Question** <img src=x onerror=alert(document.domain)>PAYLOAD<img>'
+    }
+  });
diff --git a/stories/text.ts b/stories/text.ts
index ebe6847..ab1eb8b 100644
--- a/stories/text.ts
+++ b/stories/text.ts
@@ -11,7 +11,7 @@ const text: OptionsV2 = {
   question: {
     id: 'text',
     type: 'long-text',
-    label: 'Do you have any comments for us?',
+    label: 'Do you have any comments for us?'
   },
   urlParams: { token: 'token', user: 'user' },
   unsubscribeUrl: 'http://localhost/unsubscribe',
@@ -21,5 +21,4 @@ const text: OptionsV2 = {
 
 export const basic = () => renderV2(text);
 
-export const RTL_direction = () =>
-  renderV2({ ...text, direction: 'rtl' });
+export const RTL_direction = () => renderV2({ ...text, direction: 'rtl' });
diff --git a/yarn.lock b/yarn.lock
index ff2de2b..64a184d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8227,6 +8227,11 @@ prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
+
 pretty-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"