A custom theme for Markdown here
This is a custom set of CSS for MarkdownHere which provides a nicer theme (personal oppinion) than the default.
.hljs { | |
display: block; | |
overflow-x: auto; | |
padding: 0.5em; | |
background: white; | |
color: black | |
} | |
.hljs-variable,.hljs-template-variable,.hljs-symbol,.hljs-bullet,.hljs-section,.hljs-addition,.hljs-attribute,.hljs-link { | |
color: #333 | |
} | |
.hljs-string { | |
color: #B21D12; | |
} | |
.hljs-comment,.hljs-quote,.hljs-meta,.hljs-deletion { | |
color: #ccc | |
} | |
.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-name,.hljs-type,.hljs-strong,.hljs-attr { | |
font-weight: bold | |
} | |
.hljs-literal,.hljs-number { | |
color: #409EFF; | |
font-weight: bold; | |
} | |
.hljs-emphasis { | |
font-style: italic | |
} |
/* | |
* NOTE: | |
* - The use of browser-specific styles (-moz-, -webkit-) should be avoided. | |
* If used, they may not render correctly for people reading the email in | |
* a different browser than the one from which the email was sent. | |
* - The use of state-dependent styles (like a:hover) don't work because they | |
* don't match at the time the styles are made explicit. (In email, styles | |
* must be explicitly applied to all elements -- stylesheets get stripped.) | |
*/ | |
/* This is the overall wrapper, it should be treated as the `body` section. */ | |
.markdown-here-wrapper { | |
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; | |
font-size: 14px; | |
color: rgb(36,41,46); | |
} | |
/* To add site specific rules, you can use the `data-md-url` attribute that we | |
add to the wrapper element. Note that rules like this are used depending | |
on the URL you're *sending* from, not the URL where the recipient views it. | |
*/ | |
/* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */ | |
pre, code { | |
font-size: 0.85em; | |
font-family: Consolas, Inconsolata, Courier, monospace; | |
} | |
code { | |
white-space: pre-wrap; | |
display: inline; /* added to fix Yahoo block display of inline code */ | |
color: #B21D12; | |
} | |
pre { | |
font-size: 1em; | |
line-height: 1.2em; | |
} | |
pre code { | |
white-space: pre; | |
overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */ | |
border-radius: 1px; | |
border: 1px solid #d8d8d8; | |
padding: 0.5em 0.7em; | |
display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */ | |
color: #000; | |
} | |
/* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlighted | |
code look non-monospace. This rule will override it. */ | |
.markdown-here-wrapper[data-md-url*="wordpress."] code span { | |
font: inherit; | |
} | |
/* Wordpress adds a grey background to `pre` elements that doesn't go well with | |
our syntax highlighting. */ | |
.markdown-here-wrapper[data-md-url*="wordpress."] pre { | |
background-color: transparent; | |
} | |
/* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing. | |
Note that we only use a top margin and not a bottom margin -- this prevents the | |
"blank line" look at the top of the email (issue #243). | |
*/ | |
p { | |
/* !important is needed here because Hotmail/Outlook.com uses !important to | |
kill the margin in <p>. We need this to win. */ | |
margin: 0 0 1.2em 0 !important; | |
} | |
table, pre, dl, blockquote, q, ul, ol { | |
margin: 1.2em 0; | |
} | |
ul, ol { | |
padding-left: 2em; | |
} | |
li { | |
margin: 0.5em 0; | |
} | |
/* Space paragraphs in a list the same as the list itself. */ | |
li p { | |
/* Needs !important to override rule above. */ | |
margin: 0.5em 0 !important; | |
} | |
/* Smaller spacing for sub-lists */ | |
ul ul, ul ol, ol ul, ol ol { | |
margin: 0; | |
padding-left: 1em; | |
} | |
/* Use Roman numerals for sub-ordered-lists. (Like Github.) */ | |
ol ol, ul ol { | |
list-style-type: lower-roman; | |
} | |
/* Use letters for sub-sub-ordered lists. (Like Github.) */ | |
ul ul ol, ul ol ol, ol ul ol, ol ol ol { | |
list-style-type: lower-alpha; | |
} | |
dl { | |
padding: 0; | |
} | |
dl dt { | |
font-size: 1em; | |
font-weight: bold; | |
font-style: italic; | |
} | |
dl dd { | |
margin: 0 0 1em; | |
padding: 0 1em; | |
} | |
blockquote, q { | |
border-left: 4px solid #DDD; | |
padding: 0 1em; | |
color: #777; | |
quotes: none; | |
} | |
blockquote::before, blockquote::after, q::before, q::after { | |
content: none; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
margin: 1.3em 0 1em; | |
padding: 0; | |
font-weight: bold; | |
} | |
h1 { | |
font-size: 1.6em; | |
border-bottom: 1px solid #ddd; | |
} | |
h2 { | |
font-size: 1.4em; | |
border-bottom: 1px solid #eee; | |
} | |
h3 { | |
font-size: 1.3em; | |
} | |
h4 { | |
font-size: 1.2em; | |
} | |
h5 { | |
font-size: 1em; | |
} | |
h6 { | |
font-size: 1em; | |
color: #777; | |
} | |
table { | |
padding: 0; | |
border-collapse: collapse; | |
border-spacing: 0; | |
font-size: 1em; | |
font: inherit; | |
border: 0; | |
} | |
tbody { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
table tr { | |
border: 0; | |
border-top: 1px solid #CCC; | |
background-color: white; | |
margin: 0; | |
padding: 0; | |
} | |
table tr:nth-child(2n) { | |
background-color: #F8F8F8; | |
} | |
table tr th, table tr td { | |
font-size: 1em; | |
border: 1px solid #CCC; | |
margin: 0; | |
padding: 0.5em 1em; | |
} | |
table tr th { | |
font-weight: bold; | |
background-color: #F0F0F0; | |
} | |
a { | |
color: #0366d6; | |
text-decoration: none; | |
} |