Skip to content

Commit

Permalink
use id attribute instead of name for in page anchors and remove redun…
Browse files Browse the repository at this point in the history
…dant anchors (#449)
  • Loading branch information
ronami authored and JoelMarcey committed Mar 7, 2018
1 parent 8c21455 commit c800870
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 11 deletions.
6 changes: 3 additions & 3 deletions admin/extending-remarkable.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,14 @@ md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
That's pretty straightforward: whenever these tokens are found, we render a `<hN>` or `</hN>` HTML tag, where N is the `hLevel` for this heading. That would result in `<h3>Hi there</h3>` being output. But what we want is something closer to this:

```
<h3><a class="anchor" name="hi-there"></a>Hi there <a class="hash-link" href="#hi-there">#</a></h3>
<h3><a class="anchor" id="hi-there"></a>Hi there <a class="hash-link" href="#hi-there">#</a></h3>
```

In that case, we need to override our heading rules like so:

```
md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" id="' + toSlug(tokens[idx+1].content) + '"></a>';
};
md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
Expand All @@ -89,7 +89,7 @@ We now need to tell Remarkable to use our extension. We can wrap our rules in a
```
function anchors(md) {
md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" id="' + toSlug(tokens[idx+1].content) + '"></a>';
};
md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
Expand Down
9 changes: 3 additions & 6 deletions examples/versions/pages/en/versions.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ class Versions extends React.Component {
<h2>{siteConfig.title + ' Versions'}</h2>
</header>
<p>New versions of this project are released every so often.</p>
<a name="latest" />
<h3>Current version (Stable)</h3>
<h3 id="latest">Current version (Stable)</h3>
<table className="versions">
<tbody>
<tr>
Expand All @@ -46,8 +45,7 @@ class Versions extends React.Component {
This is the version that is configured automatically when you
first install this project.
</p>
<a name="rc" />
<h3>Pre-release versions</h3>
<h3 id="rc">Pre-release versions</h3>
<table className="versions">
<tbody>
<tr>
Expand All @@ -62,8 +60,7 @@ class Versions extends React.Component {
</tbody>
</table>
<p>Other text describing this section.</p>
<a name="archive" />
<h3>Past Versions</h3>
<h3 id="archive">Past Versions</h3>
<table className="versions">
<tbody>
{versions.map(
Expand Down
2 changes: 1 addition & 1 deletion lib/core/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class Header extends React.Component {

return (
<Heading {...this.props}>
<a className="anchor" name={slug} />
<a className="anchor" id={slug} />
{this.props.children}{' '}
<a className="hash-link" href={'#' + slug}>
#
Expand Down
2 changes: 1 addition & 1 deletion lib/core/renderMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function anchors(md) {
return (
'<h' +
tokens[idx].hLevel +
'><a class="anchor" aria-hidden="true" name="' +
'><a class="anchor" aria-hidden="true" id="' +
toSlug(textToken.content) +
'"></a><a href="#' +
toSlug(textToken.content) +
Expand Down

0 comments on commit c800870

Please sign in to comment.