Commit b2505655c804b22ca9da9a1385a41751c175e161

Lea Verou 2012-07-29T00:35:02

Docs update, minor styling changes

diff --git a/code.js b/code.js
index 896f8ae..c839b49 100644
--- a/code.js
+++ b/code.js
@@ -169,7 +169,7 @@ var p = $u.element.create('p', {
 	properties: {
 		id: 'theme'
 	},
-	contents: 'Theme',
+	contents: 'Theme:',
 	before: 'header #features'
 });
 var themes = components.themes;
diff --git a/download.html b/download.html
index c694f42..2ef1e2a 100644
--- a/download.html
+++ b/download.html
@@ -105,12 +105,12 @@ section.download {
 		
 		<section id="download">
 			<section id="download-js" class="download">
-				<pre class="prism"><code class="language-javascript"></code></pre>
+				<pre><code class="language-javascript"></code></pre>
 				<a href="#" class="download-button" download="prism.js" target="_blank">Download JS</a>
 			</section>
 			
 			<section id="download-css" class="download">
-				<pre class="prism"><code class="language-css"></code></pre>
+				<pre><code class="language-css"></code></pre>
 				<a href="#" class="download-button" download="prism.css" target="_blank">Download CSS</a>
 			</section>
 		</section>
diff --git a/extending.html b/extending.html
index c0ff002..d1e0ce8 100644
--- a/extending.html
+++ b/extending.html
@@ -101,40 +101,44 @@
 		env.attributes['title'] = env.content.replace(/&amp;amp;/, '&amp;');
 	}
 });</code></pre>
+	<p>Of course, to understand which hooks to use you would have to read Prism’s source. Imagine where you would add your code and then find the appropriate hook.
+	If there is no hook you can use, you may <a href="">request one to be added</a>, detailing why you need it there.
 </section>
 
 <section id="api">
 	<h1>API documentation</h1>
 	
-	<section>
+	<section id="highlight-all">
 		<h1><code>Prism.highlightAll(async, callback)</code></h1>
-		<p>This is the most high-level function in Prism’s API. It fetches all the elements that have the <code>prism</code> class 
+		<p>This is the most high-level function in Prism’s API. It fetches all the elements that have a <code>.language-xxxx</code> class 
 		and then calls <code>Prism.highlightElement()</code> on each one of them.</p>
 	
 		<h2>Parameters</h2>
 		<dl>
 			<dt>async</dt>
-			<dd>Whether to use Web Workers to improve performance and avoid blocking the UI when highlighting very large chunks of code. False by default.</dd>
+			<dd>Whether to use Web Workers to improve performance and avoid blocking the UI when highlighting very large chunks of code. False by default (<a href="faq.html#why-is-asynchronous-highlighting-disabled-by-default">why?</a>).</dd>
+			
 			<dt>callback</dt>
 			<dd>An optional callback to be invoked after the highlighting is done. Mostly useful when <code>async</code> is true, since in that case, the highlighting is done asynchronously.</dd>
 		</dl>
 	</section>
 	
-	<section>
+	<section id="highlight-element">
 		<h1><code>Prism.highlightElement(element, async, callback)</code></h1>
-		<p>Highlights the code inside a single element. The <code>prism</code> class is not required when invoking this method directly.</p>
+		<p>Highlights the code inside a single element.</p>
 		
 		<h2>Parameters</h2>
 		<dl>
 			<dt>element</dt>
-			<dd>The element containing the code. It must have a class of <code>language-xxx</code> to be processed, where <code>xxxx</code> is a valid language.</dd>
+			<dd>The element containing the code. It must have a class of <code>language-xxxx</code> to be processed, where <code>xxxx</code> is a valid language identifier.</dd>
+
 			<dt>async</dt>
 			<dt>callback</dt>
-			<dd>Same as in <code>Prism.highlightAll()</code></dd>
+			<dd>Same as in <a href="#highlight-all"><code>Prism.highlightAll()</code></a></dd>
 		</dl>
 	</section>
 	
-	<section>
+	<section id="highlight">
 		<h1><code>Prism.highlight(text, grammar)</code></h1>
 		<p>Low-level function, only use if you know what you’re doing.
 		It accepts a string of text as input and the language definitions to use, and returns a string with the HTML produced.</p>
@@ -151,7 +155,7 @@
 		<p>The highlighted HTML</p>
 	</section>
 	
-	<section>
+	<section id="tokenize">
 		<h1><code>Prism.tokenize(text, grammar)</code></h1>
 		<p>This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input and the language definitions to use, and returns an array with the tokenized code.
 		When the language definition includes nested tokens, the function is called recursively on each of these tokens. This method could be useful in other contexts as well, as a very crude parser.</p>
@@ -165,7 +169,7 @@
 		</dl>
 		
 		<h2>Returns</h2>
-		<p>An array of strings, tokens (class Prism.Token) and other arrays.</p>
+		<p>An array of strings, tokens (class <code>Prism.Token</code>) and other arrays.</p>
 	</section>
 </section>
 
diff --git a/index.html b/index.html
index df3aa78..b7b27e3 100644
--- a/index.html
+++ b/index.html
@@ -37,10 +37,10 @@
 		</li>
 		<li>
 			<strong>Very extensible</strong>
-			Plugin architecture, very easy to define new languages
+			Its plugin architecture makes it easy to add new features. Very easy to define new languages.
 		</li>
 		<li>
-			<strong>Easily themeable</strong>
+			<strong>Easy styling</strong>
 			All styling is done through CSS, with sensible class names like <code>.comment</code>, <code>.string</code>, <code>.property</code> etc
 		</li>
 	</ul>
diff --git a/plugins/line-highlight/index.html b/plugins/line-highlight/index.html
index aa73e8a..a331da9 100644
--- a/plugins/line-highlight/index.html
+++ b/plugins/line-highlight/index.html
@@ -25,9 +25,9 @@
 	
 	<p>To use this plugin, your code samples need to use a <code>&lt;pre></code> element, with the <code>prism</code> class and it should include
 	one or more <code>&lt;code></code> element(s) as children. For example:</p>
-	<pre class="prism lang-markup"><code>&lt;pre class="prism language-javascript">&lt;code>console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
+	<pre class="lang-markup"><code>&lt;pre class="language-javascript">&lt;code>console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
 	<p>This is also valid:
-	<pre class="prism language-markup"><code>&lt;pre class="prism">&lt;code class="language-javascript">console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
+	<pre class="language-markup"><code>&lt;pre>&lt;code class="language-javascript">console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
 	
 	<p>You specify the lines to be highlighted through the <code>data-line</code> attribute on the <code>&lt;pre></code> element, in the following simple format:</p>
 	<ul>
diff --git a/style.css b/style.css
index ec646cb..cdbdfcb 100644
--- a/style.css
+++ b/style.css
@@ -75,8 +75,17 @@ h2 {
 	margin: 1em 0 .3em;
 }
 
+dt {
+	margin: 1em 0 0 0;
+	font-size: 130%;
+}
+
+	dt:after {
+		content: ':';
+	}
+
 dd {
-	margin-left: 5em;
+	margin-left: 2em;
 }
 
 strong {
@@ -118,6 +127,7 @@ header, footer {
 
 header {
 	overflow: hidden;
+	background-image: url(img/spectrum.png);
 	background-image: linear-gradient(45deg, white 50%, transparent 50%),
 	                  linear-gradient(135deg, transparent 50%, white 50%),
 	                  url(img/spectrum.png);
@@ -195,7 +205,7 @@ header {
 		
 				#features li strong {
 					display: block;
-					font-size: 180%;
+					font-size: 200%;
 				}	
 					
 	.download-button {