Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Link anchors for h1/h2/... like on Github #134

Closed
wants to merge 4 commits into from

1 participant

@dcodeIO

See:
https://github.com/dcodeIO/GNUify.js

Versus:
https://npmjs.org/package/gnuify

The anchor links make it much easier to navigate. Would love to see it in marked, too.

I've added it and updated all affected tests.

Cheers

Daniel Wirtz Heading anchors 735d616
@dcodeIO dcodeIO referenced this pull request in npm/npm-www
Closed

Add hash link support to markdown impl. #266

Daniel Wirtz added some commits
@dcodeIO

Actually just one in many :)

@dcodeIO dcodeIO closed this
@jasonkarns jasonkarns referenced this pull request
Merged

Generate Heading IDs #181

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 10, 2013
  1. Heading anchors

    Daniel Wirtz authored
  2. Trim leading/trailing

    Daniel Wirtz authored
Commits on Mar 11, 2013
  1. Trim leading/trailing

    Daniel Wirtz authored
  2. Trim leading/trailing

    Daniel Wirtz authored
This page is out of date. Refresh to see the latest.
View
12 lib/marked.js
@@ -808,6 +808,16 @@ Parser.prototype.parseText = function() {
};
/**
+ * Strip HTML
+ */
+Parser.prototype.parseAnchor = function(s) {
+ return s.replace(/<(?:.|\s)*?>/g, "") // Strip HTML
+ .replace(/&(#[\d]+|[\w]+);/g, "-") // Replace entities with "-"
+ .replace(/[^\w\d_\-]+/g, "-") // Convert non alphanumeric characters to "-"
+ .replace(/^[\-]+|[\-]+$/g, ""); // Strip leading/trailing "-"
+};
+
+/**
* Parse Current Token
*/
@@ -820,7 +830,7 @@ Parser.prototype.tok = function() {
return '<hr>\n';
}
case 'heading': {
- return '<h'
+ return '<a name="'+this.parseAnchor(this.inline.output(this.token.text))+'"></a><h'
+ this.token.depth
+ '>'
+ this.inline.output(this.token.text)
View
2  test/tests/gfm_code_hr_list.html
@@ -1,4 +1,4 @@
-<h2>foo</h2>
+<a name="foo"></a><h2>foo</h2>
<ol>
<li><p>bar:</p>
<blockquote>
View
4 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
+<a name="A-heading"></a><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
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> <a name="Another-Heading"></a><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>
View
16 test/tests/markdown_documentation_basics.html
@@ -1,4 +1,4 @@
-<h1>Markdown: Basics</h1>
+<a name="Markdown-Basics"></a><h1>Markdown: Basics</h1>
<ul id="ProjectSubmenu">
<li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li>
@@ -8,7 +8,7 @@
<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>
+<a name="Getting-the-Gist-of-Markdown-s-Formatting-Syntax"></a><h2>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 @@
<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>
+<a name="Paragraphs-Headers-Blockquotes"></a><h2>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 @@
&lt;/blockquote&gt;
</code></pre>
-<h3>Phrase Emphasis</h3>
+<a name="Phrase-Emphasis"></a><h3>Phrase Emphasis</h3>
<p>Markdown uses asterisks and underscores to indicate spans of emphasis.</p>
@@ -110,7 +110,7 @@
Or, if you prefer, &lt;strong&gt;use two underscores instead&lt;/strong&gt;.&lt;/p&gt;
</code></pre>
-<h2>Lists</h2>
+<a name="Lists"></a><h2>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 @@
&lt;/ul&gt;
</code></pre>
-<h3>Links</h3>
+<a name="Links"></a><h3>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 @@
&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>
+<a name="Images"></a><h3>Images</h3>
<p>Image syntax is very much like link syntax.</p>
@@ -265,7 +265,7 @@
<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>
+<a name="Code"></a><h3>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
View
2  test/tests/markdown_documentation_syntax.html
@@ -1,4 +1,4 @@
-<h1>Markdown: Syntax</h1>
+<a name="Markdown-Syntax"></a><h1>Markdown: Syntax</h1>
<ul id="ProjectSubmenu">
<li><a href="/projects/markdown/" title="Markdown Project Page">Main</a></li>
View
6 test/tests/ordered_and_unordered_lists.html
@@ -1,4 +1,4 @@
-<h2>Unordered</h2>
+<a name="Unordered"></a><h2>Unordered</h2>
<p>Asterisks tight:</p>
@@ -52,7 +52,7 @@
<li><p>Minus 3</p></li>
</ul>
-<h2>Ordered</h2>
+<a name="Ordered"></a><h2>Ordered</h2>
<p>Tight:</p>
@@ -97,7 +97,7 @@
<li><p>Item 3.</p></li>
</ol>
-<h2>Nested</h2>
+<a name="Nested"></a><h2>Nested</h2>
<ul>
<li>Tab
View
4 test/tests/toplevel_paragraphs.html
@@ -9,10 +9,10 @@
<hr>
<p>hello world</p>
-<h1>how are you</h1>
+<a name="how-are-you"></a><h1>how are you</h1>
<p>hello world</p>
-<h1>how are you</h1>
+<a name="how-are-you"></a><h1>how are you</h1>
<p>hello world</p>
<blockquote><p>how are you</p></blockquote>
Something went wrong with that request. Please try again.