Skip to content

Instantly share code, notes, and snippets.

@davestewart
Last active April 18, 2023 18:06
Show Gist options
  • Save davestewart/d7a7c84a6ab50418cb76c71aad51dee8 to your computer and use it in GitHub Desktop.
Save davestewart/d7a7c84a6ab50418cb76c71aad51dee8 to your computer and use it in GitHub Desktop.
Typora GitHub user theme
/*
* Typora GitHub user theme
*
* Makes markdown docs look *exactly* like they do on GitHub
*
* To install, drop in your Typora themes folder and open a new window
*/
body {
font-family: BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 16px;
font-weight: 400;
line-height: 1.5;
word-wrap: break-word;
background-color: var(--color-canvas-default);
color: var(--color-fg-default);
}
@media screen and (max-width: 896px) {
body > content {
padding: inherit 32px !important;
}
}
#write {
max-width: 896px;
border-radius: 6px;
padding: 16px 32px;
margin: 2rem auto;
}
@media screen and (min-width: 1078px) {
#write {
border-color: transparent;
max-width: 1078px;
}
}
#write > *:first-child {
margin-top: 0;
}
#write > pre.md-meta-block {
margin-top: 16px !important;
}
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
#write h1 tt, #write h1 code, #write h2 tt, #write h2 code, #write h3 tt, #write h3 code, #write h4 tt, #write h4 code, #write h5 tt, #write h5 code, #write h6 tt, #write h6 code {
padding: 0 0.2em;
font-size: inherit;
font-weight: inherit;
}
#write h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--color-border-muted);
}
#write h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid var(--color-border-muted);
}
#write h3 {
font-size: 1.25em;
}
#write h4 {
font-size: 1em;
}
#write h5 {
font-size: 0.875em;
}
#write h6 {
font-size: 0.85em;
color: var(--color-fg-muted);
}
#write > p,
#write > blockquote,
#write > ul,
#write > ol,
#write > dl,
#write > table,
#write > pre,
#write > details {
margin-top: 0;
margin-bottom: 16px;
-webkit-font-smoothing: subpixel-antialiased;
}
#write p {
letter-spacing: 0.014em;
}
#write ul, #write ol {
padding-left: 2em;
}
#write ul li {
list-style: disc;
}
#write li p {
margin: 0;
}
#write li + li {
margin-top: 0.25em;
}
#write a {
text-decoration: none;
}
#write a:hover {
text-decoration: underline;
}
#write .md-softbreak {
display: inline-block;
}
#write blockquote {
border-left: 0.25em solid var(--color-border-default);
padding: 0 1em;
color: var(--color-fg-muted);
}
#write table {
width: auto;
}
#write table tr {
background-color: var(--color-canvas-default);
border-top: 1px solid var(--color-border-muted);
}
#write table tr:nth-child(2n) {
background-color: var(--color-canvas-subtle);
}
#write table th, #write table td {
padding: 6px 13px;
border: 1px solid var(--color-border-default);
}
#write pre {
color: var(--color-fg-default);
}
#write .md-fences,
#write code,
#write tt {
border: none;
border-radius: 6px;
padding: 16px;
overflow: visible;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
font-weight: 500;
font-size: 85%;
line-height: 1.45;
background-color: var(--color-canvas-subtle);
-webkit-font-smoothing: antialiased;
}
#write code,
#write tt {
margin: 0;
border-radius: 6px;
padding: 0.2em 0.4em;
white-space: break-spaces;
background-color: var(--color-neutral-muted);
}
#write .CodeMirror-lines {
padding-left: 0;
}
#write .cm-def {
color: var(--color-fg-default);
}
#write .cm-tag {
color: var(--color-prettylights-syntax-entity-tag);
}
#write .cm-attribute {
color: var(--color-prettylights-syntax-entity);
}
#write .cm-type {
color: var(--color-prettylights-syntax-storage-modifier-import);
}
#write .cm-keyword {
color: var(--color-prettylights-syntax-keyword);
}
#write .cm-property {
color: var(--color-prettylights-syntax-constant);
}
#write .cm-variable {
color: var(--color-prettylights-syntax-constant);
}
#write .cm-number {
color: var(--color-prettylights-syntax-constant);
}
#write .cm-string {
color: var(--color-prettylights-syntax-string);
}
#write .cm-comment {
color: var(--color-prettylights-syntax-comment);
}
:root {
--color-fg-default: #1f2328;
--color-fg-muted: #656d76;
--color-canvas-default: #fff;
--color-canvas-subtle: #f6f8fa;
--color-border-default: #d0d7de;
--color-border-muted: rgba(216, 222, 228, 1);
--color-neutral-muted: rgba(175, 184, 193, 0.2);
--color-prettylights-syntax-storage-modifier-import: #24292f;
--color-prettylights-syntax-comment: #6e7781;
--color-prettylights-syntax-constant: #0550ae;
--color-prettylights-syntax-entity: #8250df;
--color-prettylights-syntax-entity-tag: #116329;
--color-prettylights-syntax-keyword: #cf222e;
--color-prettylights-syntax-string: #0a3069;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment