Don't overflow x scroll on code blocks

This runs into an issue with lighthouse accessibility scores See dequelabs/axe-core#2483
seancdavis · Sep 11, 2020 · 1dd3d49 · 1dd3d49
1 parent 9e3545c
commit 1dd3d49
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/_assets/css/global/code-blocks.css b/src/_assets/css/global/code-blocks.css
@@ -8,13 +8,14 @@ pre {
     @apply bg-gray-light
       p-4
       rounded-md
-      text-sm;
+      text-sm
+      whitespace-pre-wrap;
   }
 
   code:not(.hljs) {
     @apply block
-      overflow-x-scroll
-      text-black;
+      text-black
+      whitespace-pre-wrap;
   }
 }
 

diff --git a/src/index.md b/src/index.md
@@ -98,7 +98,10 @@ Each plugin (utility) requires a **single named export** as `default`. Check out
 
 ```js
 exports.default = (eleventyConfig) => {
-  eleventyConfig.addPairedShortcode("markdown", (input) => exports.renderMarkdown(input))
+  eleventyConfig.addPairedShortcode(
+    "markdown",
+    (input) => exports.renderMarkdown(input)
+  )
 }
 ```