Merge pull request #181 from jasonkarns/heading-ids

Generate Heading IDs

lib/marked.js

@@ -837,7 +837,9 @@ Parser.prototype.tok = function() {
     case 'heading': {
       return '<h'
         + this.token.depth
-        + '>'
+        + ' id="'
+        + this.token.text.toLowerCase().replace(/\s/g, '-')
+        + '">'
         + this.inline.output(this.token.text)
         + '</h'
         + this.token.depth

test/tests/gfm_code_hr_list.html

@@ -1,4 +1,4 @@
-<h2>foo</h2>
+<h2 id="foo">foo</h2>
 <ol>
 <li><p>bar:</p>
 <blockquote>

test/tests/main.html

@@ -1,4 +1,4 @@
-<h1>A heading</h1> <p>Just a note, I&#39;ve found that I can&#39;t test my markdown parser vs others. For example, both markdown.js and showdown code blocks in lists wrong. They&#39;re  also completely <a href="http://google.com/" title="Google">inconsistent</a> with regards to paragraphs in list items.</p> <p>A link. Not anymore.</p> <aside>This will make me fail the test because
+<h1 id="a-heading">A heading</h1> <p>Just a note, I&#39;ve found that I can&#39;t test my markdown parser vs others. For example, both markdown.js and showdown code blocks in lists wrong. They&#39;re  also completely <a href="http://google.com/" title="Google">inconsistent</a> with regards to paragraphs in list items.</p> <p>A link. Not anymore.</p> <aside>This will make me fail the test because
 markdown.js doesnt acknowledge arbitrary html blocks =/</aside> <ul><li><p>List Item 1</p></li><li><p>List Item 2 </p><ul><li>New List Item 1 Hi, this is a list item.</li><li>New List Item 2 Another item <pre><code>Code goes here.
-Lots of it...</code></pre></li><li>New List Item 3 The last item</li></ul></li><li><p>List Item 3 The final item.</p></li><li><p>List Item 4 The real final item.</p></li></ul> <p>Paragraph.</p> <blockquote><ul><li>bq Item 1</li><li>bq Item 2 <ul><li>New bq Item 1</li><li>New bq Item 2 Text here</li></ul></li></ul></blockquote> <hr> <blockquote><p> Another blockquote!  I really need to get  more creative with  mockup text..  markdown.js breaks here again</p></blockquote> <h2>Another Heading</h2> <p>Hello <em>world</em>. Here is a <a href="//hello">link</a>. And an image <img src="src" alt="alt">.</p> <pre><code>Code goes here.
+Lots of it...</code></pre></li><li>New List Item 3 The last item</li></ul></li><li><p>List Item 3 The final item.</p></li><li><p>List Item 4 The real final item.</p></li></ul> <p>Paragraph.</p> <blockquote><ul><li>bq Item 1</li><li>bq Item 2 <ul><li>New bq Item 1</li><li>New bq Item 2 Text here</li></ul></li></ul></blockquote> <hr> <blockquote><p> Another blockquote!  I really need to get  more creative with  mockup text..  markdown.js breaks here again</p></blockquote> <h2 id="another-heading">Another Heading</h2> <p>Hello <em>world</em>. Here is a <a href="//hello">link</a>. And an image <img src="src" alt="alt">.</p> <pre><code>Code goes here.
 Lots of it...</code></pre>

test/tests/markdown_documentation_basics.html

@@ -1,4 +1,4 @@
-<h1>Markdown: Basics</h1>
+<h1 id="markdown:-basics">Markdown: Basics</h1>
 
 <ul id="ProjectSubmenu">
     <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li>
@@ -8,7 +8,7 @@ <h1>Markdown: Basics</h1>
     <li><a href="/projects/markdown/dingus" title="Online Markdown Web Form">Dingus</a></li>
 </ul>
 
-<h2>Getting the Gist of Markdown&#39;s Formatting Syntax</h2>
+<h2 id="getting-the-gist-of-markdown's-formatting-syntax">Getting the Gist of Markdown&#39;s Formatting Syntax</h2>
 
 <p>This page offers a brief overview of what it&#39;s like to use Markdown.
 The <a href="/projects/markdown/syntax" title="Markdown Syntax">syntax page</a> provides complete, detailed documentation for
@@ -24,7 +24,7 @@ <h2>Getting the Gist of Markdown&#39;s Formatting Syntax</h2>
 <p><strong>Note:</strong> This document is itself written using Markdown; you
 can <a href="/projects/markdown/basics.text">see the source for it by adding &#39;.text&#39; to the URL</a>.</p>
 
-<h2>Paragraphs, Headers, Blockquotes</h2>
+<h2 id="paragraphs,-headers,-blockquotes">Paragraphs, Headers, Blockquotes</h2>
 
 <p>A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
@@ -88,7 +88,7 @@ <h2>Paragraphs, Headers, Blockquotes</h2>
 &lt;/blockquote&gt;
 </code></pre>
 
-<h3>Phrase Emphasis</h3>
+<h3 id="phrase-emphasis">Phrase Emphasis</h3>
 
 <p>Markdown uses asterisks and underscores to indicate spans of emphasis.</p>
 
@@ -110,7 +110,7 @@ <h3>Phrase Emphasis</h3>
 Or, if you prefer, &lt;strong&gt;use two underscores instead&lt;/strong&gt;.&lt;/p&gt;
 </code></pre>
 
-<h2>Lists</h2>
+<h2 id="lists">Lists</h2>
 
 <p>Unordered (bulleted) lists use asterisks, pluses, and hyphens (<code>*</code>,
 <code>+</code>, and <code>-</code>) as list markers. These three markers are
@@ -181,7 +181,7 @@ <h2>Lists</h2>
 &lt;/ul&gt;
 </code></pre>
 
-<h3>Links</h3>
+<h3 id="links">Links</h3>
 
 <p>Markdown supports two styles for creating links: <em>inline</em> and
 <em>reference</em>. With both styles, you use square brackets to delimit the
@@ -244,7 +244,7 @@ <h3>Links</h3>
 &lt;a href=&quot;http://www.nytimes.com/&quot;&gt;The New York Times&lt;/a&gt;.&lt;/p&gt;
 </code></pre>
 
-<h3>Images</h3>
+<h3 id="images">Images</h3>
 
 <p>Image syntax is very much like link syntax.</p>
 
@@ -265,7 +265,7 @@ <h3>Images</h3>
 <pre><code>&lt;img src=&quot;/path/to/img.jpg&quot; alt=&quot;alt text&quot; title=&quot;Title&quot; /&gt;
 </code></pre>
 
-<h3>Code</h3>
+<h3 id="code">Code</h3>
 
 <p>In a regular paragraph, you can create code span by wrapping text in
 backtick quotes. Any ampersands (<code>&amp;</code>) and angle brackets (<code>&lt;</code> or

test/tests/markdown_documentation_syntax.html

@@ -1,4 +1,4 @@
-<h1>Markdown: Syntax</h1>
+<h1 id="markdown:-syntax">Markdown: Syntax</h1>
 
 <ul id="ProjectSubmenu">
     <li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li>

test/tests/ordered_and_unordered_lists.html

@@ -1,4 +1,4 @@
-<h2>Unordered</h2>
+<h2 id="unordered">Unordered</h2>
 
 <p>Asterisks tight:</p>
 
@@ -52,7 +52,7 @@ <h2>Unordered</h2>
 <li><p>Minus 3</p></li>
 </ul>
 
-<h2>Ordered</h2>
+<h2 id="ordered">Ordered</h2>
 
 <p>Tight:</p>
 
@@ -97,7 +97,7 @@ <h2>Ordered</h2>
 <li><p>Item 3.</p></li>
 </ol>
 
-<h2>Nested</h2>
+<h2 id="nested">Nested</h2>
 
 <ul>
 <li>Tab

test/tests/toplevel_paragraphs.html

@@ -9,10 +9,10 @@
 <hr>
 
 <p>hello world</p>
-<h1>how are you</h1>
+<h1 id="how-are-you">how are you</h1>
 
 <p>hello world</p>
-<h1>how are you</h1>
+<h1 id="how-are-you">how are you</h1>
 
 <p>hello world</p>
 <blockquote><p>how are you</p></blockquote>