From: Israel Madueme <purelogiq@gmail.com>
Date: Tue, 22 Jan 2019 16:58:00 +0000 (-0500)
Subject: Bug 1518268 - Re-style all markdown content, consistently
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d9ccfd17921289ba938143cc4557181127ecac9c;p=thirdparty%2Fbugzilla.git

Bug 1518268 - Re-style all markdown content, consistently
---

diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
index a9da45f31..495c0b6de 100644
--- a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ -267,7 +267,7 @@
     [% comment_tag = 'pre' %]
   [% END %]
 
-  <[% comment_tag FILTER none %] class="comment-text [%= "bz_private" IF comment.is_private %]"
+  <[% comment_tag FILTER none %] class="comment-text [%= "markdown-body" IF comment.is_markdown %] [%= "bz_private" IF comment.is_private %]"
                      id="ct-[% comment.count FILTER none %]"
                      data-comment-id="[% comment.id FILTER none %]"
                      [% IF comment.is_markdown +%] data-ismarkdown="true" [% END ~%]
diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
index 83502ed96..f801cfad1 100644
--- a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -50,7 +50,7 @@
     [% ELSE %]
       [% comment_tag = 'pre' %]
     [% END %]
-    <[% comment_tag FILTER none %] id="comment-preview" class="comment-text"></[% comment_tag FILTER none %]>
+    <[% comment_tag FILTER none %] id="comment-preview" class="comment-text markdown-body"></[% comment_tag FILTER none %]>
   </div>
 
   <div id="add-comment-tips">
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index ef8834586..9e66c3bc9 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -664,87 +664,6 @@ h3.change-name {
     content: '\E145';
 }
 
-.comment-text {
-    white-space: pre-wrap;
-    line-height: 1.2;
-    font-size: 13px;
-    font-family: "Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
-    background: #fff;
-    color: #222;
-    margin: 1px 0 0 0;
-    overflow: auto;
-    padding: 8px;
-    border-top: 1px solid #ddd;
-}
-
-body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
-    font-family: "Fira Mono", monospace;
-}
-.comment-text span.quote, .comment-text span.quote_wrapped,
-div.comment-text pre {
-    background: #eee !important;
-    color: #444 !important;
-    display: block !important;
-    padding: 5px !important;
-    display: inline-block !important;
-    width: 99% !important;
-}
-
-.comment-text.bz_private {
-    color: darkred;
-    border: 1px dashed darkred;
-}
-
-/* Markdown comments */
-div.comment-text {
-    white-space: normal;
-    padding: 0 8px 0 8px;
-    font-family: inherit !important;
-    font-size: 14px !important;
-}
-
-div.comment-text p,
-div.comment-text li {
-    line-height: 21px;
-    max-width: 70em;
-}
-
-div.comment-text code {
-    color: #444;
-    background-color: #eee;
-    font-size: 13px;
-    font-family: "Fira Mono","Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
-}
-
-div.comment-text table {
-    border-collapse: collapse;
-}
-
-div.comment-text th, div.comment-text td {
-    padding: 5px 10px;
-    border: 1px solid #ccc;
-}
-
-div.comment-text hr {
-    display: block !important;
-}
-
-div.comment-text blockquote {
-    background: #fcfcfc;
-    border-left: 5px solid #ccc;
-    margin: 1.5em 10px;
-    padding: 0.5em 10px;
-}
-
-
-div.comment-text blockquote > :first-child {
-    margin-top: 0;
-}
-
-div.comment-text blockquote > :last-child {
-    margin-bottom: 0;
-}
-
 .comment-tags {
     padding: 0 8px !important;
 }
@@ -849,7 +768,6 @@ div.comment-text blockquote > :last-child {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
-    padding: 4px 3px 5px;
 }
 
 #preview-throbber {
diff --git a/extensions/BugModal/web/common_bug_modal.css b/extensions/BugModal/web/common_bug_modal.css
index 473c4a445..b79f8a20f 100644
--- a/extensions/BugModal/web/common_bug_modal.css
+++ b/extensions/BugModal/web/common_bug_modal.css
@@ -609,10 +609,6 @@ h3.change-name {
     border-top: 1px solid #ddd;
 }
 
-body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
-    font-family: "Fira Mono", monospace;
-}
-
 .comment-text span.quote, .comment-text span.quote_wrapped {
     background: #eee !important;
     color: #444 !important;
diff --git a/extensions/EditComments/web/js/inline-editor.js b/extensions/EditComments/web/js/inline-editor.js
index 217770e88..17618a605 100644
--- a/extensions/EditComments/web/js/inline-editor.js
+++ b/extensions/EditComments/web/js/inline-editor.js
@@ -102,7 +102,7 @@ Bugzilla.InlineCommentEditor = class InlineCommentEditor {
           <textarea disabled>${this.$body.textContent}</textarea>
         </div>
         <div role="tabpanel" id="comment-${this.comment_id}-tabpanel-preview" hidden>
-          <${preview_tag} tabindex="-1" class="comment-text"></${preview_tag}>
+          <${preview_tag} tabindex="-1" class="comment-text ${this.is_markdown ? 'markdown-body' : ''}"></${preview_tag}>
         </div>
         <div role="toolbar" class="bottom-toolbar" aria-label="${this.str.toolbar}">
           ${BUGZILLA.user.is_insider && BUGZILLA.user.id !== this.commenter_id ? `<label>
diff --git a/skins/standard/global.css b/skins/standard/global.css
index 4b5932d5b..bcfec24c1 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -600,7 +600,7 @@ div#docslinks {
 }
 
 /* tbody.file pre is for the Diff view of attachments. */
-.bz_comment_text, .uneditable_textarea, tbody.file pre {
+pre.bz_comment_text, .uneditable_textarea, tbody.file pre {
      font-family: monospace;
      white-space: pre-wrap;
 }
@@ -1422,7 +1422,7 @@ table.edit_form hr {
     margin: 0 0 20px;
 }
 
-.bz_comment pre, #comment, #comment-preview {
+.bz_comment pre, #comment, pre#comment-preview {
     font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace;
 }
 
@@ -1529,40 +1529,6 @@ div.bz_comment_text pre {
     padding: 5px !important;
 }
 
-/* Markdown comments */
-div.bz_comment_text {
-    white-space: normal;
-    padding: 0 8px 0 8px;
-    font-family: inherit !important;
-}
-
-div.bz_comment_text code {
-    color: #444;
-    background-color: #eee;
-    font-size: 13px;
-    font-family: "Fira Mono","Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
-}
-
-div.bz_comment_text table {
-    border-collapse: collapse;
-}
-
-div.bz_comment_text th, div.bz_comment_text td {
-    padding: 5px 10px;
-    border: 1px solid #ccc;
-}
-
-div.bz_comment_text hr {
-    display: block !important;
-}
-
-div.bz_comment_text blockquote {
-    background: #fcfcfc;
-    border-left: 5px solid #ccc;
-    margin: 1.5em 10px;
-    padding: 0.5em 10px;
-}
-
 .bz_comment_tags {
     background: #eee;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -1634,7 +1600,7 @@ div.bz_comment_text blockquote {
     clear: both;
 }
 
-#comment_preview_text {
+pre#comment_preview_text {
     background: transparent;
     border: none;
     box-shadow: none;
@@ -2118,3 +2084,693 @@ a.controller {
   padding: 8px 16px !important;
   line-height: 100% !important;
 }
+
+pre.comment-text {
+    white-space: pre-wrap;
+    line-height: 1.2;
+    font-size: 13px;
+    font-family: "Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
+    background: #fff;
+    color: #222;
+    margin: 1px 0 0 0;
+    overflow: auto;
+    padding: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.comment-text span.quote, .comment-text span.quote_wrapped {
+    background: #eee !important;
+    color: #444 !important;
+    display: block !important;
+    padding: 5px !important;
+    display: inline-block !important;
+    width: 99% !important;
+}
+
+.comment-text.bz_private {
+    color: darkred;
+    border: 1px dashed darkred;
+}
+
+/* Markdown styling adapted from https://github.com/sindresorhus/github-markdown-css */
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  overflow: auto;
+  padding: 8px;
+  line-height: 1.5;
+  color: #24292e;
+  background-color: #ffffff;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.markdown-body .pl-c {
+  color: #6a737d;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+  color: #005cc5;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+  color: #6f42c1;
+}
+
+.markdown-body .pl-smi,
+.markdown-body .pl-s .pl-s1 {
+  color: #24292e;
+}
+
+.markdown-body .pl-ent {
+  color: #22863a;
+}
+
+.markdown-body .pl-k {
+  color: #d73a49;
+}
+
+.markdown-body .pl-s,
+.markdown-body .pl-pds,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sre,
+.markdown-body .pl-sr .pl-sra {
+  color: #032f62;
+}
+
+.markdown-body .pl-v,
+.markdown-body .pl-smw {
+  color: #e36209;
+}
+
+.markdown-body .pl-bu {
+  color: #b31d28;
+}
+
+.markdown-body .pl-ii {
+  color: #fafbfc;
+  background-color: #b31d28;
+}
+
+.markdown-body .pl-c2 {
+  color: #fafbfc;
+  background-color: #d73a49;
+}
+
+.markdown-body .pl-c2::before {
+  content: "^M";
+}
+
+.markdown-body .pl-sr .pl-cce {
+  font-weight: bold;
+  color: #22863a;
+}
+
+.markdown-body .pl-ml {
+  color: #735c0f;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+  font-weight: bold;
+  color: #005cc5;
+}
+
+.markdown-body .pl-mi {
+  font-style: italic;
+  color: #24292e;
+}
+
+.markdown-body .pl-mb {
+  font-weight: bold;
+  color: #24292e;
+}
+
+.markdown-body .pl-md {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+.markdown-body .pl-mi1 {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.markdown-body .pl-mc {
+  color: #e36209;
+  background-color: #ffebda;
+}
+
+.markdown-body .pl-mi2 {
+  color: #f6f8fa;
+  background-color: #005cc5;
+}
+
+.markdown-body .pl-mdr {
+  font-weight: bold;
+  color: #6f42c1;
+}
+
+.markdown-body .pl-ba {
+  color: #586069;
+}
+
+.markdown-body .pl-sg {
+  color: #959da5;
+}
+
+.markdown-body .pl-corl {
+  text-decoration: underline;
+  color: #032f62;
+}
+
+.markdown-body a {
+  background-color: transparent;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+  outline-width: 0;
+}
+
+.markdown-body strong {
+  font-weight: inherit;
+}
+
+.markdown-body strong {
+  font-weight: bolder;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+.markdown-body img {
+  border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+.markdown-body hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+.markdown-body input {
+  font: inherit;
+  margin: 0;
+}
+
+.markdown-body input {
+  overflow: visible;
+}
+
+.markdown-body [type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.markdown-body * {
+  box-sizing: border-box;
+}
+
+.markdown-body input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body strong {
+  font-weight: 600;
+}
+
+.markdown-body hr {
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+}
+
+.markdown-body hr::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.markdown-body td,
+.markdown-body th {
+  padding: 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body h1 {
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.markdown-body h2 {
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.markdown-body h3 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.markdown-body h4 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.markdown-body h5 {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.markdown-body h6 {
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+  margin: 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+.markdown-body ul ul ol,
+.markdown-body ul ol ol,
+.markdown-body ol ul ol,
+.markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+  margin-left: 0;
+}
+
+.markdown-body code {
+  font-family: "Fira Mono","Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
+  font-size: 13px;
+}
+
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: "Fira Mono","Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
+  font-size: 13px;
+}
+
+.markdown-body .pl-0 {
+  padding-left: 0 !important;
+}
+
+.markdown-body .pl-1 {
+  padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+  padding-left: 8px !important;
+}
+
+.markdown-body .pl-3 {
+  padding-left: 16px !important;
+}
+
+.markdown-body .pl-4 {
+  padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+  padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+  padding-left: 40px !important;
+}
+
+.markdown-body::before {
+  display: table;
+  content: "";
+}
+
+.markdown-body::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+.markdown-body>*:first-child {
+  margin-top: 0 !important;
+}
+
+.markdown-body>*:last-child {
+  margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .anchor {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  line-height: 1;
+}
+
+.markdown-body .anchor:focus {
+  outline: none;
+}
+
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e1e4e8;
+  border: 0;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+}
+
+.markdown-body blockquote>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body blockquote>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: solid 1px #c6cbd1;
+  border-bottom-color: #959da5;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #959da5;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+
+.markdown-body h1 {
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+
+.markdown-body h4 {
+  font-size: 1em;
+}
+
+.markdown-body h5 {
+  font-size: 0.875em;
+}
+
+.markdown-body h6 {
+  font-size: 0.85em;
+  color: #6a737d;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em;
+}
+
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.markdown-body li {
+  word-wrap: break-all;
+}
+
+.markdown-body li>p {
+  margin-top: 16px;
+}
+
+.markdown-body li+li {
+  margin-top: 0.25em;
+}
+
+.markdown-body dl {
+  padding: 0;
+}
+
+.markdown-body dl dt {
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: 600;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
+
+.markdown-body table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+}
+
+.markdown-body table th {
+  font-weight: 600;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: #fff;
+}
+
+.markdown-body img[align=right] {
+  padding-left: 20px;
+}
+
+.markdown-body img[align=left] {
+  padding-right: 20px;
+}
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(27,31,35,0.05);
+  border-radius: 3px;
+}
+
+.markdown-body pre {
+  word-wrap: normal;
+}
+
+.markdown-body pre>code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+  overflow: auto;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+.markdown-body pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+.markdown-body .full-commit .btn-outline:not(:disabled):hover {
+  color: #005cc5;
+  border-color: #005cc5;
+}
+
+.markdown-body kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px "Fira Mono","Droid Sans Mono",Menlo,Monaco,"Courier New",monospace;
+  line-height: 10px;
+  color: #444d56;
+  vertical-align: middle;
+  background-color: #fafbfc;
+  border: solid 1px #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+}
+
+.markdown-body :checked+.radio-label {
+  position: relative;
+  z-index: 1;
+  border-color: #0366d6;
+}
+
+.markdown-body .task-list-item {
+  list-style-type: none;
+}
+
+.markdown-body .task-list-item+.task-list-item {
+  margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
+}
+
+.markdown-body hr {
+  border-bottom-color: #eee;
+}
diff --git a/template/en/default/bug/comment.html.tmpl b/template/en/default/bug/comment.html.tmpl
index 6dad54586..db3868d84 100644
--- a/template/en/default/bug/comment.html.tmpl
+++ b/template/en/default/bug/comment.html.tmpl
@@ -42,7 +42,7 @@
     [% ELSE %]
       [% comment_tag = 'pre' %]
     [% END %]
-    <[% comment_tag FILTER none %] id="comment_preview_text" class="bz_comment_text"></[% comment_tag FILTER none %]>
+    <[% comment_tag FILTER none %] id="comment_preview_text" class="markdown-body"></[% comment_tag FILTER none %]>
   </div>
 [% END %]