VSCode GitHub Markdown Theme

README.md

GitHub Markdown Theme for Visual Studio Code

This CSS stylesheet allows you to preview markdown files in VSCode using GitHub's mardown theme. This CSS was taken directly from the official GitHub Markdown repo. I replaced their top-level .markdown-body class with the body tag so it would work in VSCode, and added styling for the html tag to match GitHub's fixed-width container.

Instructions

1. Copy the CSS file to your computer
   Copy the github-markdown.css file below to your computer. You can put it anywhere you want, but I chose to put it in the same folder as my VSCode settings file.

2. Edit your VSCode settings
   If you want to use this theme for all of your projects, then edit your User Settings file. If you just want to use this theme for a specific project, then edit that project's .vscode/settings.json file instead. Either way, you're going to add the following setting to the file:
   
   "markdown.styles": ["file:///Users/{your_username}/Library/Application%20Support/Code/User/github-markdown.css"]
   
   If you put the github-markdown.css file in your VSCode settings folder, then just replace {your_username} in the path above. If you put the file somewhere else, then replace the whole path, but make sure you use the file:// prefix, and URL-encode any spaces or special characters in the path (for example, spaces become %20).

3. Restart VSCode
   This step isn't always necessary, but sometimes VSCode doesn't detect the change to the markdown.styles setting. A restart always works.

github-markdown.css

@font-face {
  font-family: octicons-link;
  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
}

html {
  width: 880px;
  padding: 45px;
  margin-top: 25px;
  margin-bottom: 125px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

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

body .pl-c {
  color: #969896;
}

body .pl-c1,
body .pl-s .pl-v {
  color: #0086b3;
}

body .pl-e,
body .pl-en {
  color: #795da3;
}

body .pl-smi,
body .pl-s .pl-s1 {
  color: #333;
}

body .pl-ent {
  color: #63a35c;
}

body .pl-k {
  color: #a71d5d;
}

body .pl-s,
body .pl-pds,
body .pl-s .pl-pse .pl-s1,
body .pl-sr,
body .pl-sr .pl-cce,
body .pl-sr .pl-sre,
body .pl-sr .pl-sra {
  color: #183691;
}

body .pl-v {
  color: #ed6a43;
}

body .pl-id {
  color: #b52a1d;
}

body .pl-ii {
  color: #f8f8f8;
  background-color: #b52a1d;
}

body .pl-sr .pl-cce {
  font-weight: bold;
  color: #63a35c;
}

body .pl-ml {
  color: #693a17;
}

body .pl-mh,
body .pl-mh .pl-en,
body .pl-ms {
  font-weight: bold;
  color: #1d3e81;
}

body .pl-mq {
  color: #008080;
}

body .pl-mi {
  font-style: italic;
  color: #333;
}

body .pl-mb {
  font-weight: bold;
  color: #333;
}

body .pl-md {
  color: #bd2c00;
  background-color: #ffecec;
}

body .pl-mi1 {
  color: #55a532;
  background-color: #eaffea;
}

body .pl-mdr {
  font-weight: bold;
  color: #795da3;
}

body .pl-mo {
  color: #1d3e81;
}

body .octicon {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
}

body a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

body a:active,
body a:hover {
  outline-width: 0;
}

body strong {
  font-weight: inherit;
}

body strong {
  font-weight: bolder;
}

body h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

body img {
  border-style: none;
}

body svg:not(:root) {
  overflow: hidden;
}

body code,
body kbd,
body pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

body hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

body input {
  font: inherit;
  margin: 0;
}

body input {
  overflow: visible;
}

body [type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

body input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

body a {
  color: #4078c0;
  text-decoration: none;
}

body a:hover,
body a:active {
  text-decoration: underline;
}

body strong {
  font-weight: 600;
}

body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

body hr::before {
  display: table;
  content: "";
}

body hr::after {
  display: table;
  clear: both;
  content: "";
}

body table {
  border-spacing: 0;
  border-collapse: collapse;
}

body td,
body th {
  padding: 0;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  margin-top: 0;
  margin-bottom: 0;
}

body h1 {
  font-size: 32px;
  font-weight: 600;
}

body h2 {
  font-size: 24px;
  font-weight: 600;
}

body h3 {
  font-size: 20px;
  font-weight: 600;
}

body h4 {
  font-size: 16px;
  font-weight: 600;
}

body h5 {
  font-size: 14px;
  font-weight: 600;
}

body h6 {
  font-size: 12px;
  font-weight: 600;
}

body p {
  margin-top: 0;
  margin-bottom: 10px;
}

body blockquote {
  margin: 0;
}

body ul,
body ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

body ol ol,
body ul ol {
  list-style-type: lower-roman;
}

body ul ul ol,
body ul ol ol,
body ol ul ol,
body ol ol ol {
  list-style-type: lower-alpha;
}

body dd {
  margin-left: 0;
}

body code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
}

body pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

body .octicon {
  vertical-align: text-bottom;
}

body input {
  -webkit-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}

body::before {
  display: table;
  content: "";
}

body::after {
  display: table;
  clear: both;
  content: "";
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

body .anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}

body .anchor:focus {
  outline: none;
}

body p,
body blockquote,
body ul,
body ol,
body dl,
body table,
body pre {
  margin-top: 0;
  margin-bottom: 16px;
}

body hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e7e7e7;
  border: 0;
}

body blockquote {
  padding: 0 1em;
  color: #777;
  border-left: 0.25em solid #ddd;
}

body blockquote>:first-child {
  margin-top: 0;
}

body blockquote>:last-child {
  margin-bottom: 0;
}

body kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

body h1 .octicon-link,
body h2 .octicon-link,
body h3 .octicon-link,
body h4 .octicon-link,
body h5 .octicon-link,
body h6 .octicon-link {
  color: #000;
  vertical-align: middle;
  visibility: hidden;
}

body h1:hover .anchor,
body h2:hover .anchor,
body h3:hover .anchor,
body h4:hover .anchor,
body h5:hover .anchor,
body h6:hover .anchor {
  text-decoration: none;
}

body h1:hover .anchor .octicon-link,
body h2:hover .anchor .octicon-link,
body h3:hover .anchor .octicon-link,
body h4:hover .anchor .octicon-link,
body h5:hover .anchor .octicon-link,
body h6:hover .anchor .octicon-link {
  visibility: visible;
}

body h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid #eee;
}

body h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid #eee;
}

body h3 {
  font-size: 1.25em;
}

body h4 {
  font-size: 1em;
}

body h5 {
  font-size: 0.875em;
}

body h6 {
  font-size: 0.85em;
  color: #777;
}

body ul,
body ol {
  padding-left: 2em;
}

body ul ul,
body ul ol,
body ol ol,
body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

body li>p {
  margin-top: 16px;
}

body li+li {
  margin-top: 0.25em;
}

body dl {
  padding: 0;
}

body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

body table {
  display: block;
  width: 100%;
  overflow: auto;
}

body table th {
  font-weight: bold;
}

body table th,
body table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

body table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

body table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

body img {
  max-width: 100%;
  box-sizing: content-box;
  background-color: #fff;
}

body code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

body code::before,
body code::after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

body pre {
  word-wrap: normal;
}

body pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

body .highlight {
  margin-bottom: 16px;
}

body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

body .highlight pre,
body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f7f7f7;
  border-radius: 3px;
}

body pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

body pre code::before,
body pre code::after {
  content: normal;
}

body .pl-0 {
  padding-left: 0 !important;
}

body .pl-1 {
  padding-left: 3px !important;
}

body .pl-2 {
  padding-left: 6px !important;
}

body .pl-3 {
  padding-left: 12px !important;
}

body .pl-4 {
  padding-left: 24px !important;
}

body .pl-5 {
  padding-left: 36px !important;
}

body .pl-6 {
  padding-left: 48px !important;
}

body .full-commit .btn-outline:not(:disabled):hover {
  color: #4078c0;
  border: 1px solid #4078c0;
}

body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #bbb;
}

body :checked+.radio-label {
  position: relative;
  z-index: 1;
  border-color: #4078c0;
}

body .task-list-item {
  list-style-type: none;
}

body .task-list-item+.task-list-item {
  margin-top: 3px;
}

body .task-list-item input {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}

body hr {
  border-bottom-color: #eee;
}

Great! Very smart solution and exactly what i was looking for 👍

I would suggest one small addition: add zoom: 50%; to the html selector so the rendered md won't get blown up. I know it's a dirty hack but it works very well.

No matter what I try I can't get VS Code to be able to open the CSS file.
I have this in my settings file:

  "markdown.styles": [
    "file:///Users/Mark/vscode/markdown.css"
  ],

When I open a markdown preview in VS Code I get a popup that says "Could not load 'markdown.styles'".
I can copy the file URL from above and paste it in a web browser and it opens it fine.
Any idea what I might be doing wrong?

@mvolkmann, report it to Microsoft's issues at their Github repository of VSCode. It is a bug.

@mvolkmann, check microsoft/vscode#8287

See too: microsoft/vscode#45260

Root cause: We now restrict the markdown preview to only loading resources inside the current workspace for security reasons. Workaround is to move the css file into your workspace or publish the css as a markdown extension extension

😦
microsoft/vscode#45260 (comment)

more dirty hacks, point it right at the raw file, preferably your own version of the file:

  "markdown.styles": [
 "https://gist.githubusercontent.com/BigstickCarpet/5d31c053d0b1d52389eb2723f7550907/raw/41ac88d0cd00c55bac925891296df05c894c4a34/github-markdown.css"
  ]

For example, to load a stylesheet called Style.css at the root of your current workspace, use File > Preferences > Settings to bring up the workspace settings.json file and make this update:

// Place your settings in this file to overwrite default and user settings.
{
    "markdown.styles": [
        "Style.css"
    ]
}

This extension provides github styling for the markdown preview. No setup or configuration required

Using markdown.styles as described in this gist is no longer supported. You can still use css files from inside a workspace however

Thanks for providing this. I'm sorry that I don't know much about css. I'm trying to change the inline code text color. I've tried to adjust a few places but none of them worked.