mirror of
https://github.com/atom/atom.git
synced 2026-01-23 13:58:08 -05:00
markdown preview to less. also seperate out pygments colors
This commit is contained in:
Justin Palmer
committed by
Corey Johnson
Corey Johnson
parent
03642a2923
commit
dcfee2d9d9
@@ -1,438 +0,0 @@
|
||||
.markdown-preview {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
min-width: 680px;
|
||||
}
|
||||
|
||||
.markdown-body pre,
|
||||
.markdown-body code,
|
||||
.markdown-body tt {
|
||||
font-size: 12px;
|
||||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #4183c4;
|
||||
}
|
||||
|
||||
.markdown-body ol > li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.markdown-body ul > li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.markdown-spinner {
|
||||
margin: auto;
|
||||
background-image: url(images/octocat-spinner-128.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 64px;
|
||||
background-position: top center;
|
||||
padding-top: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* this code below was copied from https://github.com/assets/stylesheets/primer/components/markdown.css */
|
||||
/* we really need to get primer in here somehow. */
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden; }
|
||||
.markdown-body > *:first-child {
|
||||
margin-top: 0 !important; }
|
||||
.markdown-body > *:last-child {
|
||||
margin-bottom: 0 !important; }
|
||||
.markdown-body a.absent {
|
||||
color: #c00; }
|
||||
.markdown-body a.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0; }
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative; }
|
||||
.markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
|
||||
display: none;
|
||||
color: #000; }
|
||||
.markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
padding-left: 0;
|
||||
margin-left: -22px;
|
||||
top: 15%; }
|
||||
.markdown-body h1:hover a.anchor .mini-icon-link, .markdown-body h2:hover a.anchor .mini-icon-link, .markdown-body h3:hover a.anchor .mini-icon-link, .markdown-body h4:hover a.anchor .mini-icon-link, .markdown-body h5:hover a.anchor .mini-icon-link, .markdown-body h6:hover a.anchor .mini-icon-link {
|
||||
display: inline-block; }
|
||||
.markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
|
||||
font-size: inherit; }
|
||||
.markdown-body h1 {
|
||||
font-size: 28px;
|
||||
color: #000; }
|
||||
.markdown-body h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #000; }
|
||||
.markdown-body h3 {
|
||||
font-size: 18px; }
|
||||
.markdown-body h4 {
|
||||
font-size: 16px; }
|
||||
.markdown-body h5 {
|
||||
font-size: 14px; }
|
||||
.markdown-body h6 {
|
||||
color: #777;
|
||||
font-size: 14px; }
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul, .markdown-body ol, .markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre {
|
||||
margin: 15px 0; }
|
||||
.markdown-body hr {
|
||||
background: transparent url("https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-0e7d81b119cc9beae17b0c98093d121fa0050a74.png") repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #ccc;
|
||||
height: 4px;
|
||||
padding: 0; }
|
||||
.markdown-body > h2:first-child, .markdown-body > h1:first-child, .markdown-body > h1:first-child + h2, .markdown-body > h3:first-child, .markdown-body > h4:first-child, .markdown-body > h5:first-child, .markdown-body > h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0; }
|
||||
.markdown-body a:first-child h1, .markdown-body a:first-child h2, .markdown-body a:first-child h3, .markdown-body a:first-child h4, .markdown-body a:first-child h5, .markdown-body a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0; }
|
||||
.markdown-body h1 + p,
|
||||
.markdown-body h2 + p,
|
||||
.markdown-body h3 + p,
|
||||
.markdown-body h4 + p,
|
||||
.markdown-body h5 + p,
|
||||
.markdown-body h6 + p {
|
||||
margin-top: 0; }
|
||||
.markdown-body li p.first {
|
||||
display: inline-block; }
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
padding-left: 30px; }
|
||||
.markdown-body ul.no-list, .markdown-body ol.no-list {
|
||||
list-style-type: none;
|
||||
padding: 0; }
|
||||
.markdown-body ul li > :first-child,
|
||||
.markdown-body ul li ul:first-of-type, .markdown-body ol li > :first-child,
|
||||
.markdown-body ol li ul:first-of-type {
|
||||
margin-top: 0px; }
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-bottom: 0; }
|
||||
.markdown-body dl {
|
||||
padding: 0; }
|
||||
.markdown-body dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px; }
|
||||
.markdown-body dl dt:first-child {
|
||||
padding: 0; }
|
||||
.markdown-body dl dt > :first-child {
|
||||
margin-top: 0px; }
|
||||
.markdown-body dl dt > :last-child {
|
||||
margin-bottom: 0px; }
|
||||
.markdown-body dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px; }
|
||||
.markdown-body dl dd > :first-child {
|
||||
margin-top: 0px; }
|
||||
.markdown-body dl dd > :last-child {
|
||||
margin-bottom: 0px; }
|
||||
.markdown-body blockquote {
|
||||
border-left: 4px solid #DDD;
|
||||
padding: 0 15px;
|
||||
color: #777; }
|
||||
.markdown-body blockquote > :first-child {
|
||||
margin-top: 0px; }
|
||||
.markdown-body blockquote > :last-child {
|
||||
margin-bottom: 0px; }
|
||||
.markdown-body table th {
|
||||
font-weight: bold; }
|
||||
.markdown-body table th, .markdown-body table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 13px; }
|
||||
.markdown-body table tr {
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #fff; }
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8; }
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.markdown-body span.frame {
|
||||
display: block;
|
||||
overflow: hidden; }
|
||||
.markdown-body span.frame > span {
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto; }
|
||||
.markdown-body span.frame span img {
|
||||
display: block;
|
||||
float: left; }
|
||||
.markdown-body span.frame span span {
|
||||
clear: both;
|
||||
color: #333;
|
||||
display: block;
|
||||
padding: 5px 0 0; }
|
||||
.markdown-body span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both; }
|
||||
.markdown-body span.align-center > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center; }
|
||||
.markdown-body span.align-center span img {
|
||||
margin: 0 auto;
|
||||
text-align: center; }
|
||||
.markdown-body span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both; }
|
||||
.markdown-body span.align-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right; }
|
||||
.markdown-body span.align-right span img {
|
||||
margin: 0;
|
||||
text-align: right; }
|
||||
.markdown-body span.float-left {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left; }
|
||||
.markdown-body span.float-left span {
|
||||
margin: 13px 0 0; }
|
||||
.markdown-body span.float-right {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right; }
|
||||
.markdown-body span.float-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right; }
|
||||
.markdown-body code, .markdown-body tt {
|
||||
margin: 0 2px;
|
||||
padding: 0px 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px; }
|
||||
.markdown-body code {
|
||||
white-space: nowrap; }
|
||||
.markdown-body pre > code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent; }
|
||||
.markdown-body .highlight pre, .markdown-body pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px; }
|
||||
.markdown-body pre code, .markdown-body pre tt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none; }
|
||||
|
||||
/* this code was copied from https://github.com/assets/stylesheets/primer/components/pygments.css */
|
||||
/* the .markdown-body class was then added to all rules */
|
||||
.markdown-body .highlight {
|
||||
background: #ffffff; }
|
||||
.markdown-body .highlight .c {
|
||||
color: #999988;
|
||||
font-style: italic; }
|
||||
.markdown-body .highlight .err {
|
||||
color: #a61717;
|
||||
background-color: #e3d2d2; }
|
||||
.markdown-body .highlight .k {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .o {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .cm {
|
||||
color: #999988;
|
||||
font-style: italic; }
|
||||
.markdown-body .highlight .cp {
|
||||
color: #999999;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .c1 {
|
||||
color: #999988;
|
||||
font-style: italic; }
|
||||
.markdown-body .highlight .cs {
|
||||
color: #999999;
|
||||
font-weight: bold;
|
||||
font-style: italic; }
|
||||
.markdown-body .highlight .gd {
|
||||
color: #000000;
|
||||
background-color: #ffdddd; }
|
||||
.markdown-body .highlight .gd .x {
|
||||
color: #000000;
|
||||
background-color: #ffaaaa; }
|
||||
.markdown-body .highlight .ge {
|
||||
font-style: italic; }
|
||||
.markdown-body .highlight .gr {
|
||||
color: #aa0000; }
|
||||
.markdown-body .highlight .gh {
|
||||
color: #999999; }
|
||||
.markdown-body .highlight .gi {
|
||||
color: #000000;
|
||||
background-color: #ddffdd; }
|
||||
.markdown-body .highlight .gi .x {
|
||||
color: #000000;
|
||||
background-color: #aaffaa; }
|
||||
.markdown-body .highlight .go {
|
||||
color: #888888; }
|
||||
.markdown-body .highlight .gp {
|
||||
color: #555555; }
|
||||
.markdown-body .highlight .gs {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .gu {
|
||||
color: #800080;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .gt {
|
||||
color: #aa0000; }
|
||||
.markdown-body .highlight .kc {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .kd {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .kn {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .kp {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .kr {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .kt {
|
||||
color: #445588;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .m {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .s {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .na {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .nb {
|
||||
color: #0086B3; }
|
||||
.markdown-body .highlight .nc {
|
||||
color: #445588;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .no {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .ni {
|
||||
color: #800080; }
|
||||
.markdown-body .highlight .ne {
|
||||
color: #990000;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .nf {
|
||||
color: #990000;
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .nn {
|
||||
color: #555555; }
|
||||
.markdown-body .highlight .nt {
|
||||
color: #000080; }
|
||||
.markdown-body .highlight .nv {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .ow {
|
||||
font-weight: bold; }
|
||||
.markdown-body .highlight .w {
|
||||
color: #bbbbbb; }
|
||||
.markdown-body .highlight .mf {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .mh {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .mi {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .mo {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .sb {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .sc {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .sd {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .s2 {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .se {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .sh {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .si {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .sx {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .sr {
|
||||
color: #009926; }
|
||||
.markdown-body .highlight .s1 {
|
||||
color: #d14; }
|
||||
.markdown-body .highlight .ss {
|
||||
color: #990073; }
|
||||
.markdown-body .highlight .bp {
|
||||
color: #999999; }
|
||||
.markdown-body .highlight .vc {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .vg {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .vi {
|
||||
color: #008080; }
|
||||
.markdown-body .highlight .il {
|
||||
color: #009999; }
|
||||
.markdown-body .highlight .gc {
|
||||
color: #999;
|
||||
background-color: #EAF2F5; }
|
||||
|
||||
.type-csharp .markdown-body .highlight .k {
|
||||
color: #0000FF; }
|
||||
.type-csharp .markdown-body .highlight .kt {
|
||||
color: #0000FF; }
|
||||
.type-csharp .markdown-body .highlight .nf {
|
||||
color: #000000;
|
||||
font-weight: normal; }
|
||||
.type-csharp .markdown-body .highlight .nc {
|
||||
color: #2B91AF; }
|
||||
.type-csharp .markdown-body .highlight .nn {
|
||||
color: #000000; }
|
||||
.type-csharp .markdown-body .highlight .s {
|
||||
color: #A31515; }
|
||||
.type-csharp .markdown-body .highlight .sc {
|
||||
color: #A31515; }
|
||||
385
src/packages/markdown-preview/stylesheets/markdown-preview.less
Normal file
385
src/packages/markdown-preview/stylesheets/markdown-preview.less
Normal file
@@ -0,0 +1,385 @@
|
||||
.markdown-preview {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
// This is styling for generic markdownized text. Anything you put in a
|
||||
// container with .markdown-body on it should render generally well. It also
|
||||
// includes some GitHub Flavored Markdown specific styling (like @mentions)
|
||||
.markdown-body {
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
|
||||
& > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Link Colors
|
||||
a.absent {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
a.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
|
||||
.mini-icon-link {
|
||||
display: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover a.anchor {
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
padding-left: 0;
|
||||
margin-left: -22px;
|
||||
top: 15%;
|
||||
|
||||
.mini-icon-link {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
tt, code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul, ol, dl,
|
||||
table,
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
color: #ccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > h2:first-child,
|
||||
& > h1:first-child,
|
||||
& > h1:first-child + h2,
|
||||
& > h3:first-child,
|
||||
& > h4:first-child,
|
||||
& > h5:first-child,
|
||||
& > h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// fixes margin on shit like:
|
||||
// <a name='the-heading'>
|
||||
// <h1>The Heading</h1></a>
|
||||
a:first-child {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 + p,
|
||||
h2 + p,
|
||||
h3 + p,
|
||||
h4 + p,
|
||||
h5 + p,
|
||||
h6 + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// ReST first graf in nested list
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Lists, Blockquotes & Such
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
|
||||
&.no-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li > :first-child,
|
||||
li ul:first-of-type {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
|
||||
&:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
& > :first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
& > :first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #DDD;
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
table {
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Images & Stuff
|
||||
img {
|
||||
max-width: 100%;
|
||||
@include box-sizing();
|
||||
}
|
||||
|
||||
// Gollum Image Tags
|
||||
|
||||
// Framed
|
||||
span.frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
& > span {
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
span img {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span span {
|
||||
clear: both;
|
||||
color: #333;
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span img {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span img {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
span.float-left {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
|
||||
span {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.float-right {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline code snippets
|
||||
code, tt {
|
||||
margin: 0 2px;
|
||||
padding: 0px 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
code { white-space: nowrap; }
|
||||
|
||||
// Code tags within code blocks (<pre>s)
|
||||
pre > code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.highlight pre, pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
pre code, pre tt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
201
src/packages/markdown-preview/stylesheets/pygments.less
Normal file
201
src/packages/markdown-preview/stylesheets/pygments.less
Normal file
@@ -0,0 +1,201 @@
|
||||
.highlight {
|
||||
background: #ffffff;
|
||||
|
||||
// Comment
|
||||
.c { color: #999988; font-style: italic }
|
||||
|
||||
// Error
|
||||
.err { color: #a61717; background-color: #e3d2d2 }
|
||||
|
||||
// Keyword
|
||||
.k { font-weight: bold }
|
||||
|
||||
// Operator
|
||||
.o { font-weight: bold }
|
||||
|
||||
// Comment.Multiline
|
||||
.cm { color: #999988; font-style: italic }
|
||||
|
||||
// Comment.Preproc
|
||||
.cp { color: #999999; font-weight: bold }
|
||||
|
||||
// Comment.Single
|
||||
.c1 { color: #999988; font-style: italic }
|
||||
|
||||
// Comment.Special
|
||||
.cs { color: #999999; font-weight: bold; font-style: italic }
|
||||
|
||||
// Generic.Deleted
|
||||
.gd { color: #000000; background-color: #ffdddd }
|
||||
|
||||
// Generic.Deleted.Specific
|
||||
.gd .x { color: #000000; background-color: #ffaaaa }
|
||||
|
||||
// Generic.Emph
|
||||
.ge { font-style: italic }
|
||||
|
||||
// Generic.Error
|
||||
.gr { color: #aa0000 }
|
||||
|
||||
// Generic.Heading
|
||||
.gh { color: #999999 }
|
||||
|
||||
// Generic.Inserted
|
||||
.gi { color: #000000; background-color: #ddffdd }
|
||||
|
||||
// Generic.Inserted.Specific
|
||||
.gi .x { color: #000000; background-color: #aaffaa }
|
||||
|
||||
// Generic.Output
|
||||
.go { color: #888888 }
|
||||
|
||||
// Generic.Prompt
|
||||
.gp { color: #555555 }
|
||||
|
||||
// Generic.Strong
|
||||
.gs { font-weight: bold }
|
||||
|
||||
// Generic.Subheading
|
||||
.gu { color: #800080; font-weight: bold; }
|
||||
|
||||
// Generic.Traceback
|
||||
.gt { color: #aa0000 }
|
||||
|
||||
// Keyword.Constant
|
||||
.kc { font-weight: bold }
|
||||
|
||||
// Keyword.Declaration
|
||||
.kd { font-weight: bold }
|
||||
|
||||
// Keyword.Namespace
|
||||
.kn { font-weight: bold }
|
||||
|
||||
// Keyword.Pseudo
|
||||
.kp { font-weight: bold }
|
||||
|
||||
// Keyword.Reserved
|
||||
.kr { font-weight: bold }
|
||||
|
||||
// Keyword.Type
|
||||
.kt { color: #445588; font-weight: bold }
|
||||
|
||||
// Literal.Number
|
||||
.m { color: #009999 }
|
||||
|
||||
// Literal.String
|
||||
.s { color: #d14 }
|
||||
|
||||
// Name
|
||||
.n { color: #333333 }
|
||||
|
||||
// Name.Attribute
|
||||
.na { color: #008080 }
|
||||
|
||||
// Name.Builtin
|
||||
.nb { color: #0086B3 }
|
||||
|
||||
// Name.Class
|
||||
.nc { color: #445588; font-weight: bold }
|
||||
|
||||
// Name.Constant
|
||||
.no { color: #008080 }
|
||||
|
||||
// Name.Entity
|
||||
.ni { color: #800080 }
|
||||
|
||||
// Name.Exception
|
||||
.ne { color: #990000; font-weight: bold }
|
||||
|
||||
// Name.Function
|
||||
.nf { color: #990000; font-weight: bold }
|
||||
|
||||
// Name.Namespace
|
||||
.nn { color: #555555 }
|
||||
|
||||
// Name.Tag
|
||||
.nt { color: #000080 }
|
||||
|
||||
// Name.Variable
|
||||
.nv { color: #008080 }
|
||||
|
||||
// Operator.Word
|
||||
.ow { font-weight: bold }
|
||||
|
||||
// Text.Whitespace
|
||||
.w { color: #bbbbbb }
|
||||
|
||||
// Literal.Number.Float
|
||||
.mf { color: #009999 }
|
||||
|
||||
// Literal.Number.Hex
|
||||
.mh { color: #009999 }
|
||||
|
||||
// Literal.Number.Integer
|
||||
.mi { color: #009999 }
|
||||
|
||||
// Literal.Number.Oct
|
||||
.mo { color: #009999 }
|
||||
|
||||
// Literal.String.Backtick
|
||||
.sb { color: #d14 }
|
||||
|
||||
// Literal.String.Char
|
||||
.sc { color: #d14 }
|
||||
|
||||
// Literal.String.Doc
|
||||
.sd { color: #d14 }
|
||||
|
||||
// Literal.String.Double
|
||||
.s2 { color: #d14 }
|
||||
|
||||
// Literal.String.Escape
|
||||
.se { color: #d14 }
|
||||
|
||||
// Literal.String.Heredoc
|
||||
.sh { color: #d14 }
|
||||
|
||||
// Literal.String.Interpol
|
||||
.si { color: #d14 }
|
||||
|
||||
// Literal.String.Other
|
||||
.sx { color: #d14 }
|
||||
|
||||
// Literal.String.Regex
|
||||
.sr { color: #009926 }
|
||||
|
||||
// Literal.String.Single
|
||||
.s1 { color: #d14 }
|
||||
|
||||
// Literal.String.Symbol
|
||||
.ss { color: #990073 }
|
||||
|
||||
// Name.Builtin.Pseudo
|
||||
.bp { color: #999999 }
|
||||
|
||||
// Name.Variable.Class
|
||||
.vc { color: #008080 }
|
||||
|
||||
// Name.Variable.Global
|
||||
.vg { color: #008080 }
|
||||
|
||||
// Name.Variable.Instance
|
||||
.vi { color: #008080 }
|
||||
|
||||
// Literal.Number.Integer.Long
|
||||
.il { color: #009999 }
|
||||
|
||||
.gc {
|
||||
color: #999;
|
||||
background-color: #EAF2F5;
|
||||
}
|
||||
}
|
||||
|
||||
.type-csharp .highlight {
|
||||
.k { color: #0000FF }
|
||||
.kt { color: #0000FF }
|
||||
.nf { color: #000000; font-weight: normal }
|
||||
.nc { color: #2B91AF }
|
||||
.nn { color: #000000 }
|
||||
.s { color: #A31515 }
|
||||
.sc { color: #A31515 }
|
||||
}
|
||||
Reference in New Issue
Block a user