Don't add an extra trailing newline part deux (gatsbyjs#4831)

* Don't add an extra trailing newline part deux When using the highlighting lines, don't add an extra trailing newline. * update snapshots in gatsby-remark-embed-snippet
philipedin · Apr 7, 2018 · fb36e1d · fb36e1d
1 parent 8dbc5e6
commit fb36e1d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 24 deletions.
diff --git a/packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap
@@ -84,8 +84,7 @@ Object {
 
 <span class=\\"token selector\\">*</span> <span class=\\"token punctuation\\">{</span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token property\\">box-sizing</span><span class=\\"token punctuation\\">:</span> border-box<span class=\\"token punctuation\\">;</span>
-</span><span class=\\"token punctuation\\">}</span>
-</code></pre>
+</span><span class=\\"token punctuation\\">}</span></code></pre>
         </div>",
         },
       ],
@@ -145,8 +144,7 @@ Object {
         <pre class=\\"language-css\\"><code><span class=\\"token selector\\">html</span> <span class=\\"token punctuation\\">{</span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token property\\">height</span><span class=\\"token punctuation\\">:</span> 100%<span class=\\"token punctuation\\">;</span>
 </span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 100%<span class=\\"token punctuation\\">;</span>
-</span><span class=\\"token punctuation\\">}</span>
-</code></pre>
+</span><span class=\\"token punctuation\\">}</span></code></pre>
         </div>",
         },
       ],
@@ -267,8 +265,7 @@ Object {
 <span class=\\"gatsby-highlight-code-line\\">highlighted
 </span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>p</span><span class=\\"token punctuation\\">></span></span>
 <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>body</span><span class=\\"token punctuation\\">></span></span>
-<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span>
-</code></pre>
+<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span></code></pre>
         </div>",
         },
       ],
@@ -331,8 +328,7 @@ Object {
 <span class=\\"gatsby-highlight-code-line\\">highlighted
 </span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>p</span><span class=\\"token punctuation\\">></span></span>
 <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>body</span><span class=\\"token punctuation\\">></span></span>
-<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span>
-</code></pre>
+<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span></code></pre>
         </div>",
         },
       ],
@@ -455,8 +451,7 @@ Object {
 <span class=\\"token attr-name\\">transitionLeaveTimeout</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token number\\">300</span><span class=\\"token punctuation\\">}</span></span><span class=\\"token punctuation\\">></span></span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token punctuation\\">{</span>items<span class=\\"token punctuation\\">}</span>
 </span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ReactCSSTransitionGroup</span><span class=\\"token punctuation\\">></span></span>
-<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span>
-</code></pre>
+<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span></code></pre>
         </div>",
         },
       ],
@@ -580,8 +575,7 @@ Object {
         <pre class=\\"language-jsx\\"><code>ReactDOM<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">render</span><span class=\\"token punctuation\\">(</span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>h1</span><span class=\\"token punctuation\\">></span></span>Hello<span class=\\"token punctuation\\">,</span> world<span class=\\"token operator\\">!</span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>h1</span><span class=\\"token punctuation\\">></span></span><span class=\\"token punctuation\\">,</span>
 </span><span class=\\"gatsby-highlight-code-line\\">document<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getElementById</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'root'</span><span class=\\"token punctuation\\">)</span>
-</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
-</code></pre>
+</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></code></pre>
         </div>",
         },
       ],
@@ -644,8 +638,7 @@ Object {
 </span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
 </span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
 </span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
-<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span>
-</code></pre>
+<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span></code></pre>
         </div>",
         },
       ],
@@ -885,8 +878,7 @@ Object {
         <pre class=\\"language-yaml\\"><code><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token key atrule\\">foo</span><span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">\\"highlighted\\"</span>
 </span><span class=\\"token key atrule\\">bar</span><span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">\\"not highlighted\\"</span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token key atrule\\">baz</span><span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">\\"highlighted\\"</span>
-</span><span class=\\"token key atrule\\">qux</span><span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">\\"not highlighted\\"</span>
-</code></pre>
+</span><span class=\\"token key atrule\\">qux</span><span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">\\"not highlighted\\"</span></code></pre>
         </div>",
         },
       ],
@@ -1127,8 +1119,7 @@ Object {
         <pre class=\\"language-bash\\"><code><span class=\\"token keyword\\">echo</span> <span class=\\"token string\\">\\"not highlighted\\"</span>
 <span class=\\"gatsby-highlight-code-line\\"><span class=\\"token keyword\\">echo</span> <span class=\\"token string\\">\\"highlighted\\"</span>
 </span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token keyword\\">echo</span> <span class=\\"token string\\">\\"highlighted\\"</span>
-</span><span class=\\"token keyword\\">echo</span> <span class=\\"token string\\">\\"not highlighted\\"</span>
-</code></pre>
+</span><span class=\\"token keyword\\">echo</span> <span class=\\"token string\\">\\"not highlighted\\"</span></code></pre>
         </div>",
         },
       ],

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap
@@ -5,7 +5,6 @@ exports[`highlight code and lines with PrismJS for language cpp 1`] = `
 </span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token keyword\\">int</span> <span class=\\"token function\\">sum</span><span class=\\"token punctuation\\">(</span>a<span class=\\"token punctuation\\">,</span> b<span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span>
 </span>  <span class=\\"token keyword\\">return</span> a <span class=\\"token operator\\">+</span> b<span class=\\"token punctuation\\">;</span>
 <span class=\\"token punctuation\\">}</span>
-
 "
 `;
 
@@ -36,6 +35,5 @@ exports[`highlight code and lines with PrismJS for language jsx 1`] = `
 <span class=\\"token punctuation\\">}</span>
 
 <span class=\\"token keyword\\">export</span> <span class=\\"token keyword\\">default</span> Counter
-
 "
 `;
diff --git a/packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js b/packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js
@@ -70,4 +70,40 @@ export default Counter
       expect(highlightCode(language, code)).toMatch(code)
     })
   })
+
+  describe(`with non-highlight-lines`, () => {
+    it(`does not add trailing newlines`, () => {
+      const highlightCode = require(`../highlight-code`)
+      const language = `javascript`
+      const code = `const a = 1\nconst b = 2`
+      expect(highlightCode(language, code)).not.toMatch(/\n$/)
+    })
+
+    it(`a trailing newline is preserved`, () => {
+      const highlightCode = require(`../highlight-code`)
+      const language = `javascript`
+      const code = `const a = 1\nconst b = 2\n`
+      expect(highlightCode(language, code)).toMatch(/[^\n]\n$/)
+    })
+  })
+
+  describe(`with non-highlight-lines`, () => {
+    it(`does not add trailing newlines`, () => {
+      const highlightCode = require(`../highlight-code`)
+      const language = `javascript`
+      const linesToHighlight = [1]
+      const code = `const a = 1\nconst b = 2`
+      expect(highlightCode(language, code, linesToHighlight)).not.toMatch(/\n$/)
+    })
+
+    it(`a trailing newline is preserved`, () => {
+      const highlightCode = require(`../highlight-code`)
+      const language = `javascript`
+      const linesToHighlight = [1]
+      const code = `const a = 1\nconst b = 2\n`
+      expect(highlightCode(language, code, linesToHighlight)).toMatch(
+        /[^\n]\n$/
+      )
+    })
+  })
 })
diff --git a/packages/gatsby-remark-prismjs/src/highlight-code.js b/packages/gatsby-remark-prismjs/src/highlight-code.js
@@ -34,12 +34,13 @@ module.exports = (language, code, lineNumbersHighlight = []) => {
     })
 
     highlightedCode = ``
-    // Don't add a new line character after highlighted lines as they
-    // need to be display: block and full-width.
-    codeSplits.forEach(split => {
+    const lastIdx = codeSplits.length - 1
+    // Don't add back the new line character after highlighted lines
+    // as they need to be display: block and full-width.
+    codeSplits.forEach((split, idx) => {
       split.highlighted
         ? (highlightedCode += split.code)
-        : (highlightedCode += `${split.code}\n`)
+        : (highlightedCode += `${split.code}${idx == lastIdx ? `` : `\n`}`)
     })
   }