Website improvements (#2053)

extending.html

@@ -145,15 +145,15 @@ <h1>Creating a new language definition</h1>
 			<p>In this example, we choose <code>foo-bar</code> as the id of the new language. The language id has to be unique and should work well with the <code>language-xxxx</code> CSS class name Prism uses to refer to language definitions. Your language id should ideally match the regular expression <code>/^[a-z][a-z\d]*(?:-[a-z][a-z\d]*)*$/</code>.</p>
 		</li>
 		<li>
-			<p>Edit <code>components.json</code> to register the new language by adding it to the <code>languages</code> object. (Please note that all language entries are sorted alphabetically by title.) <br>
+			<p>Edit <a href="https://github.com/PrismJS/prism/blob/master/components.json"><code>components.json</code></a> to register the new language by adding it to the <code>languages</code> object. (Please note that all language entries are sorted alphabetically by title.) <br>
 			Our new entry for this example will look like this:</p>
 
 			<pre><code class="language-json">"foo-bar": {
 	"title": "Foo Bar",
 	"owner": "Your GitHub name"
 }</code></pre>
 
-			<p>If your language definition depends any other languages, you have to specify this here as well by adding a <code class="language-js">"require"</code> property. E.g. <code class="language-js">"require": "clike"</code>, or <code class="language-js">"require" : ["markup", "css"]</code>. For more information on dependencies read the declaring dependencies section.</p>
+			<p>If your language definition depends any other languages, you have to specify this here as well by adding a <code class="language-js">"require"</code> property. E.g. <code class="language-js">"require": "clike"</code>, or <code class="language-js">"require" : ["markup", "css"]</code>. For more information on dependencies read the <a href="#declaring-dependencies">declaring dependencies</a> section.</p>
 
 			<p><em>Note:</em> Any changes made to <code>components.json</code> require a rebuild (see step 3).</p>
 		</li>
@@ -266,7 +266,7 @@ <h1>Dependencies</h1>
 
 	<p>Languages and plugins can depend on each other, so Prism has its own dependency system to declare and resolve dependencies.</p>
 
-	<h2>Declaring dependencies</h2>
+	<h2 id="declaring-dependencies">Declaring dependencies</h2>
 
 	<p>You declare a dependency by adding a property to the entry of your language or plugin in the <a href="https://github.com/PrismJS/prism/blob/master/components.json"><code>components.json</code></a> file. The name of the property will be dependency kind and its value will be the component id of the dependee. If multiple languages or plugins are depended upon then you can also declare an array of component ids.</p>
 
@@ -354,7 +354,7 @@ <h3>Dependency kinds</h3>
 
 	<p>Note: You can declare a component as both <code>require</code> and <code>modify</code></p>
 
-	<h2>Resolving dependencies</h2>
+	<h2 id="resolving-dependencies">Resolving dependencies</h2>
 
 	<p>We consider the dependencies of components an implementation detail, so they may change from release to release. Prism will usually resolve dependencies for you automatically. So you won't have to worry about dependency loading if you <a href="download.html">download</a> a bundle or use the <code>loadLanguages</code> function in NodeJS, the <a href="plugins/autoloader/">AutoLoader</a>, or our Babel plugin.</p>
 

index.html

@@ -100,7 +100,7 @@ <h1>Full list of features</h1>
 		<li>Very easy to extend without modifying the code, due to Prism’s <a href="#plugins">plugin architecture</a>. Multiple hooks are scattered throughout the source.</li>
 		<li>Very easy to <a href="extending.html#language-definitions">define new languages</a>. Only thing you need is a good understanding of regular expressions</li>
 		<li>All styling is done through CSS, with <a href="faq.html#how-do-i-know-which-tokens-i-can-style-for">sensible class names</a> rather than ugly namespaced abbreviated nonsense.</li>
-		<li>Wide browser support: IE11, Firefox, Chrome, Safari, <a href="faq.html#this-page-doesnt-work-in-opera">Opera</a>, most Mobile browsers</li>
+		<li>Wide browser support: Edge, IE11, Firefox, Chrome, Safari, <a href="faq.html#this-page-doesnt-work-in-opera">Opera</a>, most Mobile browsers</li>
 		<li>Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)</li>
 		<li>Highlights inline code as well, not just code blocks</li>
 		<li>Highlights nested languages (CSS in HTML, JavaScript in HTML)</li>
@@ -115,16 +115,16 @@ <h1>Full list of features</h1>
 	<h1>Limitations</h1>
 	<ul>
 		<li>Any pre-existing HTML in the code will be stripped off. <a href="faq.html#if-pre-existing-html-is-stripped-off-how-can-i-highlight">There are ways around it though</a>.</li>
-		<li>Regex-based so it *will* fail on certain edge cases, which are documented in the <a href="known-failures.html">known failues page</a>.</li>
+		<li>Regex-based so it *will* fail on certain edge cases, which are documented in the <a href="known-failures.html">known failures page</a>.</li>
 		<li>Some of our themes have problems with certain layouts. Known cases are documented <a href="known-failures.html#themes">here</a>.</li>
-		<li>No IE 6-10 support. If someone can read code, they are probably in the 85% of the population with a modern browser.</li>
+		<li>No IE 6-10 support. If someone can read code, they are probably in the 95% of the population with a modern browser.</li>
 	</ul>
 </section>
 
 <section id="basic-usage" class="language-markup">
 	<h1>Basic usage</h1>
 
-	<p>You will need to include the <code>prism.css</code> and <code>prism.js</code> files you downloaded in your page. Example:
+	<p>You will need to include the <code>prism.css</code> and <code>prism.js</code> files you <a href="download.html">downloaded</a> in your page. Example:
 	<pre><code>&lt;!DOCTYPE html>
 &lt;html>
 &lt;head>
@@ -160,7 +160,7 @@ <h1>Basic usage</h1>
 &lt;/script>
 &lt;script src="prism.js">&lt;/script></code></pre>
 
-	<h2>Usage with CDNs</h2>
+	<h2 id="basic-usage-cdn">Usage with CDNs</h2>
 
 	<p>In combination with CDNs, we recommend using the <a href="plugins/autoloader">Autoloader plugin</a> which automatically loads languages when necessary.</p>
 
@@ -179,9 +179,9 @@ <h2>Usage with CDNs</h2>
 <code>&lt;/body>
 &lt;/html></code></pre>
 
-	<p>CDNs which provide PrismJS are e.g. <a href="https://cdnjs.com/libraries/prism">cdnjs</a> and <a href="https://www.jsdelivr.com/package/npm/prismjs">jsDelivr</a>.</p>
+	<p>CDNs which provide PrismJS are e.g. <a href="https://cdnjs.com/libraries/prism">cdnjs</a>, <a href="https://www.jsdelivr.com/package/npm/prismjs">jsDelivr</a>, and <a href="https://unpkg.com/browse/prismjs@1/">UNPKG</a>.</p>
 
-	<h2>Usage with Webpack, Browserify, & Other Bundlers</h2>
+	<h2 id="basic-usage-bundlers">Usage with Webpack, Browserify, & Other Bundlers</h2>
 
 	<p>If you want to use Prism with a bundler, install Prism with <code>npm</code>:</p>
 
@@ -196,7 +196,7 @@ <h2>Usage with Webpack, Browserify, & Other Bundlers</h2>
 		the minimum number of languages and plugins to satisfy your needs.
 		See that plugin's documentation for configuration details.</p>
 
-	<h2>Usage with Node</h2>
+	<h2 id="basic-usage-node">Usage with Node</h2>
 
 	<p>If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well.
 	This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like <a href="https://www.ampproject.org/">AMP pages</a>.</p>

scripts/code.js

@@ -100,6 +100,24 @@ if (toc.children.length > 0) {
 
 })();
 
+/**
+ * Linkify h2
+ */
+(function () {
+	$$('section h2[id]').forEach(function (h2) {
+		var text = h2.textContent;
+		h2.innerHTML = '';
+
+		$u.element.create('a', {
+			properties: {
+				href: window.location.pathname + '#' + h2.id
+			},
+			contents: text,
+			inside: h2
+		});
+	});
+})();
+
 // calc()
 (function(){
 	if(!window.PrefixFree) return;

style.css

@@ -48,11 +48,13 @@ section h1 {
 		font-style: normal;
 	}
 
-	section h1 > a {
+	section h1 > a,
+	section h2[id] > a {
 		text-decoration: none;
 	}
 
-	section h1 > a:before {
+	section h1 > a:before,
+	section h2[id] > a:before {
 		content: '§';
 		position: absolute;
 		padding: 0 .2em;
@@ -62,7 +64,8 @@ section h1 {
 		text-shadow: 0 1px white;
 	}
 
-	section h1 > a:hover:before {
+	section h1 > a:hover:before,
+	section h2[id] > a:hover:before {
 		color: black;
 		background: #f1ad26;
 	}