honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(aio): re-color code pretty print 

closes #17246
This commit is contained in:
Ward Bell 2017-06-06 16:16:08 -07:00 committed by Alex Rickabaugh
parent f370fd36e0
commit 41a765d715
2 changed files with 62 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
aio/src/styles/2-modules/_api-list.scss
View File

@ -285,11 +285,6 @@ p {
cursor: pointer;
text-decoration: none;
// Override highlight.js
.kwd {
color: #1E88E5 !important;
}
&:hover {
text-decoration: underline;
}

172
aio/src/styles/2-modules/_code.scss
View File

@ -73,30 +73,16 @@ aio-code pre {
white-space: pre-wrap;
align-items: center;
code span, code ol li {
code span {
line-height: 24px;
}
}
code ol {
margin: 0;
font-family: $main-font;
color: $lightgray;
li {
margin: 0;
font-family: $code-font;
font-size: 90%;
}
}
.code-missing {
color: $darkred;
}
.prettyprint {
position: relative;
}
.copy-button {
display: inline-block;
@ -125,102 +111,6 @@ code ol {
transform: none;
}
/* SCREEN COLORS */
.pnk,
.blk {
border-radius: 4px;
padding: 2px 4px;
}
.pnk {
background: $blue-grey-50;
color: $blue-grey-900;
}
.blk {
background: $blue-grey-900;
}
.otl {
outline: 1px solid rgba($blue-grey-700, .56);
}
.kwd {
color: $darkgray;
}
.typ,
.tag {
color: $darkred;
}
.str,
.atv {
color: $blue;
}
.atn {
color: $blue;
}
.com {
color: $mediumgray;
}
.lit {
color: $blue;
}
.pun {
color: $blue-grey-700;
}
.pln {
color: $green-800;
}
.dec {
color: $blue;
}
/* SHELL / TERMINAL CODE BLOCKS */
code-example.code-shell, code-example[language=sh], code-example[language=bash] {
& .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
color: $codegreen;
}
}
/* PRINT COLORS */
@media print {
border: none;
box-shadow: none;
ol {
background: $white;
}
.kwd {
color: $darkgray;
}
.typ,
.tag {
color: $darkred;
}
.str,
.atv {
color: $blue;
}
.atn {
color: $blue;
}
.com {
color: $mediumgray;
}
.lit {
color: $blue;
}
.pun {
color: $blue-grey-700;
}
.pln {
color: $green-800;
}
.dec {
color: $blue;
}
}
// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-body-content {
@ -235,3 +125,63 @@ code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-bo
color: inherit;
font-size: inherit;
}
/* PRETTY PRINTING STYLES for prettify.js. */
.prettyprint {
position: relative;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0;
font-family: $main-font;
color: #B3B6B7;
li {
margin: 0;
font-family: $code-font;
font-size: 90%;
line-height: 24px;
}
}
/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 } /* plain text */
@media screen {
.str { color: #800 } /* string content */
.kwd { color: #00f } /* a keyword */
.com { color: #060 } /* a comment */
.typ { color: red } /* a type name */
.lit { color: #08c } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #660 }
.tag { color: #008 } /* a markup tag name */
.atn { color: #606 } /* a markup attribute name */
.atv { color: #800 } /* a markup attribute value */
.dec, .var { color: #606 } /* a declaration; a variable name */
.fun { color: red } /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
.str { color: #060 }
.kwd { color: #006; font-weight: bold }
.com { color: #600; font-style: italic }
.typ { color: #404; font-weight: bold }
.lit { color: #044 }
.pun, .opn, .clo { color: #440 }
.tag { color: #006; font-weight: bold }
.atn { color: #404 }
.atv { color: #060 }
}
/* SHELL / TERMINAL CODE BLOCKS */
code-example.code-shell, code-example[language=sh], code-example[language=bash] {
& .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
color: $codegreen;
}
}