Skip to content

Commit 41ada30

Browse files
mdomdo
committed
tweaking prettify styles to introduce dark theme
1 parent d28f3d8 commit 41ada30

File tree

2 files changed

+104
-50
lines changed

2 files changed

+104
-50
lines changed

‎docs/assets/js/google-code-prettify/prettify.css

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,29 @@
66
.kwd, .tag { color: #195f91; }
77
.typ, .atn, .dec, .var { color: #CB4B16; }
88
.pln { color: #93a1a1; }
9-
pre.prettyprint {
10-
background: #fefbf3;
9+
.prettyprint {
10+
background-color: #fefbf3;
1111
padding: 9px;
1212
border: 1px solid rgba(0,0,0,.2);
1313
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
14-
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
15-
box-shadow: 0 1px 2px rgba(0,0,0,.1);
14+
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
15+
box-shadow: 0 1px 2px rgba(0,0,0,.1);
1616
}
1717

1818
/* Specify class=linenums on a pre to get line numbering */
19-
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
20-
ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; }
19+
.linenums {
20+
margin: 0 0 0 40px;
21+
}
22+
/* IE indents via margin-left */
23+
.linenums li {
24+
margin-left: -5px;
25+
padding: 0 5px;
26+
color: rgba(0,0,0,.15);
27+
line-height: 20px;
28+
-webkit-border-radius: 2px;
29+
-moz-border-radius: 2px;
30+
border-radius: 2px;
31+
}
2132
/* Alternate shading for lines */
2233
li.L1, li.L3, li.L5, li.L7, li.L9 { }
2334

@@ -38,4 +49,47 @@ $violet: #6c71c4;
3849
$blue: #268bd2;
3950
$cyan: #2aa198;
4051
$green: #859900;
41-
*/
52+
*/
53+
54+
55+
/*
56+
#1d1f21 Background
57+
#282a2e Current Line
58+
#373b41 Selection
59+
#c5c8c6 Foreground
60+
#969896 Comment
61+
#cc6666 Red
62+
#de935f Orange
63+
#f0c674 Yellow
64+
#b5bd68 Green
65+
#8abeb7 Aqua
66+
#81a2be Blue
67+
#b294bb Purple
68+
*/
69+
70+
71+
/* DARK THEME */
72+
/* ---------- */
73+
74+
.prettyprint-dark {
75+
background-color: #1d1f21;
76+
border: 0;
77+
padding: 10px;
78+
}
79+
.prettyprint-dark .linenums li {
80+
color: #444;
81+
}
82+
.prettyprint-dark .linenums li:hover {
83+
background-color: #282a2e;
84+
}
85+
/* tags in html */
86+
.prettyprint-dark .kwd,
87+
.prettyprint-dark .tag { color: #cc6666; }
88+
/* html attr */
89+
.prettyprint-dark .typ,
90+
.prettyprint-dark .atn,
91+
.prettyprint-dark .dec,
92+
.prettyprint-dark .var { color: #de935f; }
93+
/* html attr values */
94+
.prettyprint-dark .str,
95+
.prettyprint-dark .atv { color: #b5bd68; }

‎docs/index.html

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ <h2>Default grid</h2>
175175
<div class="span12">
176176
<h3>Example grid markup</h3>
177177
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
178-
<pre class="prettyprint linenums">
178+
<pre class="prettyprint prettyprint-dark linenums">
179179
&lt;div class="row"&gt;
180180
&lt;div class="span6"&gt;
181181
...
@@ -327,7 +327,7 @@ <h2>Roll your own grid</h2>
327327
<div class="span12">
328328
<h3>Inside the grid</h3>
329329
<p>The variables needed to modify the grid system currently all reside in <code>variables.less</code>.</p>
330-
<table class="zebra-striped">
330+
<table class="bordered-table zebra-striped">
331331
<thead>
332332
<tr>
333333
<th>Variable</th>
@@ -601,7 +601,7 @@ <h2>Code</h2>
601601
<div class="span12">
602602
<h3>Presenting code</h3>
603603
<p>Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <code>&lt;pre&gt;</code> element. For inline code, use the <code>&lt;code&gt;</code> element.</p>
604-
<table class="zebra-striped">
604+
<table class="bordered-table zebra-striped">
605605
<thead>
606606
<tr>
607607
<th style="width: 190px;">Element</th>
@@ -651,7 +651,7 @@ <h2>Inline labels</h2>
651651
<div class="span12">
652652
<h3>Label anything</h3>
653653
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
654-
<table class="zebra-striped">
654+
<table class="bordered-table zebra-striped">
655655
<thead>
656656
<tr>
657657
<th style="width: 50%;">Label</th>
@@ -903,7 +903,7 @@ <h3>Example: Bordered table</h3>
903903
&lt;/table&gt;</pre>
904904
<h3>Example: Zebra-striped</h3>
905905
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>
906-
<table class="zebra-striped">
906+
<table class="bordered-table zebra-striped">
907907
<thead>
908908
<tr>
909909
<th>#</th>
@@ -949,7 +949,7 @@ <h3>Example: Zebra-striped</h3>
949949
<p><strong>Note:</strong> Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.</p>
950950
<pre class="prettyprint linenums">
951951
&lt;table class="zebra-striped"&gt;
952-
...
952+
...
953953
&lt;/table&gt;</pre>
954954
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
955955
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
@@ -1763,43 +1763,43 @@ <h2>Getting started</h2>
17631763
<div class="span12">
17641764
<h3>What's included</h3>
17651765
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
1766-
<table class="zebra-striped">
1767-
<thead>
1768-
<tr>
1769-
<th style="width: 150px;">File</th>
1770-
<th>Description</th>
1771-
</tr>
1772-
</thead>
1773-
<tbody>
1774-
<tr>
1775-
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
1776-
<td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
1777-
</tr>
1778-
<tr>
1779-
<td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
1780-
<td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
1781-
</tr>
1782-
<tr>
1783-
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
1784-
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
1785-
</tr>
1786-
<tr>
1787-
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
1788-
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
1789-
</tr>
1790-
<tr>
1766+
<table class="bordered-table zebra-striped">
1767+
<thead>
1768+
<tr>
1769+
<th style="width: 150px;">File</th>
1770+
<th>Description</th>
1771+
</tr>
1772+
</thead>
1773+
<tbody>
1774+
<tr>
1775+
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td>
1776+
<td>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</td>
1777+
</tr>
1778+
<tr>
1779+
<td><a href="./javascript.html#alerts">bootstrap-alerts.js</a></td>
1780+
<td>The alert plugin is a super tiny class for adding close functionality to alerts.</td>
1781+
</tr>
1782+
<tr>
1783+
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
1784+
<td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
1785+
</tr>
1786+
<tr>
1787+
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
1788+
<td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
1789+
</tr>
1790+
<tr>
17911791
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
1792-
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
1793-
</tr>
1794-
<tr>
1795-
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
1796-
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
1797-
</tr>
1798-
<tr>
1799-
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
1800-
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
1801-
</tr>
1802-
</tbody>
1792+
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
1793+
</tr>
1794+
<tr>
1795+
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
1796+
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
1797+
</tr>
1798+
<tr>
1799+
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
1800+
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
1801+
</tr>
1802+
</tbody>
18031803
</table>
18041804
<h3>Is javascript necessary?</h3>
18051805
<p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
@@ -1922,7 +1922,7 @@ <h3>Operations</h3>
19221922
<h2>Compiling Less</h2>
19231923
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
19241924
<h3>Ways to compile</h3>
1925-
<table class="zebra-striped">
1925+
<table class="bordered-table zebra-striped">
19261926
<thead>
19271927
<tr>
19281928
<th style="width: 120px;">Method</th>

0 commit comments

Comments
 (0)