Docs update, minor styling changes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
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;/, '&');
}
});</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><pre></code> element, with the <code>prism</code> class and it should include
one or more <code><code></code> element(s) as children. For example:</p>
- <pre class="prism lang-markup"><code><pre class="prism language-javascript"><code>console.log("this plugin is awesome!");</code></pre></code></pre>
+ <pre class="lang-markup"><code><pre class="language-javascript"><code>console.log("this plugin is awesome!");</code></pre></code></pre>
<p>This is also valid:
- <pre class="prism language-markup"><code><pre class="prism"><code class="language-javascript">console.log("this plugin is awesome!");</code></pre></code></pre>
+ <pre class="language-markup"><code><pre><code class="language-javascript">console.log("this plugin is awesome!");</code></pre></code></pre>
<p>You specify the lines to be highlighted through the <code>data-line</code> attribute on the <code><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 {