From 07de768a9d8f24dae40ee862c6c1d5bb0844ec58 Mon Sep 17 00:00:00 2001
From: John Hildenbiddle <john@hildenbiddle.com>
Date: Fri, 13 Oct 2023 17:27:55 -0500
Subject: [PATCH] Allow scrolling via keyboard in code blocks

---
 src/core/render/compiler/code.js |  2 +-
 src/themes/vue.styl              | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/core/render/compiler/code.js b/src/core/render/compiler/code.js
index a1ac40335..b49d77d3c 100644
--- a/src/core/render/compiler/code.js
+++ b/src/core/render/compiler/code.js
@@ -11,5 +11,5 @@ export const highlightCodeCompiler = ({ renderer }) =>
       lang
     );
 
-    return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${text}</code></pre>`;
+    return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}" tabindex="0">${text}</code></pre>`;
   });
diff --git a/src/themes/vue.styl b/src/themes/vue.styl
index 7eb7ed82f..93ebe7c8c 100644
--- a/src/themes/vue.styl
+++ b/src/themes/vue.styl
@@ -114,6 +114,7 @@ body
 .markdown-section code,
 .markdown-section pre
   background-color #f8f8f8
+  z-index 0
 
 .markdown-section pre,
 .markdown-section output
@@ -141,7 +142,6 @@ body
   font-size 0.8rem
 
 .markdown-section pre
-  padding 0 1.4rem
   line-height 1.5rem
   overflow auto
   word-wrap normal
@@ -149,13 +149,17 @@ body
 .markdown-section pre > code
   color #525252
   font-size 0.8rem
-  padding 2.2em 5px
+  padding 2.2em 1.4rem
   line-height inherit
-  margin 0 2px
+  margin 5px
   max-width inherit
   overflow inherit
   white-space inherit
 
+.markdown-section pre > code:focus
+  // outline 5px auto Highlight;
+  outline 5px auto -webkit-focus-ring-color;
+
 .markdown-section output
   padding: 1.7rem 1.4rem
   border 1px dotted #ccc
@@ -172,6 +176,7 @@ body
 
 .markdown-section pre::after,
 .markdown-section output::after
+  content attr(data-lang)
   color #ccc
   font-size 0.6rem
   font-weight 600
@@ -183,10 +188,6 @@ body
   text-align right
   top 0
 
-.markdown-section pre::after
-.markdown-section output::after
-  content attr(data-lang)
-
 /* code highlight */
 .token.comment, .token.prolog, .token.doctype, .token.cdata
   color #8e908c