From 889040e9c9bb92073ba4435d02d4da31229cb3f7 Mon Sep 17 00:00:00 2001 From: Jason Karns Date: Fri, 2 Aug 2013 17:19:18 -0400 Subject: [PATCH] Generate heading IDs in HTML output. Uses the heading text itself as the ID for the H*. The only transformation made is to replace whitespace with '-' (hyphen). This conforms to the HTML5 spec wherein ID attributes can contain any non-whitespace character. (The previous HTML4 restrictions on ID attribute values have been relaxed.) This feature is limited in scope to strictly generating heading IDs. A future enhancement would be a simple way of letting the author specify the ID attribute. Perhaps: # Some: Crazy Header {#custom_id} to generate:

Some: Crazy Header

--- lib/marked.js | 4 +++- test/tests/gfm_code_hr_list.html | 2 +- test/tests/main.html | 4 ++-- test/tests/markdown_documentation_basics.html | 16 ++++++++-------- test/tests/markdown_documentation_syntax.html | 2 +- test/tests/ordered_and_unordered_lists.html | 6 +++--- test/tests/toplevel_paragraphs.html | 4 ++-- 7 files changed, 20 insertions(+), 18 deletions(-) diff --git a/lib/marked.js b/lib/marked.js index 643b958634..de9ff0700c 100644 --- a/lib/marked.js +++ b/lib/marked.js @@ -837,7 +837,9 @@ Parser.prototype.tok = function() { case 'heading': { return '' + + ' id="' + + this.token.text.toLowerCase().replace(/\s/g, '-') + + '">' + this.inline.output(this.token.text) + 'foo +

foo

  1. bar:

    diff --git a/test/tests/main.html b/test/tests/main.html index a1e20f6a29..8f78c4d30e 100644 --- a/test/tests/main.html +++ b/test/tests/main.html @@ -1,4 +1,4 @@ -

    A heading

    Just a note, I've found that I can't test my markdown parser vs others. For example, both markdown.js and showdown code blocks in lists wrong. They're also completely inconsistent with regards to paragraphs in list items.

    A link. Not anymore.

  2. New List Item 3 The last item

  3. List Item 3 The final item.

  4. List Item 4 The real final item.

    5. Paragraph.

    • bq Item 1
    • bq Item 2
      • New bq Item 1
      • New bq Item 2 Text here

    Another blockquote! I really need to get more creative with mockup text.. markdown.js breaks here again

    Another Heading

    Hello world. Here is a link. And an image alt.

    Code goes here.
 Lots of it...
    diff --git a/test/tests/markdown_documentation_basics.html b/test/tests/markdown_documentation_basics.html index 7eee11250f..e636436ef7 100644 --- a/test/tests/markdown_documentation_basics.html +++ b/test/tests/markdown_documentation_basics.html @@ -1,4 +1,4 @@ -

    Markdown: Basics

    +

    Markdown: Basics

    -

    Getting the Gist of Markdown's Formatting Syntax

    +

    Getting the Gist of Markdown's Formatting Syntax

    This page offers a brief overview of what it's like to use Markdown. The syntax page provides complete, detailed documentation for @@ -24,7 +24,7 @@

    Getting the Gist of Markdown's Formatting Syntax

    Note: This document is itself written using Markdown; you can see the source for it by adding '.text' to the URL.

    -

    Paragraphs, Headers, Blockquotes

    +

    Paragraphs, Headers, Blockquotes

    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 @@

    Paragraphs, Headers, Blockquotes

    </blockquote> -

    Phrase Emphasis

    +

    Phrase Emphasis

    Markdown uses asterisks and underscores to indicate spans of emphasis.

    @@ -110,7 +110,7 @@

    Phrase Emphasis

    Or, if you prefer, <strong>use two underscores instead</strong>.</p> -

    Lists

    +

    Lists

    Unordered (bulleted) lists use asterisks, pluses, and hyphens (*, +, and -) as list markers. These three markers are @@ -181,7 +181,7 @@

    Lists

    </ul> -

    Links

    +

    Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the @@ -244,7 +244,7 @@

    Links

    <a href="http://www.nytimes.com/">The New York Times</a>.</p> -

    Images

    +

    Images

    Image syntax is very much like link syntax.

    @@ -265,7 +265,7 @@

    Images

    <img src="/path/to/img.jpg" alt="alt text" title="Title" />
    -

    Code

    +

    Code

    In a regular paragraph, you can create code span by wrapping text in backtick quotes. Any ampersands (&) and angle brackets (< or diff --git a/test/tests/markdown_documentation_syntax.html b/test/tests/markdown_documentation_syntax.html index 677ab749bb..8511748008 100644 --- a/test/tests/markdown_documentation_syntax.html +++ b/test/tests/markdown_documentation_syntax.html @@ -1,4 +1,4 @@ -

    Markdown: Syntax

    +

    Markdown: Syntax

    -

    Ordered

    +

    Ordered

    Tight:

    @@ -97,7 +97,7 @@

    Ordered

  5. Item 3.

-

Nested

+

Nested