Last active
April 10, 2025 21:10
-
-
Save m-e-h/93a83ad42ff08811a94d7191dc3d1aa4 to your computer and use it in GitHub Desktop.
CSS to use for markdown in vs code settings
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
padding: 0; | |
margin: 0; | |
word-wrap: break-word; | |
font-size: 100%; | |
text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
text-rendering: optimizeLegibility; | |
} | |
:root body { | |
color-scheme: light; | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
margin: 0; | |
color: #1f2328; | |
background-color: #ffffff; | |
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; | |
font-size: 16px; | |
line-height: 1.5; | |
word-wrap: break-word; | |
} | |
:root body .octicon { | |
display: inline-block; | |
fill: currentColor; | |
vertical-align: text-bottom; | |
} | |
:root body h1:hover .anchor .octicon-link:before, | |
:root body h2:hover .anchor .octicon-link:before, | |
:root body h3:hover .anchor .octicon-link:before, | |
:root body h4:hover .anchor .octicon-link:before, | |
:root body h5:hover .anchor .octicon-link:before, | |
:root body h6:hover .anchor .octicon-link:before { | |
width: 16px; | |
height: 16px; | |
content: ' '; | |
display: inline-block; | |
background-color: currentColor; | |
-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); | |
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); | |
} | |
:root body details, | |
:root body figcaption, | |
:root body figure { | |
display: block; | |
} | |
:root body summary { | |
display: list-item; | |
} | |
:root body [hidden] { | |
display: none !important; | |
} | |
:root body a { | |
background-color: transparent; | |
color: #0969da; | |
text-decoration: none; | |
} | |
:root body abbr[title] { | |
border-bottom: none; | |
-webkit-text-decoration: underline dotted; | |
text-decoration: underline dotted; | |
} | |
:root body b, | |
:root body strong { | |
font-weight: 600; | |
} | |
:root body dfn { | |
font-style: italic; | |
} | |
:root body h1 { | |
margin: .67em 0; | |
font-weight: 600; | |
padding-bottom: .3em; | |
font-size: 2em; | |
border-bottom: 1px solid #d1d9e0b3; | |
} | |
:root body mark { | |
background-color: #fff8c5; | |
color: #1f2328; | |
} | |
:root body small { | |
font-size: 90%; | |
} | |
:root body sub, | |
:root body sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
:root body sub { | |
bottom: -0.25em; | |
} | |
:root body sup { | |
top: -0.5em; | |
} | |
:root body img { | |
border-style: none; | |
max-width: 100%; | |
box-sizing: content-box; | |
} | |
:root body code, | |
:root body kbd, | |
:root body pre, | |
:root body samp { | |
font-family: monospace; | |
font-size: 1em; | |
} | |
:root body figure { | |
margin: 1em 2.5rem; | |
} | |
:root body hr { | |
box-sizing: content-box; | |
overflow: hidden; | |
background: transparent; | |
border-bottom: 1px solid #d1d9e0b3; | |
height: .25em; | |
padding: 0; | |
margin: 1.5rem 0; | |
background-color: #d1d9e0; | |
border: 0; | |
} | |
:root body input { | |
font: inherit; | |
margin: 0; | |
overflow: visible; | |
font-family: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
} | |
:root body [type=button], | |
:root body [type=reset], | |
:root body [type=submit] { | |
-webkit-appearance: button; | |
appearance: button; | |
} | |
:root body [type=checkbox], | |
:root body [type=radio] { | |
box-sizing: border-box; | |
padding: 0; | |
} | |
:root body [type=number]::-webkit-inner-spin-button, | |
:root body [type=number]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
:root body [type=search]::-webkit-search-cancel-button, | |
:root body [type=search]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
appearance: none; | |
} | |
:root body ::-webkit-input-placeholder { | |
color: inherit; | |
opacity: .54; | |
} | |
:root body ::-webkit-file-upload-button { | |
-webkit-appearance: button; | |
appearance: button; | |
font: inherit; | |
} | |
:root body a:hover { | |
text-decoration: underline; | |
} | |
:root body ::placeholder { | |
color: #59636e; | |
opacity: 1; | |
} | |
:root body hr::before { | |
display: table; | |
content: ""; | |
} | |
:root body hr::after { | |
display: table; | |
clear: both; | |
content: ""; | |
} | |
:root body table { | |
border-spacing: 0; | |
border-collapse: collapse; | |
display: block; | |
width: max-content; | |
max-width: 100%; | |
overflow: auto; | |
font-variant: tabular-nums; | |
} | |
:root body td, | |
:root body th { | |
padding: 0; | |
} | |
:root body details summary { | |
cursor: pointer; | |
} | |
:root body a:focus, | |
:root body [role=button]:focus, | |
:root body input[type=radio]:focus, | |
:root body input[type=checkbox]:focus { | |
outline: 2px solid #0969da; | |
outline-offset: -2px; | |
box-shadow: none; | |
} | |
:root body a:focus:not(:focus-visible), | |
:root body [role=button]:focus:not(:focus-visible), | |
:root body input[type=radio]:focus:not(:focus-visible), | |
:root body input[type=checkbox]:focus:not(:focus-visible) { | |
outline: solid 1px transparent; | |
} | |
:root body a:focus-visible, | |
:root body [role=button]:focus-visible, | |
:root body input[type=radio]:focus-visible, | |
:root body input[type=checkbox]:focus-visible { | |
outline: 2px solid #0969da; | |
outline-offset: -2px; | |
box-shadow: none; | |
} | |
:root body a:not([class]):focus, | |
:root body a:not([class]):focus-visible, | |
:root body input[type=radio]:focus, | |
:root body input[type=radio]:focus-visible, | |
:root body input[type=checkbox]:focus, | |
:root body input[type=checkbox]:focus-visible { | |
outline-offset: 0; | |
} | |
:root body kbd { | |
display: inline-block; | |
padding: 0.25rem; | |
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; | |
line-height: 10px; | |
color: #1f2328; | |
vertical-align: middle; | |
background-color: #f6f8fa; | |
border: solid 1px #d1d9e0b3; | |
border-bottom-color: #d1d9e0b3; | |
border-radius: 6px; | |
box-shadow: inset 0 -1px 0 #d1d9e0b3; | |
} | |
:root body h1, | |
:root body h2, | |
:root body h3, | |
:root body h4, | |
:root body h5, | |
:root body h6 { | |
margin-top: 1.5rem; | |
margin-bottom: 1rem; | |
font-weight: 600; | |
line-height: 1.25; | |
} | |
:root body h2 { | |
font-weight: 600; | |
padding-bottom: .3em; | |
font-size: 1.5em; | |
border-bottom: 1px solid #d1d9e0b3; | |
} | |
:root body h3 { | |
font-weight: 600; | |
font-size: 1.25em; | |
} | |
:root body h4 { | |
font-weight: 600; | |
font-size: 1em; | |
} | |
:root body h5 { | |
font-weight: 600; | |
font-size: .875em; | |
} | |
:root body h6 { | |
font-weight: 600; | |
font-size: .85em; | |
color: #59636e; | |
} | |
:root body p { | |
margin-top: 0; | |
margin-bottom: 10px; | |
} | |
:root body blockquote { | |
margin: 0; | |
padding: 0 1em; | |
color: #59636e; | |
border-left: .25em solid #d1d9e0; | |
} | |
:root body ul, | |
:root body ol { | |
margin-top: 0; | |
margin-bottom: 0; | |
padding-left: 2em; | |
} | |
:root body ol ol, | |
:root body ul ol { | |
list-style-type: lower-roman; | |
} | |
:root body ul ul ol, | |
:root body ul ol ol, | |
:root body ol ul ol, | |
:root body ol ol ol { | |
list-style-type: lower-alpha; | |
} | |
:root body dd { | |
margin-left: 0; | |
} | |
:root body tt, | |
:root body code, | |
:root body samp { | |
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; | |
font-size: 12px; | |
} | |
:root body pre { | |
margin-top: 0; | |
margin-bottom: 0; | |
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; | |
font-size: 12px; | |
word-wrap: normal; | |
} | |
:root body .octicon { | |
display: inline-block; | |
overflow: visible !important; | |
vertical-align: text-bottom; | |
fill: currentColor; | |
} | |
:root body input::-webkit-outer-spin-button, | |
:root body input::-webkit-inner-spin-button { | |
margin: 0; | |
appearance: none; | |
} | |
:root body .mr-2 { | |
margin-right: 0.5rem !important; | |
} | |
:root body::before { | |
display: table; | |
content: ""; | |
} | |
:root body::after { | |
display: table; | |
clear: both; | |
content: ""; | |
} | |
:root body>*:first-child { | |
margin-top: 0 !important; | |
} | |
:root body>*:last-child { | |
margin-bottom: 0 !important; | |
} | |
:root body a:not([href]) { | |
color: inherit; | |
text-decoration: none; | |
} | |
:root body .absent { | |
color: #d1242f; | |
} | |
:root body .anchor { | |
float: left; | |
padding-right: 0.25rem; | |
margin-left: -20px; | |
line-height: 1; | |
} | |
:root body .anchor:focus { | |
outline: none; | |
} | |
:root body p, | |
:root body blockquote, | |
:root body ul, | |
:root body ol, | |
:root body dl, | |
:root body table, | |
:root body pre, | |
:root body details { | |
margin-top: 0; | |
margin-bottom: 1rem; | |
} | |
:root body blockquote>:first-child { | |
margin-top: 0; | |
} | |
:root body blockquote>:last-child { | |
margin-bottom: 0; | |
} | |
:root body h1 .octicon-link, | |
:root body h2 .octicon-link, | |
:root body h3 .octicon-link, | |
:root body h4 .octicon-link, | |
:root body h5 .octicon-link, | |
:root body h6 .octicon-link { | |
color: #1f2328; | |
vertical-align: middle; | |
visibility: hidden; | |
} | |
:root body h1:hover .anchor, | |
:root body h2:hover .anchor, | |
:root body h3:hover .anchor, | |
:root body h4:hover .anchor, | |
:root body h5:hover .anchor, | |
:root body h6:hover .anchor { | |
text-decoration: none; | |
} | |
:root body h1:hover .anchor .octicon-link, | |
:root body h2:hover .anchor .octicon-link, | |
:root body h3:hover .anchor .octicon-link, | |
:root body h4:hover .anchor .octicon-link, | |
:root body h5:hover .anchor .octicon-link, | |
:root body h6:hover .anchor .octicon-link { | |
visibility: visible; | |
} | |
:root body h1 tt, | |
:root body h1 code, | |
:root body h2 tt, | |
:root body h2 code, | |
:root body h3 tt, | |
:root body h3 code, | |
:root body h4 tt, | |
:root body h4 code, | |
:root body h5 tt, | |
:root body h5 code, | |
:root body h6 tt, | |
:root body h6 code { | |
padding: 0 .2em; | |
font-size: inherit; | |
} | |
:root body summary h1, | |
:root body summary h2, | |
:root body summary h3, | |
:root body summary h4, | |
:root body summary h5, | |
:root body summary h6 { | |
display: inline-block; | |
} | |
:root body summary h1 .anchor, | |
:root body summary h2 .anchor, | |
:root body summary h3 .anchor, | |
:root body summary h4 .anchor, | |
:root body summary h5 .anchor, | |
:root body summary h6 .anchor { | |
margin-left: -40px; | |
} | |
:root body summary h1, | |
:root body summary h2 { | |
padding-bottom: 0; | |
border-bottom: 0; | |
} | |
:root body ul.no-list, | |
:root body ol.no-list { | |
padding: 0; | |
list-style-type: none; | |
} | |
:root body ol[type="a s"] { | |
list-style-type: lower-alpha; | |
} | |
:root body ol[type="A s"] { | |
list-style-type: upper-alpha; | |
} | |
:root body ol[type="i s"] { | |
list-style-type: lower-roman; | |
} | |
:root body ol[type="I s"] { | |
list-style-type: upper-roman; | |
} | |
:root body ol[type="1"] { | |
list-style-type: decimal; | |
} | |
:root body div>ol:not([type]) { | |
list-style-type: decimal; | |
} | |
:root body ul ul, | |
:root body ul ol, | |
:root body ol ol, | |
:root body ol ul { | |
margin-top: 0; | |
margin-bottom: 0; | |
} | |
:root body li>p { | |
margin-top: 1rem; | |
} | |
:root body li+li { | |
margin-top: .25em; | |
} | |
:root body dl { | |
padding: 0; | |
} | |
:root body dl dt { | |
padding: 0; | |
margin-top: 1rem; | |
font-size: 1em; | |
font-style: italic; | |
font-weight: 600; | |
} | |
:root body dl dd { | |
padding: 0 1rem; | |
margin-bottom: 1rem; | |
} | |
:root body table th { | |
font-weight: 600; | |
} | |
:root body table th, | |
:root body table td { | |
padding: 6px 13px; | |
border: 1px solid #d1d9e0; | |
} | |
:root body table td>:last-child { | |
margin-bottom: 0; | |
} | |
:root body table tr { | |
background-color: #ffffff; | |
border-top: 1px solid #d1d9e0b3; | |
} | |
:root body table tr:nth-child(2n) { | |
background-color: #f6f8fa; | |
} | |
:root body table img { | |
background-color: transparent; | |
} | |
:root body img[align=right] { | |
padding-left: 20px; | |
} | |
:root body img[align=left] { | |
padding-right: 20px; | |
} | |
:root body .emoji { | |
max-width: none; | |
vertical-align: text-top; | |
background-color: transparent; | |
} | |
:root body span.frame { | |
display: block; | |
overflow: hidden; | |
} | |
:root body span.frame>span { | |
display: block; | |
float: left; | |
width: auto; | |
padding: 7px; | |
margin: 13px 0 0; | |
overflow: hidden; | |
border: 1px solid #d1d9e0; | |
} | |
:root body span.frame span img { | |
display: block; | |
float: left; | |
} | |
:root body span.frame span span { | |
display: block; | |
padding: 5px 0 0; | |
clear: both; | |
color: #1f2328; | |
} | |
:root body span.align-center { | |
display: block; | |
overflow: hidden; | |
clear: both; | |
} | |
:root body span.align-center>span { | |
display: block; | |
margin: 13px auto 0; | |
overflow: hidden; | |
text-align: center; | |
} | |
:root body span.align-center span img { | |
margin: 0 auto; | |
text-align: center; | |
} | |
:root body span.align-right { | |
display: block; | |
overflow: hidden; | |
clear: both; | |
} | |
:root body span.align-right>span { | |
display: block; | |
margin: 13px 0 0; | |
overflow: hidden; | |
text-align: right; | |
} | |
:root body span.align-right span img { | |
margin: 0; | |
text-align: right; | |
} | |
:root body span.float-left { | |
display: block; | |
float: left; | |
margin-right: 13px; | |
overflow: hidden; | |
} | |
:root body span.float-left span { | |
margin: 13px 0 0; | |
} | |
:root body span.float-right { | |
display: block; | |
float: right; | |
margin-left: 13px; | |
overflow: hidden; | |
} | |
:root body span.float-right>span { | |
display: block; | |
margin: 13px auto 0; | |
overflow: hidden; | |
text-align: right; | |
} | |
:root body code, | |
:root body tt { | |
padding: .2em .4em; | |
margin: 0; | |
font-size: 85%; | |
white-space: break-spaces; | |
background-color: #818b981f; | |
border-radius: 6px; | |
} | |
:root body code br, | |
:root body tt br { | |
display: none; | |
} | |
:root body del code { | |
text-decoration: inherit; | |
} | |
:root body samp { | |
font-size: 85%; | |
} | |
:root body pre code { | |
font-size: 100%; | |
} | |
:root body pre>code { | |
padding: 0; | |
margin: 0; | |
word-break: normal; | |
white-space: pre; | |
background: transparent; | |
border: 0; | |
} | |
:root body .highlight { | |
margin-bottom: 1rem; | |
} | |
:root body .highlight pre { | |
margin-bottom: 0; | |
word-break: normal; | |
} | |
:root body .highlight pre, | |
:root body pre { | |
padding: 1rem; | |
overflow: auto; | |
font-size: 85%; | |
line-height: 1.45; | |
color: #1f2328; | |
background-color: #f6f8fa; | |
border-radius: 6px; | |
} | |
:root body pre code, | |
:root body pre tt { | |
display: inline; | |
max-width: auto; | |
padding: 0; | |
margin: 0; | |
overflow: visible; | |
line-height: inherit; | |
word-wrap: normal; | |
background-color: transparent; | |
border: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Based on https://github.com/sindresorhus/github-markdown-css
Use https://raw.githack.com/ cdn