Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Markdown with code fencing and syntax highlighting.

  • Loading branch information...
commit 11e5391992a3dbedab9bf0f160c0d18c788ab2ca 1 parent 5fcc459
Assaf Arkin authored
Showing with 164 additions and 79 deletions.
  1. +95 −58 doc/new/README.md
  2. +25 −3 doc/new/zombie.css
  3. +7 −8 package.json
  4. +37 −10 scripts/docs
153 doc/new/README.md
View
@@ -1,5 +1,6 @@
# Zombie.js
+
## Browser
#### browser.assert
@@ -37,14 +38,16 @@ See [Tabs](#tabs) for detailed discussion.
### Extending The Browser
- Browser.extend(function(browser) {
- browser.on("console", function(level, message) {
- logger.log(message);
- });
- browser.on("log", function(level, message) {
- logger.log(message);
- });
- });
+```js
+Browser.extend(function(browser) {
+ browser.on("console", function(level, message) {
+ logger.log(message);
+ });
+ browser.on("log", function(level, message) {
+ logger.log(message);
+ });
+});
+```
@@ -143,9 +146,11 @@ To make life easier, Zombie introduces a set of convenience assertions that you
can access directly from the browser object. For example, to check that a page
loaded successfuly:
- browser.assert.success();
- browser.assert.text("title", "My Awesome Site");
- browser.assert.element("#main");
+```js
+browser.assert.success();
+browser.assert.text("title", "My Awesome Site");
+browser.assert.element("#main");
+```
These assertions are available from the `browser` object since they operate on a
particular browser instance -- generally dependent on the currently open window,
@@ -279,7 +284,9 @@ Asserts the current page loaded with the expected status code.
Asserts that selected element(s) have the expected value for the named style
property. For example:
- browser.assert.style(".navigation", "opacity", 0.5)
+```js
+browser.assert.style(".navigation", "opacity", 0.5)
+```
Fails if no element found.
@@ -287,7 +294,9 @@ Fails if no element found.
Asserts that selected element(s) have the expected text content. For example:
- browser.assert.text("title", "My Awesome Page")
+```js
+browser.assert.text("title", "My Awesome Page")
+```
Fails if no element found.
@@ -304,9 +313,11 @@ The expected URL can be one of:
For example:
- browser.assert.url("http://localhost/foo/bar")
- browser.assert.url({ pathame: "/foo/bar" });
- browser.assert.url({ query: { name: "joedoe" } });
+```js
+browser.assert.url("http://localhost/foo/bar")
+browser.assert.url({ pathame: "/foo/bar" });
+browser.assert.url({ query: { name: "joedoe" } });
+```
### Roll Your Own Assertions
@@ -316,19 +327,23 @@ prototype of `Browser.Assert`.
For example:
- // Asserts the browser has the expected number of open tabs.
- Browser.Assert.prototype.openTabs = function(expected, message) {
- assert.equal(this.browser.tabs.length, expected, message);
- };
+```js
+// Asserts the browser has the expected number of open tabs.
+Browser.Assert.prototype.openTabs = function(expected, message) {
+ assert.equal(this.browser.tabs.length, expected, message);
+};
+```
Or application specific:
- // Asserts which links is highlighted in the navigation bar
- Browser.Assert.navigationOn = function(linkText) {
- this.assert.element(".navigation-bar");
- this.assert.text(".navigation-bar a.highlighted", linkText);
- };
+```js
+// Asserts which links is highlighted in the navigation bar
+Browser.Assert.navigationOn = function(linkText) {
+ this.assert.element(".navigation-bar");
+ this.assert.text(".navigation-bar a.highlighted", linkText);
+};
+```
@@ -531,16 +546,20 @@ failing and delaying responses.
For example, to mock a response:
- browser.resources.mock("http://3rd.party.api/v1/request", {
- statusCode: 200,
- headers: { "ContentType": "application/json" },
- body: JSON.stringify({ "count": 5 })
- })
+```js
+browser.resources.mock("http://3rd.party.api/v1/request", {
+ statusCode: 200,
+ headers: { "ContentType": "application/json" },
+ body: JSON.stringify({ "count": 5 })
+})
+```
In the real world, servers and networks often fail. You can test to for these
conditions by asking Zombie to simulate a failure. For example:
- browser.resource.fail("http://3rd.party.api/v1/request");
+```js
+browser.resource.fail("http://3rd.party.api/v1/request");
+```
Another issue you'll encounter in real-life applications are network latencies.
When running tests, Zombie will request resources in the order in which they
@@ -551,7 +570,9 @@ Occassionally you'll need to force the server to return resources in a different
order, for example, to check what happens when script A loads after script B.
You can introduce a delay into any response as simple as:
- browser.resources.delay("http://3d.party.api/v1/request", 50);
+```js
+browser.resources.delay("http://3d.party.api/v1/request", 50);
+```
### The Pipeline
@@ -578,12 +599,14 @@ one of:
To add a new handle to the end of the pipeline:
- browser.resources.addHandler(function(request, next) {
- // Let's delay this request by 1/10th second
- setTimeout(function() {
- Resources.httpRequest(request, next);
- }, Math.random() * 100);
- });
+```js
+browser.resources.addHandler(function(request, next) {
+ // Let's delay this request by 1/10th second
+ setTimeout(function() {
+ Resources.httpRequest(request, next);
+ }, Math.random() * 100);
+});
+```
If you need anything more complicated, you can access the pipeline directly via
`browser.resources.pipeline`.
@@ -591,11 +614,13 @@ If you need anything more complicated, you can access the pipeline directly via
You can add handlers to all browsers via `Browser.Resources.addHandler`. These
handlers are automatically added to every new `browser.resources` instance.
- Browser.Resources.addHandler(function(request, response, next) {
- // Log the response body
- console.log("Response body: " + response.body);
- next();
- });
+```js
+Browser.Resources.addHandler(function(request, response, next) {
+ // Log the response body
+ console.log("Response body: " + response.body);
+ next();
+});
+```
When handlers are executed, `this` is set to the browser instance.
@@ -639,10 +664,12 @@ Retrieves a resource with the given URL and passes response to the callback.
For example:
- browser.resources.get("http://some.service", function(error, response) {
- console.log(response.statusText);
- console.log(response.body);
- });
+```js
+browser.resources.get("http://some.service", function(error, response) {
+ console.log(response.statusText);
+ console.log(response.body);
+});
+```
#### resources.mock(url, response)
@@ -663,15 +690,21 @@ Supported options are:
For example:
- var params = { "count": 5 };
- browser.resources.post("http://some.service", { params: params }, function(error, response) {
- . . .
- });
+```js
+var params = { "count": 5 };
+browser.resources.post("http://some.service",
+ { params: params },
+ function(error, response) {
+ . . .
+});
- var headers = { "Content-Type": "application/x-www-form-urlencoded" };
- browser.resources.post("http://some.service", { headers: headers, body: "count=5" }, function(error, response) {
- . . .
- });
+var headers = { "Content-Type": "application/x-www-form-urlencoded" };
+browser.resources.post("http://some.service",
+ { headers: headers, body: "count=5" },
+ function(error, response) {
+ . . .
+});
+```
#### resources.request(method, url, options, callback)
@@ -688,9 +721,13 @@ Supported options are:
For example:
- browser.resources.request("DELETE", "http://some.service", function(error) {
- . . .
- });
+```js
+browser.resources.request("DELETE",
+ "http://some.service",
+ function(error) {
+ . . .
+});
+```
#### resources.restore(url)
28 doc/new/zombie.css
View
@@ -32,9 +32,9 @@ pre, code {
overflow-y: hidden;
white-space: pre;
}
-pre {
+pre, .code {
background: #eef;
- padding: 0.6em;
+ padding: 0.1em 0.3em 0.6em 0.3em;
}
h4 code {
color: steelblue;
@@ -219,10 +219,11 @@ strong {
h2, h3, h4 {
page-break-after: avoid;
}
- p, pre, code, ul, ol, blockquote {
+ p, pre, code, ul, ol, blockquote, .syntaxhighlighter {
page-break-inside: avoid;
widows: 3;
orphans: 3;
+ font-size: 10pt;
}
#navigation-bar {
display: none;
@@ -235,3 +236,24 @@ strong {
}
}
}
+
+
+
+/** Syntax highlighting **/
+code.plain {
+}
+code.comments {
+ color: #998;
+ font-style: italic;
+}
+code.string {
+ color: #14d;
+}
+code.keyword {
+ color: #000;
+}
+code.variable {
+ color: #008080;
+}
+code.value {
+}
15 package.json
View
@@ -33,14 +33,13 @@
"ws": "~0.4.22"
},
"devDependencies": {
- "coffee-script": "~1.4.0",
- "docco": "~0.4.0",
- "express": "~3.0.3",
- "highlight": "~0.2.3",
- "mocha": "~1.7.0",
- "replay": "~1.6.0",
- "requirejs": "~2.1.1",
- "ronn": "~0.3.8"
+ "coffee-script": "~1.4.0",
+ "express": "~3.0.3",
+ "node-syntaxhighlighter": "~0.8.1",
+ "mocha": "~1.7.0",
+ "replay": "~1.6.0",
+ "requirejs": "~2.1.1",
+ "robotskirt": "~2.7.1"
},
"repository": {
"type": "git",
47 scripts/docs
View
@@ -10,11 +10,7 @@
# open html/zombie.pdf
# open html/zombie.mobi
#
-# You'll need Markdown to generate all three documents:
-#
-# brew install markdown
-#
-# WkHTMLtoPDF to generate the PDF:
+# You'll need wkhtmltopdf to generate the PDF:
#
# brew install wkhtmltopdf
#
@@ -24,6 +20,7 @@
{ execFile, exec } = require("child_process")
File = require("fs")
Path = require("path")
+Robotskirt = require("robotskirt")
DOC_DIR = Path.resolve("#{__dirname}/../doc/new")
@@ -46,17 +43,47 @@ generateHTML = (callback)->
callback(error)
return
- execFile "markdown", ["#{DOC_DIR}/README.md"], (error, stdout, stderr)->
- if error || stderr
- console.error("Note: if you haven't already, brew install markdown")
- callback(error || new Error(stderr))
+ File.readFile "#{DOC_DIR}/README.md", "utf8", (error, markdown)->
+ if error
+ callback(error)
return
+ NSH = require("node-syntaxhighlighter")
+
+ NSH_OPTIONS =
+ "auto-links": false
+ "class-name": "code"
+ "gutter": false
+ "toolbar": false
+
+ ROBOTSKIRT_OPTIONS = [
+ Robotskirt.EXT_TABLES
+ Robotskirt.EXT_AUTOLINK
+ Robotskirt.EXT_FENCED_CODE
+ ]
+
+ # Render to HTML with syntax highlighting
+ renderer = new Robotskirt.HtmlRenderer()
+ renderer.blockcode = (code, language)->
+ if language
+ nshLanguage = NSH.getLanguage(language)
+ if nshLanguage
+ return NSH.highlight(code, nshLanguage, NSH_OPTIONS)
+ else
+ return "<pre>" + Robotskirt.houdini.escapeHTML(code) + "</pre>"
+
+ # Parse Markdown with support for tables, autolinking and fenced code blocks
+ parser = new Robotskirt.Markdown(renderer, ROBOTSKIRT_OPTIONS)
+ content = parser.render(markdown)
+
+ # http://daringfireball.net/projects/smartypants/
+ content = Robotskirt.smartypantsHtml(content)
+
# Add IDs for all headers so they can be references
addIDToHeader = (match, level, textContent)->
id = textContent.replace(/\s+/, "_").toLowerCase()
return "<h#{level} id=\"#{id}\">#{textContent}</h#{level}>"
- content = stdout.replace(/<h([1-3])>(.*)<\/h[1-3]>/g, addIDToHeader)
+ content = content.replace(/<h([1-3])>(.*)<\/h[1-3]>/g, addIDToHeader)
html = layout.replace("{content}", content)
File.writeFile("#{HTML_DIR}/index.html", html, callback)
Please sign in to comment.
Something went wrong with that request. Please try again.