Allow scrolling via keyboard in code blocks (#2264)

Author: jhildenbiddle

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>`;
   });

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,21 +142,24 @@ body
   font-size 0.8rem
 
 .markdown-section pre
-  padding 0 1.4rem
   line-height 1.5rem
   overflow auto
   word-wrap normal
 
 .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