New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V0.3.6,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>sometimes id are same #919

Closed
osoc opened this Issue Jul 27, 2017 · 12 comments

Comments

7 participants
@osoc

osoc commented Jul 27, 2017

test 01 [ok]

//md:

# h1

## h2

//out:
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h1>

test 02 [the same id]

//md:
# h1
# h1
//out:
<h1 id="h1">h1</h1>
<h1 id="h1">h1</h1>

test 03 [the same id]

//md:
# 这行只有汉字
# 这行也是
//out:
<h1 id="-">这行只有汉字</h1>
<h1 id="-">这行也是</h1>

test 04 [the same id]

//md:
## 这行只有汉字
## 这行也是
//out:
<h2 id="-">这行只有汉字</h1>
<h2 id="-">这行也是</h1>
@miyatin0212

This comment has been minimized.

miyatin0212 commented Aug 26, 2017

I have a same problem...

@miyatin0212

This comment has been minimized.

miyatin0212 commented Aug 26, 2017

I solved this by overriding marked.Renderer#heading function.

const renderer = new marked.Renderer();
renderer.heading = function(text, level) {
    return `<h${level} id="${text}">${text}</h${level}>`;
};

marked(mdString, { renderer: renderer });

It seems to be natural to assume the above-mentioned behavior is a specification.

@osoc

This comment has been minimized.

osoc commented Aug 30, 2017

I do it:
The full code is here

var ID_TABLE = "0123456789ABCDEF";
var AUTOID = 0x0001;
...
Renderer.prototype.heading = function(text, level, raw) {
  var id, tmp;
  tmp = AUTOID++;
  id = ID_TABLE.charAt((tmp >> 12) & 0x0F);
  id += ID_TABLE.charAt((tmp >> 8) & 0x0F);
  id += ID_TABLE.charAt((tmp >> 4) & 0x0F);
  id += ID_TABLE.charAt(tmp & 0x0F);
  return '<h'
    + level
    + ' id="'
    + id
//    + this.options.headerPrefix
//    + raw.toLowerCase().replace(/[^\w]+/g, '-')
    + '">'
    + text
    + '</h'
    + level
    + '>\n';
};

osoc added a commit to osoc/marked.js that referenced this issue Aug 30, 2017

@osoc osoc referenced this issue Aug 30, 2017

Closed

Update marked.js #932

@osoc osoc changed the title from V0.3.6,<h1>,<h2> id are same to V0.3.6,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>sometimes id are same Aug 30, 2017

@joshbruce

This comment has been minimized.

Member

joshbruce commented Dec 25, 2017

@joshbruce joshbruce closed this Dec 25, 2017

@Feder1co5oave

This comment has been minimized.

Contributor

Feder1co5oave commented Jan 5, 2018

There's no perfect way to generate IDs. The "naive" way to fix this would be to add a numeric counter to duplicate IDs, but that would require keeping track of all IDs.

@joshbruce joshbruce reopened this Jan 5, 2018

@joshbruce

This comment has been minimized.

Member

joshbruce commented Jan 5, 2018

I still think the easiest way is to not have Marked do it. This is what I used to do back in the day for scrolling table of contents a la Bootstrap - http://getbootstrap.com/2.3.2/getting-started.html

Step one: Convert Markdown to HTML.
Step two (DOM is ready/loaded): Cycle through the headers to add ID attributes and generate the TOC in one shot.

No JS solution = no TOC; therefore, no reason to have the IDs in the first place.

Again, could just be asking Marked to do too much. If a spec has it, we should too but, if a spec has it, it should define the testable rules for implementing the solution, yeah?

Note: I did not use Marked for processing back in the day.

@yzfdjzwl

This comment has been minimized.

yzfdjzwl commented Feb 8, 2018

@tagia0212
if your header includes (), it will failure. eg:

### do something()
@joshbruce

This comment has been minimized.

Member

joshbruce commented Feb 11, 2018

@joshbruce

This comment has been minimized.

Member

joshbruce commented Apr 13, 2018

Closing as most likely going to be deprecated at a later date.

@joshbruce joshbruce closed this Apr 13, 2018

Improved product scope and purpose automation moved this from To do to Done Apr 13, 2018

@Grawl

This comment has been minimized.

Grawl commented Oct 12, 2018

The problem still exists.

@styfle

This comment has been minimized.

Member

styfle commented Oct 12, 2018

Yes, this problem still exists.

Let's consolidate this issue with a similar one here: #1280

@joshbruce

This comment has been minimized.

Member

joshbruce commented Oct 12, 2018

Sidenote: GitHub adding detail popovers on hover...fancy. 😎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment