Fix data-diff first line bug

addon/initializers/showdown-extension.js

@@ -25,6 +25,25 @@ function stripQuotes(string) {
   return string;
 }
 
+function diffInfo(args, codeblock) {
+  if (args) {
+    let lines = codeblock.split('\n');
+
+    args.forEach(pD => {
+      let operator = pD[0];
+      let lineNo = +(pD.replace(operator, ''));
+      let text = lines[lineNo - 1];
+      if (operator === '+') {
+        lines[lineNo - 1] = `<span class="diff-insertion"><span class="diff-operator">+</span>${text}</span>`;
+      } else {
+        lines[lineNo - 1] = `<span class="diff-deletion"><span class="diff-operator">-</span>${text}</span>`;
+      }
+    });
+    codeblock = lines.join('\n');
+  }
+  return codeblock;
+}
+
 export function initialize(/* application */) {
   showdown.subParser('githubCodeBlocks', function (text, options, globals) {
     // early exit if option is not enabled
@@ -70,6 +89,8 @@ export function initialize(/* application */) {
       let lineNumbersHTML = getLineNumbersHTML(idCounter, codeblock);
       idCounter++;
 
+      let diffInfoArgs = attributes['data-diff']?.split(',');
+
       assert(`Language "${language}" not found. Have you configured Prism correctly?`, !language || Prism.languages[language]);
 
       if (language && Prism.languages[language]) {
@@ -79,6 +100,7 @@ export function initialize(/* application */) {
         codeblock = codeblock.replace(/¨T/g, '¨');
 
         let highlightedCodeBlock = Prism.highlight(codeblock, Prism.languages[language], language) + end;
+        highlightedCodeBlock = diffInfo(diffInfoArgs, highlightedCodeBlock);
         codeblock = `<pre class="language-${language} line-numbers"><code ${language ? `class="${language} language-${language}"` : ''}>${highlightedCodeBlock}${lineNumbersHTML}</code></pre>`;
 
         // Convert to the special characters Showdown uses again
@@ -89,27 +111,10 @@ export function initialize(/* application */) {
           codeblock = `<div class="filename ${language}"><div class="ribbon"></div><span>${attributes['data-filename'] || ''}</span>${codeblock}</div>`;
         }
       } else {
+        codeblock = diffInfo(diffInfoArgs, codeblock);
         codeblock = `<pre class="language-none line-numbers"><code class="language-none">${codeblock}${lineNumbersHTML}</code></pre>`;
       }
 
-      const diffInfo = attributes['data-diff']?.split(',');
-
-      if (diffInfo) {
-        let lines = codeblock.split('\n');
-
-        diffInfo.forEach(pD => {
-          let operator = pD[0];
-          let lineNo = +(pD.replace(operator, ''));
-          let text = lines[lineNo - 1];
-          if (operator === '+') {
-            lines[lineNo - 1] = `<span class="diff-insertion"><span class="diff-operator">+</span>${text}</span>`;
-          } else {
-            lines[lineNo - 1] = `<span class="diff-deletion"><span class="diff-operator">-</span>${text}</span>`;
-          }
-        });
-        codeblock = lines.join('\n');
-      }
-
       codeblock = showdown.subParser('hashBlock')(codeblock, options, globals);
 
       // Since GHCodeblocks can be false positives, we need to

tests/dummy/public/example.md

@@ -62,3 +62,22 @@ Router.map(function() {
 
 export default Router;
 ```
+
+With a diff on the first line: 
+
+```javascript {data-filename="app/router.js" data-diff="-1,+2"}
+import EmberRouter from '@ember/routing/router';
+import EmberRouter from '@embroider/router';
+import config from './config/environment';
+
+const Router = EmberRouter.extend({
+  location: config.locationType,
+  rootURL: config.rootURL
+});
+
+Router.map(function() {
+  this.route('about');
+});
+
+export default Router;
+```