From 5321dc76272908febd0e0e7628b8e5a69d73ee5d Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 13 May 2018 14:55:37 +0800
Subject: [PATCH 1/4] fix: highlight lines are cut when sliding
---
lib/default-theme/styles/code.styl | 19 ++++++++++++++-----
lib/markdown/highlightLines.js | 29 +++++++++--------------------
2 files changed, 23 insertions(+), 25 deletions(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index b562307a82..a567eb0763 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -21,18 +21,27 @@
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-wrapper
+ padding 1.25rem 0
+ position absolute
+ z-index 0
+ width 100%
+ line-height 1.4
+ .highlighted
+ display block
+ width 100%
+ 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
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 7f3fcc4b8e..4f6b94af6c 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -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: `${split || '\n'}`,
- highlighted: true
- }
- }
- return {
- code: split
+ return ` `
}
- })
- let highlightedCode = leadingWrapper
- codeSplits.forEach(split => {
- if (split.highlighted) {
- highlightedCode += split.code
- } else {
- highlightedCode += `${split.code}\n`
- }
- })
- return highlightedCode
+ return '
'
+ }).join('')
+
+ const highlightLinesWrapperCode =
+ `${highlightLinesCode}
`
+
+ return highlightLinesWrapperCode + code
}
}
From 97fa2cc08f7c1fd109703d35631e3cf1ce764b3d Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 13 May 2018 15:20:59 +0800
Subject: [PATCH 2/4] chore: tweaks padding
---
lib/default-theme/styles/code.styl | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index a567eb0763..2ad215c3f3 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -27,7 +27,7 @@ div[class*="language-"]
background-color $codeBgColor
border-radius 6px
.highlight-lines-wrapper
- padding 1.25rem 0
+ padding-top 1.3rem
position absolute
z-index 0
width 100%
From 33db259f873adfb457f0316677fec92000b9e0e0 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 13 May 2018 15:34:32 +0800
Subject: [PATCH 3/4] chore: tweaks
---
lib/default-theme/styles/code.styl | 2 +-
lib/markdown/highlightLines.js | 4 ++--
lib/markdown/preWrapper.js | 10 +++++++++-
3 files changed, 12 insertions(+), 4 deletions(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index 2ad215c3f3..9d5ea70a5a 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -26,7 +26,7 @@ div[class*="language-"]
position relative
background-color $codeBgColor
border-radius 6px
- .highlight-lines-wrapper
+ .highlight-lines
padding-top 1.3rem
position absolute
z-index 0
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 4f6b94af6c..1ae858a489 100644
--- a/lib/markdown/highlightLines.js
+++ b/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 = /^/
@@ -42,7 +42,7 @@ module.exports = md => {
}).join('')
const highlightLinesWrapperCode =
- `${highlightLinesCode}
`
+ `${highlightLinesCode}
`
return highlightLinesWrapperCode + code
}
diff --git a/lib/markdown/preWrapper.js b/lib/markdown/preWrapper.js
index 01ef8574a7..1ade38753a 100644
--- a/lib/markdown/preWrapper.js
+++ b/lib/markdown/preWrapper.js
@@ -1,4 +1,11 @@
// markdown-it plugin for wrapping ...
.
+//
+// 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.
+// 2.
+// 3.
+// 4.
module.exports = md => {
const fence = md.renderer.rules.fence
@@ -6,6 +13,7 @@ module.exports = md => {
const [tokens, idx] = args
const token = tokens[idx]
const rawCode = fence(...args)
- return `${rawCode}
`
+ return `` +
+ `${rawCode}
`
}
}
From edfee20a274790832e9bbd485f0ec66ee1938d00 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 13 May 2018 15:37:04 +0800
Subject: [PATCH 4/4] chore: tweaks
---
lib/default-theme/styles/code.styl | 3 +--
lib/markdown/highlightLines.js | 2 +-
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index 9d5ea70a5a..54cced7e3e 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -27,14 +27,13 @@ div[class*="language-"]
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
- display block
- width 100%
background-color rgba(0, 0, 0, 66%)
pre
position relative
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 1ae858a489..dd8334324b 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -36,7 +36,7 @@ module.exports = md => {
return lineNumber === start
})
if (inRange) {
- return ` `
+ return `
`
}
return '
'
}).join('')