Fix oversized padding around code blocks

gatsbyjs · Aug 1, 2018 · a5cc869 · a5cc869
1 parent beff9ea
commit a5cc869
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/examples/using-remark/src/utils/typography.js b/examples/using-remark/src/utils/typography.js
@@ -134,11 +134,15 @@ const options = {
         backgroundColor: `transparent`,
         borderRadius: 0,
         margin: 0,
+        padding: 0,
         overflow: `initial`,
         float: `left`,
         minWidth: `100%`,
         textShadow: `none`,
       },
+      ".gatsby-highlight pre[class*='language-'].line-numbers": {
+        paddingLeft: `2.8em`,
+      },
       ".gatsby-highlight-code-line": {
         background: `#fff2cc`,
         display: `block`,

diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
@@ -116,14 +116,19 @@ CSS along your PrismJS theme and the styles for `.gatsby-highlight-code-line`:
  * padding and overflow.
  * 1. Make the element just wide enough to fit its content.
  * 2. Always fill the visible space in .gatsby-highlight.
+ * 3. Adjust the position of the line numbers
  */
 .gatsby-highlight pre[class*="language-"] {
   background-color: transparent;
   margin: 0;
+  padding: 0;
   overflow: initial;
   float: left; /* 1 */
   min-width: 100%; /* 2 */
 }
+.gatsby-highlight pre[class*="language-"].line-numbers {
+  paddingLeft: 2.8em; /* 3 */
+}
 ```
 
 #### Optional: Add line numbering

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/add-line-numbers.js b/packages/gatsby-remark-prismjs/src/__tests__/add-line-numbers.js
@@ -3,13 +3,13 @@ const addLineNumbers = require(`../add-line-numbers`)
 describe(`returns the line numbers container`, () => {
   it(`should return the <span> container with the right classes`, () => {
     expect(addLineNumbers(``)).toEqual(
-      `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; top:1em; left:0;">`
+      `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;">`
       + `</span>`
     )
   })
   it(`should return return as many <span></span> children as there are code lines`, () => {
     expect(addLineNumbers(`line1\nline2\nline3`)).toEqual(
-      `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; top:1em; left:0;">`
+      `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;">`
       + `<span></span><span></span><span></span>`
       + `</span>`
     )

diff --git a/packages/gatsby-remark-prismjs/src/add-line-numbers.js b/packages/gatsby-remark-prismjs/src/add-line-numbers.js
@@ -15,7 +15,7 @@ module.exports = (code = []) => {
   // Relevant code in the Prism Line Numbers plugin can be found here:
   // https://github.com/PrismJS/prism/blob/f356dfe71bf126e6dc060c03f3e042de28a9bec4/plugins/line-numbers/prism-line-numbers.js#L99-L115
   const lineNumbersWrapper =
-    `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; top:1em; left:0;">`
+    `<span aria-hidden="true" class="line-numbers-rows" style="white-space: normal; width: auto; left: 0;">`
     + `${generateSpans(numberOfLines)}`
     + `</span>`
   return lineNumbersWrapper