Added back alert styling for markdown cells (#167)

* Revert "Revert "Add styles for jupyter markdown alerts (#143)""

This reverts commit e9afbfe.

* add alert box styling through markdown-style class template

* revert file rename, remove unneeded style tag

* remove markdown preview styles

Author: amunger

build/webpack/webpack.client.config.js

@@ -56,6 +56,7 @@ const defaultConfig = {
     context: constants.ExtensionRootDir,
     entry: {
         renderers: './src/client/index.tsx',
+        markdown: './src/client/markdown.ts',
         builtinRendererHooks: './src/client/builtinRendererHooks.ts',
         vegaRenderer: './src/client/vegaRenderer.ts'
     },

package-lock.json

@@ -117,6 +117,14 @@
                     "application/vnd.vegalite.v4+json",
                     "application/vnd.vegalite.v5+json"
                 ]
+            },
+            {
+                "id": "jupyter-markdown",
+                "displayName": "Jupyter Markdown styles",
+                "entrypoint": {
+                    "extends": "vscode.markdown-it-renderer",
+                    "path": "./out/client_renderer/markdown.js"
+                }
             }
         ]
     },
@@ -189,6 +197,7 @@
         "@types/glob": "^7.1.1",
         "@types/loadable__component": "^5.10.0",
         "@types/lodash": "^4.14.158",
+        "@types/markdown-it": "^12.2.3",
         "@types/mocha": "^7.0.2",
         "@types/node": "^12.11.7",
         "@types/react": "^16.9.35",

package.json

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const styleContent = `
+.alert {
+    width: auto;
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+	border-style: solid;
+	border-width: 1px;
+}
+.alert > *:last-child {
+    margin-bottom: 0;
+}
+#preview > .alert:last-child {
+    /* Prevent this being set to zero by the default notebook stylesheet */
+    padding-bottom: 1em;
+}
+
+.alert-success {
+    background-color: rgb(200,230,201);
+    color: rgb(27,94,32);
+}
+.alert-info {
+    background-color: rgb(178,235,242);
+    color: rgb(0,96,100);
+}
+.alert-warning {
+    background-color: rgb(255,224,178);
+    color: rgb(230,81,0);
+}
+.alert-danger {
+    background-color: rgb(255,205,210);
+    color: rgb(183,28,28);
+}
+`;
+
+export async function activate() {
+    const style = document.createElement('style');
+    style.textContent = styleContent;
+    const template = document.createElement('template');
+    template.classList.add('markdown-style');
+    template.content.appendChild(style);
+    document.head.appendChild(template);
+}