Add option for shipped VS Code Markdown Preview css?

[bigpick]

The VS Code theme looks great. I was wondering if it'd make sense to also include a CSS sheet for the built in VS Code Markdown Preview as part of the repo as well.

The downside is that there still doesn't seem to be a way to nicely, universally enable custom Markdown styling in VS code (ref #45260, #77290, #96201, etc), based on how they handle sheets; a workaround is to store the CSS somewhere consistent on your machine, and then in any project where you are interested in enabling the Dracula themed markdown preview, you need to make a symlink to the file in the root of that project's directory.

i.e

1. Store the dracula markdown CSS at some path ~/dracula-vs-code-markdown-style.css

2. In any project in VS code you wish to enable the preview theme, create a symlink in the project's root:

   ln -s ~/dracula-vs-code-markdown-style.css /path/to/your/projects/root/dracula-vs-code-markdown-style.css

3. Add dracula-vs-code-markdown-style.css to your project's Markdown Styles (Code --> Preferences --> Extensions --> Markdown --> "Markdown: Styles")

4. If project is git-based, probably want to add it to it's .gitignore; optionally add it to your system's global gitignore to cover everything in the future.

By default, the Markdown preview coloring doesn't match well with the Dracula VS Code theme:

With a minimal CSS file

(markdown example taken from just-the-docs kitchen sink)

I can open a PR with the additional changes/instructions eventually, but wanted to gauge interest/thoughts before doing so.

If you're curious about the preview code block syntax highlighting, that is just verbatim what is at https://draculatheme.com/highlightjs; I didn't bother looking into it if is possible to better update that to match with the formal Dracula spec or anything (...yet?).

[bigpick]

Example CSS file used for the above:

/*  Dracula Theme for VS Code's shipped Markdown Preview
 *
 * https://github.com/zenorocha/dracula-theme
 *
 * Copyright 2021, All rights reserved
 *
 * Code licensed under the MIT license
 * http://zenorocha.mit-license.org
 *
 * @author George Pickering <@bigpick>
 */

/* Dracula colors */
:root{
  --background:   #282a36;
  --current-line: #44475a;
  --foreground:   #f8f8f2;
  --comment:      #6272a4;
  --cyan:         #8be9fd;
  --green:        #50fa7b;
  --orange:       #ffb86c;
  --pink:         #ff79c6;
  --purple:       #bd93f9;
  --red:          #ff5555;
  --yellow:       #f1fa8c;
}

html {
  width: 880px;
  padding: 45px;
  margin-top: 25px;
  margin-bottom: 125px;
}

body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.3;
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
}

a {
  color: var(--cyan);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--purple);
}

::selection {
  color: var(--foreground);
  background-color: var(--pink)
}

pre code {
  color: var(--foreground);
  background-color: var(--background);
}

code {
  color: var(--foreground);
  background-color: var(--background);
}

table>thead>tr>th {
  border-color: var(--current-line);
}

h1, hr, table>tbody>tr+tr>td {
  border-color: var(--current-line);
}

blockquote {
  color: var(--current-line);
  font-style: italic;
  background: transparent;
  border-color: var(--current-line);
}

strong {
  color: var(--orange);
  font-weight: 700;
}

mark {
  color: var(--forground) !important;
  background-color: var(--background) !important;
  padding-top: 1px;
  padding-bottom: 1px;
}

ul ul::before {
  left: 0px;
  top: 0;
  bottom: 0;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

/* Code block syntax highlighting via Dracula theme for highlightJS
 *
 * https://raw.githubusercontent.com/dracula/highlightjs/master/dracula.css
 * ... Would be nice to not have to duplicate this whole thing,
 *     but can't get import to work in VS Code :\
 */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #282a36;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
  color: #8be9fd;
}

.hljs-keyword {
  color: #ff79c6;
}

.hljs,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-title {
  color: #50fa7b;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #f1fa8c;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: #6272a4;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  font-weight: bold;
}

.hljs-literal,
.hljs-number {
  color: #bd93f9;
}

.hljs-emphasis {
  font-style: italic;
}

[dsifford]

Not sure how I feel about this.

I actually personally prefer to have my markdown preview styled exactly like how it appears on github so I can preview how readmes look before pushing changes.

I will say, however, that I am very much against creating a file in the home directory for this. I'm fairly certain that there must be an API for styling the markdown preview because the markdown preview extension provides this functionality.

I'll leave this issue open in the event that others want to chime in.

[bigpick]

I actually personally prefer to have my markdown preview styled exactly like how it appears on github so I can preview how readmes look before pushing changes.

This isn't the VS code preview default anyways, though, right?

I will say, however, that I am very much against creating a file in the home directory for this

Yeah, that was just an example. Net is just that it has to be in some constant/consistent location, so that the hacky symlink stuff will work (which is lame wherever you end up putting it)

... I'm fairly certain that there must be an API for styling the markdown preview because the markdown preview extension provides this functionality.

If you find it, I'd be interested in hearing what it is. Everything I've read up seemed to suggest that the only other way of getting this functionality is via making your own Extension (like the above). All that extension consists of is the Gitub CSS file.

---

I guess the better way of it getting/being officially supported (wrt Dracula community), it'd probably need to just be rolled into a new "vscode-dracula-markdown-preview-style" extension?