Updated to support container syntax and styles

Author: jackycute

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"
   }

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,

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');

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;
 

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>

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>