Adding pre-defined HTML boxes as in Jupyter Notebook.

Would it be possible to add some pre-defined CSS styling for HTML boxes, as it already happens in Jupyter Notebook? (see https://gist.github.com/DanielKotik/4b81480c479a57e0dd13ac4d153e4451 for reference).

Now I add the following style to every Markdown cell I write to have them available as a workaround, but it would be nice to have them out-of-the-box.

<style>
tt {
    font-family:
    "MonoLisa",
    "Courier Prime",
    "Courier New",
    "Inconsolata",
    "Lucida Console",
    "Menlo",
    "Monaco", 
    monospace;
    color: "black";
    font: 10px;
}

alert {
    display: inline-block;
}
    
.alert-block{
    margin: 20px;
    width: 92%;
    padding: 15px;
    border-radius: 4px;
    font: 16px Tahoma, Alegreya, Garamond, Times;
    font-weight: 400;
}

.alert-info {
    color: #0399A9;
    background: #B2EBF3;
    border: 2px solid #4FD1E1;
}

.alert-warning {
    color: #F67C00;
    background: #FFE0B2;
    border: 2px solid #FFC165;
}

.alert-danger {
    color: #C4453E;
    background: #F7CFD3;
    border: 2px solid #E29C9B;
}

.alert-success {
    color: #388E3C;
    background: #C8E6C9;
    border: 2px solid #81C784;
}
</style>

[rchiodo]

Thanks for the suggestion. Yes this would be possible, but not likely something we’d do without more up votes. We’d have to have an extension point for our markdown renderer I believe.

[eric-wieser]

Aha, it’s from here:

https://github.com/microsoft/vscode/blob/04ecb1d42f809169ceeeed6706a378c63d5a8491/extensions/markdown-language-features/notebook/index.ts#L33

So maybe make a PR adding the appropriate CSS ( using vscode colors rather than hard-coded) there?