fix: highlight lines are cut when sliding (#437)

Author: ulivz

lib/default-theme/styles/code.styl

@@ -21,18 +21,26 @@
       padding 0
       background-color transparent
       border-radius 0
-  .highlighted-line
-    background-color rgba(0, 0, 0, 66%)
-    display block
-    margin 0 -1.5rem
-    padding 0 1.5rem
 
 div[class*="language-"]
   position relative
   background-color $codeBgColor
   border-radius 6px
+  .highlight-lines
+    user-select none
+    padding-top 1.3rem
+    position absolute
+    z-index 0
+    width 100%
+    line-height 1.4
+    .highlighted
+      background-color rgba(0, 0, 0, 66%)
+  pre
+    position relative
+    z-index 1
   &::before
     position absolute
+    z-index 3
     top 0.8em
     right 1em
     font-size 0.75rem

lib/markdown/highlightLines.js

@@ -1,4 +1,4 @@
-// forked from https://github.com/egoist/markdown-it-highlight-lines
+// Modified from https://github.com/egoist/markdown-it-highlight-lines
 
 const RE = /{([\d,-]+)}/
 const wrapperRE = /^<pre .*?><code>/
@@ -27,9 +27,7 @@ module.exports = md => {
       : token.content
 
     const rawCode = code.replace(wrapperRE, '')
-    const leadingWrapper = code.match(wrapperRE)[0]
-
-    const codeSplits = rawCode.split('\n').map((split, index) => {
+    const highlightLinesCode = rawCode.split('\n').map((split, index) => {
       const lineNumber = index + 1
       const inRange = lineNumbers.some(([start, end]) => {
         if (start && end) {
@@ -38,23 +36,14 @@ module.exports = md => {
         return lineNumber === start
       })
       if (inRange) {
-        return {
-          code: `<span class="highlighted-line">${split || '\n'}</span>`,
-          highlighted: true
-        }
-      }
-      return {
-        code: split
+        return `<div class="highlighted">&nbsp;</div>`
       }
-    })
-    let highlightedCode = leadingWrapper
-    codeSplits.forEach(split => {
-      if (split.highlighted) {
-        highlightedCode += split.code
-      } else {
-        highlightedCode += `${split.code}\n`
-      }
-    })
-    return highlightedCode
+      return '<br>'
+    }).join('')
+
+    const highlightLinesWrapperCode =
+      `<div class="highlight-lines">${highlightLinesCode}</div>`
+
+    return highlightLinesWrapperCode + code
   }
 }

lib/markdown/preWrapper.js

@@ -1,11 +1,19 @@
 // markdown-it plugin for wrapping <pre> ... </pre>.
+//
+// If your plugin was chained before preWrapper, you can add additional eleemnt directly.
+// If your plugin was chained after preWrapper, you can use these slots:
+//   1. <!--beforebegin-->
+//   2. <!--afterbegin-->
+//   3. <!--beforeend-->
+//   4. <!--afterend-->
 
 module.exports = md => {
   const fence = md.renderer.rules.fence
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx] = args
     const token = tokens[idx]
     const rawCode = fence(...args)
-    return `<!--beforebegin--><div class="language-${token.info.trim()}"><!--afterbegin-->${rawCode}<!--beforeend--></div><!--afterend-->`
+    return `<!--beforebegin--><div class="language-${token.info.trim()}">` +
+    `<!--afterbegin-->${rawCode}<!--beforeend--></div><!--afterend-->`
   }
 }