use id attribute instead of name for in page anchors and remove redun…

…dant anchors (#449)
facebook · Mar 7, 2018 · c800870 · c800870
1 parent 8c21455
commit c800870
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 11 deletions.
diff --git a/admin/extending-remarkable.md b/admin/extending-remarkable.md
@@ -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 */) {
@@ -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 */) {

diff --git a/examples/versions/pages/en/versions.js b/examples/versions/pages/en/versions.js
@@ -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>
@@ -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>
@@ -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(

diff --git a/lib/core/Header.js b/lib/core/Header.js
@@ -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}>
           #

diff --git a/lib/core/renderMarkdown.js b/lib/core/renderMarkdown.js
@@ -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) +