[Feature Request] - 1638 - Support for admonitions

Added support for markup admonitions by including markdown-it-admonition. Added material icon support and updates to styles for rendering of six different types of admonitions.

browser/components/MarkdownPreview.js

@@ -52,6 +52,16 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scro
   font-weight: 700;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff2') format('woff2'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
+       url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
+}
 ${markdownStyle}
 body {
   font-family: '${fontFamily.join("','")}';

browser/components/markdown.styl

@@ -293,6 +293,82 @@ kbd
   line-height 1
   padding 3px 5px
 
+$admonition
+    box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
+    position relative
+    margin 1.5625em 0
+    padding 0 1.2rem
+    border-left .4rem solid #448aff
+    border-radius .2rem
+    overflow auto
+
+html .admonition>:last-child
+    margin-bottom 1.2rem
+
+.admonition .admonition
+    margin 1em 0
+
+.admonition p
+    margin-top: 0.5em
+
+$admonition-icon
+    position absolute
+    left 1.2rem
+    font-family: "Material Icons"
+    font-size: 24px
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+
+$admonition-title
+    margin 0 -1.2rem
+    padding .8rem 1.2rem .8rem 4rem
+    border-bottom .1rem solid rgba(68,138,255,.1)
+    background-color rgba(68,138,255,.1)
+    font-weight 700
+
+.admonition>.admonition-title:last-child
+    margin-bottom 0
+
+admonition_types = {
+    note: {border-color: #448aff, title-color: rgba(68,138,255,.1), icon: "note"},
+    hint: {border-color: #00bfa5, title-color: rgba(0,191,165,.1), icon: "info"},
+    danger: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "block"},
+    caution: {border-color: #ff9100, title-color: rgba(255,145,0,.1), icon: "warning"},
+    error: {border-color: #ff1744, title-color: rgba(255,23,68,.1), icon: "error"},
+    attention: {border-color: #64dd17, title-color: rgba(100,221,23,.1), icon: "priority_high"}
+}
+
+for name, val in admonition_types
+    .admonition.{name}
+        @extend $admonition
+        border-left-color: val[border-color]
+
+    .admonition.{name}>.admonition-title
+        @extend $admonition-title
+        border-bottom-color: .1rem solid val[title-color]
+        background-color: val[title-color]
+
+    .admonition.{name}>.admonition-title:before
+        @extend $admonition-icon
+        color: val[border-color]
+        content: val[icon]
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)

browser/lib/markdown.js

@@ -141,6 +141,7 @@ class Markdown {
       }
     })
     this.md.use(require('markdown-it-kbd'))
+    this.md.use(require('markdown-it-admonition'))
 
     const deflate = require('markdown-it-plantuml/lib/deflate')
     this.md.use(require('markdown-it-plantuml'), '', {

package.json

@@ -70,6 +70,7 @@
     "lodash": "^4.11.1",
     "lodash-move": "^1.1.1",
     "markdown-it": "^6.0.1",
+    "markdown-it-admonition": "https://github.com/johannbre/markdown-it-admonition.git",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",

webpack-skeleton.js

@@ -40,6 +40,7 @@ var config = {
     'markdown-it-checkbox',
     'markdown-it-kbd',
     'markdown-it-plantuml',
+    'markdown-it-admonition',
     'devtron',
     '@rokt33r/season',
     {