Skip to content

Commit 94b541a

Browse files
chore(docs): add code prettification
Closes angular#285
1 parent 83a6a1c commit 94b541a

6 files changed

Lines changed: 164 additions & 41 deletions

File tree

docs/app/css/app.css

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -39,45 +39,6 @@ pre {
3939
word-wrap: break-word;
4040
}
4141

42-
pre > code.highlight {
43-
padding: 10px;
44-
font-weight: 400;
45-
-webkit-user-select: initial;
46-
-moz-user-select: initial;
47-
-ms-user-select: initial;
48-
user-select: initial;
49-
}
50-
51-
pre, code {
52-
53-
margin: 0;
54-
padding: 0;
55-
overflow-wrap: break-word;
56-
font-family: monospace, serif;
57-
}
58-
59-
60-
pre > code.highlight {
61-
padding: 10px;
62-
font-weight: 400;
63-
}
64-
65-
code {
66-
font-size: 14px;
67-
background: #f6f6f6;
68-
}
69-
70-
code.highlight {
71-
display: block;
72-
overflow-wrap: break-word;
73-
}
74-
75-
code:not(.highlight) {
76-
color: #4285f4;
77-
margin-left: 1px;
78-
margin-right: 1px;
79-
}
80-
8142
.md-sidenav-inner {
8243
background: #fff;
8344
}

docs/app/css/prettify-theme.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* GitHub Theme */
2+
.prettyprint {
3+
background: white;
4+
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
5+
font-size: 12px;
6+
line-height: 1.5;
7+
}
8+
9+
.lang-text * {
10+
color: #333333!important;
11+
}
12+
13+
.pln {
14+
color: #333333;
15+
}
16+
17+
@media screen {
18+
.str {
19+
color: #dd1144;
20+
}
21+
22+
.kwd {
23+
color: #333333;
24+
}
25+
26+
.com {
27+
color: #999988;
28+
}
29+
30+
.typ {
31+
color: #445588;
32+
}
33+
34+
.lit {
35+
color: #445588;
36+
}
37+
38+
.pun {
39+
color: #333333;
40+
}
41+
42+
.opn {
43+
color: #333333;
44+
}
45+
46+
.clo {
47+
color: #333333;
48+
}
49+
50+
.tag {
51+
color: navy;
52+
}
53+
54+
.atn {
55+
color: teal;
56+
}
57+
58+
.atv {
59+
color: #dd1144;
60+
}
61+
62+
.dec {
63+
color: #333333;
64+
}
65+
66+
.var {
67+
color: teal;
68+
}
69+
70+
.fun {
71+
color: #990000;
72+
}
73+
}
74+
@media print, projection {
75+
.str {
76+
color: #006600;
77+
}
78+
79+
.kwd {
80+
color: #006;
81+
font-weight: bold;
82+
}
83+
84+
.com {
85+
color: #600;
86+
font-style: italic;
87+
}
88+
89+
.typ {
90+
color: #404;
91+
font-weight: bold;
92+
}
93+
94+
.lit {
95+
color: #004444;
96+
}
97+
98+
.pun, .opn, .clo {
99+
color: #444400;
100+
}
101+
102+
.tag {
103+
color: #006;
104+
font-weight: bold;
105+
}
106+
107+
.atn {
108+
color: #440044;
109+
}
110+
111+
.atv {
112+
color: #006600;
113+
}
114+
}
115+
/* Specify class=linenums on a pre to get line numbering */
116+
ol.linenums {
117+
margin-top: 0;
118+
margin-bottom: 0;
119+
}
120+
121+
/* IE indents via margin-left */
122+
li.L0,
123+
li.L1,
124+
li.L2,
125+
li.L3,
126+
li.L4,
127+
li.L5,
128+
li.L6,
129+
li.L7,
130+
li.L8,
131+
li.L9 {
132+
/* */
133+
}
134+
135+
/* Alternate shading for lines */
136+
li.L1,
137+
li.L3,
138+
li.L5,
139+
li.L7,
140+
li.L9 {
141+
/* */
142+
}

docs/app/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,20 @@
55
<base href="/">
66

77
<link rel="stylesheet" type="text/css" href="/lib/angular-material/angular-material.css">
8+
<link rel="stylesheet" type="text/css" href="/css/prettify-theme.css">
89
<link rel="stylesheet" type="text/css" href="/css/app.css">
910

1011
<script src="/lib/hammerjs/hammer.js"></script>
12+
<script src="/lib/google-code-prettify/src/prettify.js"></script>
13+
<script src="/lib/google-code-prettify/src/lang-css.js"></script>
1114
<script src="/lib/angular/angular.js"></script>
1215
<script src="/lib/angular-animate/angular-animate.js"></script>
1316
<script src="/lib/angular-aria/angular-aria.js"></script>
1417
<script src="/lib/angular-material/angular-material.js"></script>
1518
<script src="/js/navigation-modules.js"></script>
1619
<script src="/js/navigation-guides.js"></script>
1720
<script src="/js/app.js"></script>
21+
<script src="/js/code.js"></script>
1822
</head>
1923
<body ng-app="app" ng-controller="NavController as nav" layout="column">
2024

docs/app/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('app', ['ngMaterial', 'navigation-modules', 'navigation-guides'])
1+
angular.module('app', ['ngMaterial', 'navigation-modules', 'navigation-guides', 'code'])
22

33
.config(function($locationProvider) {
44
$locationProvider.html5Mode(true);

docs/app/js/code.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
angular.module('code', [])
2+
3+
.directive('code', function() {
4+
return {
5+
restrict: 'E',
6+
terminal: true,
7+
compile: function(element) {
8+
var linenums = element.hasClass('linenum');// || element.parent()[0].nodeName === 'PRE';
9+
var match = /lang-(\S+)/.exec(element[0].className);
10+
var lang = match && match[1];
11+
var html = element.html();
12+
element.html(window.prettyPrintOne(html, lang, linenums));
13+
}
14+
};
15+
});

docs/bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"tests"
1515
],
1616
"dependencies": {
17-
"angular-material": "~0.6.0"
17+
"angular-material": "~0.6.0",
18+
"google-code-prettify": "~1.0.3"
1819
}
1920
}

0 commit comments

Comments
 (0)