don't find headers in code blocks for the on-this-page

lib/markdown-to-jsonapi.js

@@ -5,6 +5,9 @@ const _ = require('lodash');
 const h2p = require('html2plaintext');
 const { Serializer } = require('jsonapi-serializer');
 const { JSDOM } = require('jsdom');
+const subparsers = require('./showdown-subparsers');
+
+subparsers(showdown);
 
 const supportedContentTypes = ['content', 'html', 'description', 'toc'];
 

lib/showdown-subparsers.js

@@ -0,0 +1,60 @@
+/* eslint-disable */
+module.exports = function(showdown) {
+  /**
+   * This is a copy and paste of the exact subparser from showdown with one *very* subtle change.
+   * We need code blocks to work when they have "stuff" following the language definition 
+   * e.g. ```html some-stuff-here
+   * 
+   * This doesn't work by default so we had to update the regex from: 
+   * 
+   * /(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*)\n([\s\S]*?)\n(?: {0,3})\1/g
+   * 
+   * to 
+   * 
+   * /(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*).*\n([\s\S]*?)\n(?: {0,3})\1/g
+   * 
+   * if you look carefully we have added an extra .* just after the middle there.
+   * 
+   * If you're thinking this all looks like gobbledegook then you are correct. If this 
+   * doesn't work then https://regex101.com/ is your friend. Put the regex that you want 
+   * to debug in there and some examples of a markdown file and just keep change things
+   * until it starts working 🤷‍♀️
+   * 
+   */
+  showdown.subParser('githubCodeBlocks', function (text, options, globals) {
+    'use strict';
+
+    // early exit if option is not enabled
+    if (!options.ghCodeBlocks) {
+      return text;
+    }
+
+    text = globals.converter._dispatch('githubCodeBlocks.before', text, options, globals);
+
+    text += '¨0';
+
+    text = text.replace(/(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*).*\n([\s\S]*?)\n(?: {0,3})\1/g, function (wholeMatch, delim, language, codeblock) {
+      var end = (options.omitExtraWLInCodeBlocks) ? '' : '\n';
+
+      // First parse the github code block
+      codeblock = showdown.subParser('encodeCode')(codeblock, options, globals);
+      codeblock = showdown.subParser('detab')(codeblock, options, globals);
+      codeblock = codeblock.replace(/^\n+/g, ''); // trim leading newlines
+      codeblock = codeblock.replace(/\n+$/g, ''); // trim trailing whitespace
+
+      codeblock = '<pre><code' + (language ? ' class="' + language + ' language-' + language + '"' : '') + '>' + codeblock + end + '</code></pre>';
+
+      codeblock = showdown.subParser('hashBlock')(codeblock, options, globals);
+
+      // Since GHCodeblocks can be false positives, we need to
+      // store the primitive text and the parsed text in a global var,
+      // and then return a token
+      return '\n\n¨G' + (globals.ghCodeBlocks.push({text: wholeMatch, codeblock: codeblock}) - 1) + 'G\n\n';
+    });
+
+    // attacklab: strip sentinel
+    text = text.replace(/¨0/, '');
+
+    return globals.converter._dispatch('githubCodeBlocks.after', text, options, globals);
+  });
+}

test/attributes.js

@@ -233,4 +233,78 @@ you're being silly now
       { text: 'Sub sub sub point', depth: '5', id: 'subsubsubpoint' },
     ]);
   });
+
+  it('not include headers that are in code blocks', async function () {
+    const result = await buildSingleFile(`# Hello world
+
+This is the first part
+
+\`\`\`html face
+<div class="messages">
+  <aside>
+    <div class="avatar is-active" title="Tomster's avatar">T</div>
+  </aside>
+  <section>
+    <h4 class="username">
+      Tomster
+      <span class="local-time">their local time is 4:56pm</span>
+    </h4>
+
+    <p>
+      Hey Zoey, have you had a chance to look at the EmberConf brainstorming doc
+      I sent you?
+    </p>
+  </section>
+
+  <aside class="current-user">
+    <div class="avatar" title="Zoey's avatar">Z</div>
+  </aside>
+  <section>
+    <h4 class="username">Zoey</h4>
+
+    <p>Hey!</p>
+
+    <p>
+      I love the ideas! I'm really excited about where this year's EmberConf is
+      going, I'm sure it's going to be the best one yet. Some quick notes:
+    </p>
+
+    <ul>
+      <li>
+        Definitely agree that we should double the coffee budget this year (it
+        really is impressive how much we go through!)
+      </li>
+      <li>
+        A blimp would definitely make the venue very easy to find, but I think
+        it might be a bit out of our budget. Maybe we could rent some spotlights
+        instead?
+      </li>
+      <li>
+        We absolutely will need more hamster wheels, last year's line was
+        <em>way</em> too long. Will get on that now before rental season hits
+        its peak.
+      </li>
+    </ul>
+
+    <p>Let me know when you've nailed down the dates!</p>
+  </section>
+
+  <form>
+    <label for="message">Message</label>
+    <input id="message" />
+    <button type="submit">
+      Send
+    </button>
+  </form>
+</div>
+\`\`\`
+
+`, {
+      contentTypes: ['toc'],
+    });
+
+    expect(result.attributes.toc).to.deep.equal([
+      { text: 'Hello world', depth: '1', id: 'helloworld' },
+    ]);
+  });
 });