diff --git a/docs/app/css/app.css b/docs/app/css/app.css
index 3f34fde18d..2c2557140a 100644
--- a/docs/app/css/app.css
+++ b/docs/app/css/app.css
@@ -39,45 +39,6 @@ pre {
word-wrap: break-word;
}
-pre > code.highlight {
- padding: 10px;
- font-weight: 400;
- -webkit-user-select: initial;
- -moz-user-select: initial;
- -ms-user-select: initial;
- user-select: initial;
-}
-
-pre, code {
-
- margin: 0;
- padding: 0;
- overflow-wrap: break-word;
- font-family: monospace, serif;
-}
-
-
-pre > code.highlight {
- padding: 10px;
- font-weight: 400;
-}
-
-code {
- font-size: 14px;
- background: #f6f6f6;
-}
-
-code.highlight {
- display: block;
- overflow-wrap: break-word;
-}
-
-code:not(.highlight) {
- color: #4285f4;
- margin-left: 1px;
- margin-right: 1px;
-}
-
.md-sidenav-inner {
background: #fff;
}
diff --git a/docs/app/css/prettify-theme.css b/docs/app/css/prettify-theme.css
new file mode 100644
index 0000000000..7308e1ec71
--- /dev/null
+++ b/docs/app/css/prettify-theme.css
@@ -0,0 +1,142 @@
+/* GitHub Theme */
+.prettyprint {
+ background: white;
+ font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+ font-size: 12px;
+ line-height: 1.5;
+}
+
+.lang-text * {
+ color: #333333!important;
+}
+
+.pln {
+ color: #333333;
+}
+
+@media screen {
+ .str {
+ color: #dd1144;
+ }
+
+ .kwd {
+ color: #333333;
+ }
+
+ .com {
+ color: #999988;
+ }
+
+ .typ {
+ color: #445588;
+ }
+
+ .lit {
+ color: #445588;
+ }
+
+ .pun {
+ color: #333333;
+ }
+
+ .opn {
+ color: #333333;
+ }
+
+ .clo {
+ color: #333333;
+ }
+
+ .tag {
+ color: navy;
+ }
+
+ .atn {
+ color: teal;
+ }
+
+ .atv {
+ color: #dd1144;
+ }
+
+ .dec {
+ color: #333333;
+ }
+
+ .var {
+ color: teal;
+ }
+
+ .fun {
+ color: #990000;
+ }
+}
+@media print, projection {
+ .str {
+ color: #006600;
+ }
+
+ .kwd {
+ color: #006;
+ font-weight: bold;
+ }
+
+ .com {
+ color: #600;
+ font-style: italic;
+ }
+
+ .typ {
+ color: #404;
+ font-weight: bold;
+ }
+
+ .lit {
+ color: #004444;
+ }
+
+ .pun, .opn, .clo {
+ color: #444400;
+ }
+
+ .tag {
+ color: #006;
+ font-weight: bold;
+ }
+
+ .atn {
+ color: #440044;
+ }
+
+ .atv {
+ color: #006600;
+ }
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+ /* */
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+ /* */
+}
diff --git a/docs/app/index.html b/docs/app/index.html
index 0e1aa7e9df..9df6aa8ae3 100644
--- a/docs/app/index.html
+++ b/docs/app/index.html
@@ -5,9 +5,12 @@
+
+
+
@@ -15,6 +18,7 @@
+
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index c5dd7d3115..8e7d66b5b5 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -1,4 +1,4 @@
-angular.module('app', ['ngMaterial', 'navigation-modules', 'navigation-guides'])
+angular.module('app', ['ngMaterial', 'navigation-modules', 'navigation-guides', 'code'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
diff --git a/docs/app/js/code.js b/docs/app/js/code.js
new file mode 100644
index 0000000000..abca20e76d
--- /dev/null
+++ b/docs/app/js/code.js
@@ -0,0 +1,15 @@
+angular.module('code', [])
+
+.directive('code', function() {
+ return {
+ restrict: 'E',
+ terminal: true,
+ compile: function(element) {
+ var linenums = element.hasClass('linenum');// || element.parent()[0].nodeName === 'PRE';
+ var match = /lang-(\S+)/.exec(element[0].className);
+ var lang = match && match[1];
+ var html = element.html();
+ element.html(window.prettyPrintOne(html, lang, linenums));
+ }
+ };
+});
\ No newline at end of file
diff --git a/docs/bower.json b/docs/bower.json
index 0fc69be89f..86cf418b25 100644
--- a/docs/bower.json
+++ b/docs/bower.json
@@ -14,6 +14,7 @@
"tests"
],
"dependencies": {
- "angular-material": "~0.6.0"
+ "angular-material": "~0.6.0",
+ "google-code-prettify": "~1.0.3"
}
}