Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Styling

  • Loading branch information...
commit 7cdcc731139c4fe918420c99f733499bfdbc5d91 1 parent 07a7277
@tj authored
View
5 Makefile
@@ -10,7 +10,8 @@ uninstall:
rm -fr ~/.node_libraries/dox
examples: uninstall install
- dox --title "Dox Example" --desc "This is an example using _dox_, how **cool!**" \
- examples/*.js > examples/index.html && open examples/index.html
+ dox --title "Dox Example" \
+ --desc "This is an example using _dox_, how **cool!**" \
+ examples/*.js > examples/index.html
.PHONY: install uninstall examples
View
20 examples/foo.js
@@ -21,16 +21,16 @@ var files = ['foo.js', 'bar.js'];
/**
* Output contents of _foo.js_ and _bar.js_.
*
- * # h1
- * ## h2
- * ### h3
- *
- * ## WTF:
+ * ## Stuff:
*
* This is just a stupid random demo, so... here is a list:
*
- * - foo.js
- * - bar.js
+ * - a
+ * * b
+ * * c
+ * - d
+ * - e
+ * - f
*
* ## Examples:
*
@@ -38,6 +38,10 @@ var files = ['foo.js', 'bar.js'];
*
* Just a [link](http://github.com/visionmedia/dox) to dox's _source_.
*
+ * ## HTML
+ *
+ * Is escaped, <script>alert("mwahaha")</script> for example :).
+ *
* @param {String} nothing a string that does nothing
* @return {Object} exports for chaining
* @api public
@@ -46,9 +50,11 @@ var files = ['foo.js', 'bar.js'];
var output = exports.output = function(nothing){
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
+ // Just some stupid comment
if (file.match(/\.js$/)) {
fs.readFile(file, function(err, str){
if (err) {
+ // lalalalala
throw err;
} else {
sys.puts(str);
View
94 examples/index.html
@@ -15,7 +15,7 @@
text-decoration: underline;
color: #19469D;
}
-h1 {
+h1, h2, h3 {
margin: 0;
padding: 0;
}
@@ -78,6 +78,7 @@
table#source tr.filename {
padding-top: 40px;
border-top: 1px solid #E5E5EE;
+ text-transform: capitalize;
}
table#source tr.filename td:last-child {
font-size: 12px;
@@ -86,6 +87,27 @@
margin: 0;
padding: 0;
}
+table#source tr.code h1,
+table#source tr.code h2,
+table#source tr.code h3 {
+ margin-top: 30px;
+ font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
+ font-size: 18px;
+}
+table#source tr.code h2 {
+ font-size: 16px;
+}
+table#source tr.code h3 {
+ font-size: 14px;
+}
+table#source tr.code ul {
+ margin: 5px 0 5px 35px;
+ padding: 0;
+}
+table#source tr.code ul li {
+ margin: 0;
+ padding: 2px 0;
+}
code .string { color: #219161; }
code .regexp { color: #219161; }
code .keyword { color: #954121; }
@@ -96,21 +118,24 @@
</head>
<body>
<ul id="menu"><li><a href="#examples/bar.js">examples/<strong>bar</strong></a></li>
-<li><a href="#examples/foo.js">examples/<strong>foo</strong></a></li></ul><table id="source"><tbody><tr><td><h1>Dox Example</h1>This is an example using _dox_, how **cool!**</td><td></td></tr><tr class="filename"><td><h2 id="examples/bar.js">bar</h2></td><td>examples/bar.js</td></tr><tr>
+<li><a href="#examples/foo.js">examples/<strong>foo</strong></a></li></ul><table id="source"><tbody><tr><td><h1>Dox Example</h1>This is an example using _dox_, how **cool!**</td><td></td></tr><tr class="filename"><td><h2 id="examples/bar.js">bar</h2></td><td>examples/bar.js</td></tr><tr class="code">
<td class="docs">
-<pre><p>Module dependencies.</p></pre>
+<p>Module dependencies.</p>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="variable">sys</span> = <span class="variable">require</span>(<span class="string">'sys'</span>);</code></pre>
</td>
</tr>
-<tr>
+<tr class="code">
<td class="docs">
-<pre><p>Output <em>foo</em> and <em>bar</em>, seperated by <code>+</code>.</p>
+<p>Output <em>foo</em> and <em>bar</em>, seperated by <code>+</code>.</p>
+
+<ul>
+<li><strong>param</strong>: <em>String</em> foo</li>
+<li><strong>param</strong>: <em>String</em> bar</li>
+<li><strong>api</strong>: <em>public</em></li>
+</ul>
-<p><strong>param</strong>: <em>String</em> foo
-<strong>param</strong>: <em>String</em> bar
-<strong>api</strong>: <em>public</em></p></pre>
</td>
<td class="code">
<pre><code><span class="keyword">function</span> <span class="variable">bar</span>(<span class="variable">foo</span>, <span class="variable">bar</span>){
@@ -118,47 +143,53 @@
}</code></pre>
</td>
</tr>
-<tr>
+<tr class="code">
<td class="docs">
-<pre><p>Export bar().</p></pre>
+<p>Export bar().</p>
</td>
<td class="code">
<pre><code><span class="variable">exports</span>.<span class="variable">bar</span> = <span class="variable">bar</span>;</code></pre>
</td>
-</tr><tr class="filename"><td><h2 id="examples/foo.js">foo</h2></td><td>examples/foo.js</td></tr><tr>
+</tr><tr class="filename"><td><h2 id="examples/foo.js">foo</h2></td><td>examples/foo.js</td></tr><tr class="code">
<td class="docs">
-<pre><p>Module dependencies.</p></pre>
+<p>Module dependencies.</p>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="variable">sys</span> = <span class="variable">require</span>(<span class="string">'sys'</span>),
<span class="variable">fs</span> = <span class="variable">require</span>(<span class="string">'fs'</span>);</code></pre>
</td>
</tr>
-<tr>
+<tr class="code">
<td class="docs">
-<pre><p>Files used by exports.output();</p></pre>
+<p>Files used by exports.output();</p>
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="variable">files</span> = [<span class="string">'foo.js'</span>, <span class="string">'bar.js'</span>];</code></pre>
</td>
</tr>
-<tr>
+<tr class="code">
<td class="docs">
-<pre><p>Output contents of <em>foo.js</em> and <em>bar.js</em>.</p>
-
-<h1>h1</h1>
+<p>Output contents of <em>foo.js</em> and <em>bar.js</em>.</p>
-<h2>h2</h2>
+<h2>Stuff:</h2>
-<h3>h3</h3>
+<p>This is just a stupid random demo, so&hellip; here is a list:</p>
-<h2>WTF:</h2>
+<ul>
+<li>a
-<p>This is just a stupid random demo, so&hellip; here is a list:</p>
+<ul>
+<li>b</li>
+<li>c
<ul>
-<li>foo.js</li>
-<li>bar.js</li>
+<li>d</li>
+<li>e</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>f</li>
</ul>
@@ -168,17 +199,26 @@
<p>Just a <a href="http://github.com/visionmedia/dox">link</a> to dox&rsquo;s <em>source</em>.</p>
-<p><strong>param</strong>: <em>String</em> nothing a string that does nothing
-<strong>return</strong>: <em>Object</em> exports for chaining
-<strong>api</strong>: <em>public</em></p>
+<h2>HTML</h2>
+
+<p>Is escaped, <script>alert(&ldquo;mwahaha&rdquo;)</script> for example :).</p>
+
+<ul>
+<li><strong>param</strong>: <em>String</em> nothing a string that does nothing</li>
+<li><strong>return</strong>: <em>Object</em> exports for chaining</li>
+<li><strong>api</strong>: <em>public</em></li>
+</ul>
+
</td>
<td class="code">
<pre><code><span class="keyword">var</span> <span class="variable">output</span> = <span class="variable">exports</span>.<span class="variable">output</span> = <span class="keyword">function</span>(<span class="variable">nothing</span>){
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>, <span class="variable">len</span> = <span class="variable">files</span>.<span class="variable">length</span>; <span class="variable">i</span> < <span class="variable">len</span>; ++<span class="variable">i</span>) {
<span class="keyword">var</span> <span class="variable">file</span> = <span class="variable">files</span>[<span class="variable">i</span>];
+ <span class="comment">// Just some stupid comment</span>
<span class="keyword">if</span> (<span class="variable">file</span>.<span class="variable">match</span>(<span class="regexp">/\.js$/</span>)) {
<span class="variable">fs</span>.<span class="variable">readFile</span>(<span class="variable">file</span>, <span class="keyword">function</span>(<span class="variable">err</span>, <span class="variable">str</span>){
<span class="keyword">if</span> (<span class="variable">err</span>) {
+ <span class="comment">// lalalalala</span>
<span class="keyword">throw</span> <span class="variable">err</span>;
} <span class="keyword">else</span> {
<span class="variable">sys</span>.<span class="variable">puts</span>(<span class="variable">str</span>);
View
10 lib/index.js
@@ -199,10 +199,8 @@ var render = exports.render = function(str){
var html = [];
for (var i = 0, len = blocks.length; i < len; ++i) {
var block = blocks[i];
- html.push('<tr>');
- html.push('<td class="docs">', block.comment
- ? '<pre>' + block.comment + '</pre>'
- : '', '</td>');
+ html.push('<tr class="code">');
+ html.push('<td class="docs">', block.comment || '', '</td>');
html.push('<td class="code">', block.code
? '<pre><code>' + block.code + '</code></pre>'
: '', '</td>');
@@ -223,7 +221,7 @@ var render = exports.render = function(str){
function jsdocToMarkdown(str) {
return str
.replace(/^ *@(\w+) *\{([^}]+)\}( *[^\n]+)?/gm, function(_, key, type, desc){
- return '**' + key + '**: _' + type.split(/ *[|\/] */).join(' | ') + '_ ' + desc;
+ return '- **' + key + '**: _' + type.split(/ *[|\/] */).join(' | ') + '_ ' + desc;
})
- .replace(/^ *@(\w+) *(\w+)/gm, '**$1**: _$2_');
+ .replace(/^ *@(\w+) *(\w+)/gm, '- **$1**: _$2_');
}
View
24 lib/styles/default/style.css
@@ -12,7 +12,7 @@ a:hover {
text-decoration: underline;
color: #19469D;
}
-h1 {
+h1, h2, h3 {
margin: 0;
padding: 0;
}
@@ -75,6 +75,7 @@ table#source tr {
table#source tr.filename {
padding-top: 40px;
border-top: 1px solid #E5E5EE;
+ text-transform: capitalize;
}
table#source tr.filename td:last-child {
font-size: 12px;
@@ -83,6 +84,27 @@ table#source tr.filename h2 {
margin: 0;
padding: 0;
}
+table#source tr.code h1,
+table#source tr.code h2,
+table#source tr.code h3 {
+ margin-top: 30px;
+ font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
+ font-size: 18px;
+}
+table#source tr.code h2 {
+ font-size: 16px;
+}
+table#source tr.code h3 {
+ font-size: 14px;
+}
+table#source tr.code ul {
+ margin: 5px 0 5px 35px;
+ padding: 0;
+}
+table#source tr.code ul li {
+ margin: 0;
+ padding: 2px 0;
+}
code .string { color: #219161; }
code .regexp { color: #219161; }
code .keyword { color: #954121; }
Please sign in to comment.
Something went wrong with that request. Please try again.