Updated to support container syntax and styles

6 files changed, 28 insertions, 0 deletions

diff --git a/bower.json b/bower.json
index f2fc36e9..b3708633 100644
--- a/bower.json
+++ b/bower.json
@@ -44,6 +44,7 @@
     "markdown-it-ins": "^2.0.0",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
+    "markdown-it-container": "^2.0.0",
     "mermaid": "^0.5.8",
     "MathJax": "^2.6.1"
   }
diff --git a/public/css/markdown.css b/public/css/markdown.css
index aa246918..76fd0c5d 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -93,6 +93,10 @@
     unicode-bidi: embed;
 }
 
+.markdown-body .alert > p {
+    margin-bottom: 0;
+}
+
 .markdown-body pre.flow-chart,
 .markdown-body pre.sequence-diagram,
 .markdown-body pre.graphviz,
diff --git a/public/js/extra.js b/public/js/extra.js
index a72ca5e1..7b4eb0c0 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -728,6 +728,16 @@ md.use(window.markdownitIns);
 md.use(window.markdownitSub);
 md.use(window.markdownitSup);
 md.use(window.markdownitMathjax);
+function renderContainer(tokens, idx, options, env, self) {
+    tokens[idx].attrJoin('role', 'alert');
+    tokens[idx].attrJoin('class', 'alert');
+    tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
+    return self.renderToken.apply(self, arguments);
+}
+md.use(window.markdownitContainer, 'success', { render: renderContainer });
+md.use(window.markdownitContainer, 'info', { render: renderContainer });
+md.use(window.markdownitContainer, 'warning', { render: renderContainer });
+md.use(window.markdownitContainer, 'danger', { render: renderContainer });
 
 md.renderer.rules.image = function (tokens, idx, options, env, self) {
     tokens[idx].attrJoin('class', 'raw');
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
index 7cf62bc5..890188cb 100644
--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@@ -93,6 +93,17 @@ md.renderer.rules.code_block = function (tokens, idx, options, env, self) {
     }
     return '<pre><code>' + md.utils.escapeHtml(tokens[idx].content) + '</code></pre>\n';
 };
+function renderContainer(tokens, idx, options, env, self) {
+    tokens[idx].attrJoin('role', 'alert');
+    tokens[idx].attrJoin('class', 'alert');
+    tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim());
+    addPart(tokens, idx);
+    return self.renderToken.apply(self, arguments);
+}
+md.use(window.markdownitContainer, 'success', { render: renderContainer });
+md.use(window.markdownitContainer, 'info', { render: renderContainer });
+md.use(window.markdownitContainer, 'warning', { render: renderContainer });
+md.use(window.markdownitContainer, 'danger', { render: renderContainer });
 
 var preventSyncScroll = false;
 
diff --git a/public/views/foot.ejs b/public/views/foot.ejs
index 3e104773..d461f729 100644
--- a/public/views/foot.ejs
+++ b/public/views/foot.ejs
@@ -38,6 +38,7 @@
 <script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
+<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
 <script src="<%- url %>/vendor/gist-embed.js" defer></script>
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index 785c32b4..b78093cc 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -91,6 +91,7 @@
 <script src="<%- url %>/vendor/markdown-it-ins/dist/markdown-it-ins.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-sub/dist/markdown-it-sub.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-sup/dist/markdown-it-sup.min.js" defer></script>
+<script src="<%- url %>/vendor/markdown-it-container/dist/markdown-it-container.min.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-mathjax.js" defer></script>
 <script src="<%- url %>/vendor/markdown-it-regexp.js" defer></script>
 <script src="<%- url %>/vendor/gist-embed.js" defer></script>