From 631605877ce94e3631f84e916ed6e0c665522454 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Wed, 9 May 2018 20:14:08 +0800 Subject: [PATCH 01/21] feat: support line number --- lib/default-theme/styles/code.styl | 14 ++++++ lib/markdown/highlightLines.js | 72 +++++++++++++++++++----------- lib/markdown/index.js | 4 +- 3 files changed, 64 insertions(+), 26 deletions(-) diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl index 7241afcbc2..e56bde9f85 100644 --- a/lib/default-theme/styles/code.styl +++ b/lib/default-theme/styles/code.styl @@ -85,3 +85,17 @@ pre[class="language-c"]:before pre[class="language-bash"]:before content "sh" + +.content pre[line-number-mode] + padding-left 3rem + +.line-wrapper + position relative + +.line-number + user-select none + position absolute + left -3rem + width 3rem + text-align center + color #888 diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js index da5496a389..b6cd12eb6f 100644 --- a/lib/markdown/highlightLines.js +++ b/lib/markdown/highlightLines.js @@ -1,56 +1,78 @@ // forked from https://github.com/egoist/markdown-it-highlight-lines const RE = /{([\d,-]+)}/ -const wrapperRE = /^
/
+const wrapperRE = /(^)([^]*)(<\/code><\/pre>)/
-module.exports = md => {
+module.exports = (md, { showLineNumbers = false } = {}) => {
const fence = md.renderer.rules.fence
md.renderer.rules.fence = (...args) => {
const [tokens, idx, options] = args
const token = tokens[idx]
+ const highlightLine = RE.test(token.info)
- if (!token.info || !RE.test(token.info)) {
+ if (!token.info || (!highlightLine && !showLineNumbers)) {
return fence(...args)
}
const langName = token.info.replace(RE, '').trim()
- const lineNumbers = RE.exec(token.info)[1]
- .split(',')
- .map(v => v.split('-').map(v => parseInt(v, 10)))
-
const code = options.highlight
? options.highlight(token.content, langName)
: token.content
- const rawCode = code.replace(wrapperRE, '')
- const leadingWrapper = code.match(wrapperRE)[0]
+ const codeMatch = code.match(wrapperRE)
+
+ const [, leadingWrapper, rawCode, endingWrapper] = codeMatch
+
+ let lineNumbers
+ if (highlightLine) {
+ lineNumbers = RE.exec(token.info)[1]
+ .split(',')
+ .map(v => v.split('-').map(v => parseInt(v, 10)))
+ }
const codeSplits = rawCode.split('\n').map((split, index) => {
- const lineNumber = index + 1
- const inRange = lineNumbers.some(([start, end]) => {
- if (start && end) {
- return lineNumber >= start && lineNumber <= end
- }
- return lineNumber === start
- })
- if (inRange) {
- return {
- code: `${split}`,
- highlighted: true
+ if (highlightLine) {
+ const lineNumber = index + 1
+ const inRange = lineNumbers.some(([start, end]) => {
+ if (start && end) {
+ return lineNumber >= start && lineNumber <= end
+ }
+ return lineNumber === start
+ })
+ if (inRange) {
+ return {
+ code: `${split}`,
+ highlighted: true
+ }
}
}
return {
code: split
}
})
- let highlightedCode = leadingWrapper
- codeSplits.forEach(split => {
+
+ let finalCode = leadingWrapper
+
+ if (showLineNumbers) {
+ finalCode = finalCode.slice(-0, -7) + ' line-number-mode>'
+ }
+ codeSplits.forEach((split, index) => {
+ if (showLineNumbers) {
+ if (index === codeSplits.length - 1) {
+ return
+ }
+ finalCode += `${index + 1}`
+ }
if (split.highlighted) {
- highlightedCode += split.code
+ finalCode += split.code
} else {
- highlightedCode += `${split.code}\n`
+ finalCode += `${split.code}\n`
+ }
+ if (showLineNumbers) {
+ finalCode += ``
}
})
- return highlightedCode
+ finalCode += endingWrapper
+ return finalCode
}
}
diff --git a/lib/markdown/index.js b/lib/markdown/index.js
index e945e550df..8cdcd59efb 100644
--- a/lib/markdown/index.js
+++ b/lib/markdown/index.js
@@ -19,7 +19,9 @@ module.exports = ({ markdown = {}} = {}) => {
})
// custom plugins
.use(component)
- .use(highlightLines)
+ .use(highlightLines, {
+ showLineNumbers: true
+ })
.use(convertRouterLink, Object.assign({
target: '_blank',
rel: 'noopener noreferrer'
From 8c6f7c6996605effe2777eb2e3f0d076e1a25cca Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 20:19:38 +0800
Subject: [PATCH 02/21] style: tweaks
---
lib/default-theme/styles/code.styl | 23 ++++++++++++-----------
lib/markdown/highlightLines.js | 1 +
2 files changed, 13 insertions(+), 11 deletions(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index e56bde9f85..decbc5f81a 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -88,14 +88,15 @@ pre[class="language-bash"]:before
.content pre[line-number-mode]
padding-left 3rem
-
-.line-wrapper
- position relative
-
-.line-number
- user-select none
- position absolute
- left -3rem
- width 3rem
- text-align center
- color #888
+ .highlighted-line
+ margin 0 -1.5rem 0 -3rem
+ padding 0 1.5rem 0 3rem
+ .line-wrapper
+ position relative
+ .line-number
+ user-select none
+ position absolute
+ left -3rem
+ width 3rem
+ text-align center
+ color #888
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index b6cd12eb6f..66fd77fa93 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -56,6 +56,7 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
if (showLineNumbers) {
finalCode = finalCode.slice(-0, -7) + ' line-number-mode>'
}
+
codeSplits.forEach((split, index) => {
if (showLineNumbers) {
if (index === codeSplits.length - 1) {
From d779750e8f94a2d4771368927d3b3b6bdb148258 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 20:48:06 +0800
Subject: [PATCH 03/21] refactor: simplify patch code
---
lib/markdown/highlightLines.js | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 66fd77fa93..2126b33a3f 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -62,18 +62,16 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
if (index === codeSplits.length - 1) {
return
}
- finalCode += `${index + 1}`
+ finalCode += `${index + 1}`
}
if (split.highlighted) {
finalCode += split.code
} else {
finalCode += `${split.code}\n`
}
- if (showLineNumbers) {
- finalCode += ``
- }
})
finalCode += endingWrapper
return finalCode
}
}
+
From 37c66a569ae1b62ae3f1cc2ef9ec23e70c486158 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 21:01:44 +0800
Subject: [PATCH 04/21] chore: tweaks
---
lib/markdown/highlightLines.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 2126b33a3f..89629f626e 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -41,7 +41,7 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
})
if (inRange) {
return {
- code: `${split}`,
+ code: `${split || '\n'}`,
highlighted: true
}
}
From 2b086d470f37de92e3b263f3ddad3a5c380dbc39 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 22:29:36 +0800
Subject: [PATCH 05/21] refactor: simplify code
---
lib/markdown/highlightLines.js | 47 ++++++++++++++--------------------
1 file changed, 19 insertions(+), 28 deletions(-)
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 89629f626e..d9f8ff8bd5 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -30,48 +30,39 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
.map(v => v.split('-').map(v => parseInt(v, 10)))
}
- const codeSplits = rawCode.split('\n').map((split, index) => {
- if (highlightLine) {
- const lineNumber = index + 1
- const inRange = lineNumbers.some(([start, end]) => {
- if (start && end) {
- return lineNumber >= start && lineNumber <= end
- }
- return lineNumber === start
- })
- if (inRange) {
- return {
- code: `${split || '\n'}`,
- highlighted: true
- }
- }
- }
- return {
- code: split
- }
- })
-
let finalCode = leadingWrapper
-
if (showLineNumbers) {
finalCode = finalCode.slice(-0, -7) + ' line-number-mode>'
}
+ const codeSplits = rawCode.split('\n')
+ const codeSplitsMaxIndex = codeSplits.length - 1
+
codeSplits.forEach((split, index) => {
if (showLineNumbers) {
- if (index === codeSplits.length - 1) {
+ if (index === codeSplitsMaxIndex) {
return
}
finalCode += `${index + 1}`
}
- if (split.highlighted) {
- finalCode += split.code
- } else {
- finalCode += `${split.code}\n`
+
+ if (highlightLine) {
+ const lineNumber = index + 1
+ const inRange = lineNumbers.some(([start, end]) => {
+ if (start && end) {
+ return lineNumber >= start && lineNumber <= end
+ }
+ return lineNumber === start
+ })
+ if (inRange) {
+ finalCode += `${split || '\n'}`
+ return
+ }
}
+ finalCode += index === codeSplitsMaxIndex ? split : `${split}\n`
})
+
finalCode += endingWrapper
return finalCode
}
}
-
From 4b19b863bfce4fb9a41141407eecdb8ee92a53dc Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 23:23:54 +0800
Subject: [PATCH 06/21] refactor: hack line number middle align at all browsers
---
lib/default-theme/styles/code.styl | 20 ++++++++++++--------
lib/markdown/highlightLines.js | 2 +-
2 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
index decbc5f81a..270630d3c2 100644
--- a/lib/default-theme/styles/code.styl
+++ b/lib/default-theme/styles/code.styl
@@ -86,17 +86,21 @@ pre[class="language-c"]:before
pre[class="language-bash"]:before
content "sh"
+$lineNumberWrapperWidth = 3rem
+
.content pre[line-number-mode]
- padding-left 3rem
+ padding-left $lineNumberWrapperWidth
+ vertical-align middle
.highlighted-line
- margin 0 -1.5rem 0 -3rem
- padding 0 1.5rem 0 3rem
+ margin 0 -1.5rem 0 $lineNumberWrapperWidth
+ padding 0 1.5rem 0 $lineNumberWrapperWidth
.line-wrapper
+ user-select none
+ display inline-block
position relative
.line-number
- user-select none
- position absolute
- left -3rem
- width 3rem
+ position absolute
+ left - $lineNumberWrapperWidth
+ width $lineNumberWrapperWidth
text-align center
- color #888
+ color rgba(255, 255, 255, 0.4)
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index d9f8ff8bd5..0829902291 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -43,7 +43,7 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
if (index === codeSplitsMaxIndex) {
return
}
- finalCode += `${index + 1}`
+ finalCode += ` ${index + 1}`
}
if (highlightLine) {
From 1e305e6ad1932878b9b8ba8c9550fb52e707dbab Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 23:33:42 +0800
Subject: [PATCH 07/21] chore: add some comments
---
lib/markdown/highlightLines.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
index 0829902291..c488e32e63 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/highlightLines.js
@@ -43,6 +43,11 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
if (index === codeSplitsMaxIndex) {
return
}
+ // Cannot apply all to 'vertical-align: top' to align the line number and code.
+ // Since there are some annoying text nodes at code.
+ // This first space is to make 'line-wrapper' correctly display as a inline block.
+ // So the line number can have a correct relative position container.
+ // while the 2nd is to make 'line-wrapper' horizontal center.
finalCode += ` ${index + 1}`
}
From 1b0ad8e2bfe85b451094dedd3cd4803ceb793955 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Wed, 9 May 2018 23:38:12 +0800
Subject: [PATCH 08/21] chore: rename highlightLines to line
---
lib/markdown/index.js | 4 ++--
lib/markdown/{highlightLines.js => line.js} | 8 ++++----
2 files changed, 6 insertions(+), 6 deletions(-)
rename lib/markdown/{highlightLines.js => line.js} (85%)
diff --git a/lib/markdown/index.js b/lib/markdown/index.js
index 8cdcd59efb..269e3a50a7 100644
--- a/lib/markdown/index.js
+++ b/lib/markdown/index.js
@@ -1,5 +1,5 @@
const highlight = require('./highlight')
-const highlightLines = require('./highlightLines')
+const line = require('./line')
const component = require('./component')
const hoistScriptStyle = require('./hoist')
const convertRouterLink = require('./link')
@@ -19,7 +19,7 @@ module.exports = ({ markdown = {}} = {}) => {
})
// custom plugins
.use(component)
- .use(highlightLines, {
+ .use(line, {
showLineNumbers: true
})
.use(convertRouterLink, Object.assign({
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/line.js
similarity index 85%
rename from lib/markdown/highlightLines.js
rename to lib/markdown/line.js
index c488e32e63..3a44d3aced 100644
--- a/lib/markdown/highlightLines.js
+++ b/lib/markdown/line.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 = /(^)([^]*)(<\/code><\/pre>)/
@@ -43,11 +43,11 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
if (index === codeSplitsMaxIndex) {
return
}
- // Cannot apply all to 'vertical-align: top' to align the line number and code.
+ // Cannot apply all to 'vertical-align: top' to make the line number(block) and code(inline) vertical align.
// Since there are some annoying text nodes at code.
- // This first space is to make 'line-wrapper' correctly display as a inline block.
+ // The first space is to make 'line-wrapper' correctly display as a inline block.
// So the line number can have a correct relative position container.
- // while the 2nd is to make 'line-wrapper' horizontal center.
+ // while the 2nd space is to make 'line-wrapper' horizontal center.
finalCode += ` ${index + 1}`
}
From eccf61ab4284961e03020bd1c93e67c246f64fe3 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Thu, 10 May 2018 00:39:35 +0800
Subject: [PATCH 09/21] chore: tweaks
---
lib/markdown/index.js | 2 +-
lib/markdown/line.js | 24 ++++++++++++------------
2 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/lib/markdown/index.js b/lib/markdown/index.js
index 269e3a50a7..71df65757d 100644
--- a/lib/markdown/index.js
+++ b/lib/markdown/index.js
@@ -20,7 +20,7 @@ module.exports = ({ markdown = {}} = {}) => {
// custom plugins
.use(component)
.use(line, {
- showLineNumbers: true
+ lineNumbers: markdown.lineNumbers
})
.use(convertRouterLink, Object.assign({
target: '_blank',
diff --git a/lib/markdown/line.js b/lib/markdown/line.js
index 3a44d3aced..0c2ec4ddad 100644
--- a/lib/markdown/line.js
+++ b/lib/markdown/line.js
@@ -3,14 +3,14 @@
const RE = /{([\d,-]+)}/
const wrapperRE = /(^)([^]*)(<\/code><\/pre>)/
-module.exports = (md, { showLineNumbers = false } = {}) => {
+module.exports = (md, { lineNumbers = false } = {}) => {
const fence = md.renderer.rules.fence
md.renderer.rules.fence = (...args) => {
const [tokens, idx, options] = args
const token = tokens[idx]
const highlightLine = RE.test(token.info)
- if (!token.info || (!highlightLine && !showLineNumbers)) {
+ if (!token.info || (!highlightLine && !lineNumbers)) {
return fence(...args)
}
@@ -23,15 +23,15 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
const [, leadingWrapper, rawCode, endingWrapper] = codeMatch
- let lineNumbers
+ let highlightedLineNumbers
if (highlightLine) {
- lineNumbers = RE.exec(token.info)[1]
+ highlightedLineNumbers = RE.exec(token.info)[1]
.split(',')
.map(v => v.split('-').map(v => parseInt(v, 10)))
}
let finalCode = leadingWrapper
- if (showLineNumbers) {
+ if (lineNumbers) {
finalCode = finalCode.slice(-0, -7) + ' line-number-mode>'
}
@@ -39,21 +39,21 @@ module.exports = (md, { showLineNumbers = false } = {}) => {
const codeSplitsMaxIndex = codeSplits.length - 1
codeSplits.forEach((split, index) => {
- if (showLineNumbers) {
+ if (lineNumbers) {
if (index === codeSplitsMaxIndex) {
return
}
- // Cannot apply all to 'vertical-align: top' to make the line number(block) and code(inline) vertical align.
- // Since there are some annoying text nodes at code.
- // The first space is to make 'line-wrapper' correctly display as a inline block.
- // So the line number can have a correct relative position container.
- // while the 2nd space is to make 'line-wrapper' horizontal center.
+ // Cannot apply all '' to 'vertical-align: top' to make the line number(block)
+ // and code(inline) vertical align, because there are some annoying text nodes at code.
+ // The first space is to make 'line-wrapper' correctly display as a inline block, so
+ // the line number can have a correct relative position container, while the 2nd space
+ // is to make 'line-wrapper' horizontal center.
finalCode += ` ${index + 1}`
}
if (highlightLine) {
const lineNumber = index + 1
- const inRange = lineNumbers.some(([start, end]) => {
+ const inRange = highlightedLineNumbers.some(([start, end]) => {
if (start && end) {
return lineNumber >= start && lineNumber <= end
}
From ad58290603336658e94f6f786f2a658614e5f15e Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 13 May 2018 11:50:17 +0800
Subject: [PATCH 10/21] merge master
---
CHANGELOG.md | 58 +++++++++++++++++++++++++++
docs/README.md | 64 ++++++++++++++++-------------
lib/markdown/highlightLines.js | 58 +++++++++++++++++++++++++++
lib/markdown/index.js | 12 +++---
lib/markdown/line.js | 73 ----------------------------------
package.json | 2 +-
6 files changed, 160 insertions(+), 107 deletions(-)
create mode 100644 lib/markdown/highlightLines.js
delete mode 100644 lib/markdown/line.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
index de89e5788d..776636cbb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,61 @@
+
+# [0.9.0](https://github.com/vuejs/vuepress/compare/v0.8.4...v0.9.0) (2018-05-11)
+
+
+### Bug Fixes
+
+* $page is missing at 404 page ([#388](https://github.com/vuejs/vuepress/issues/388)) ([cefc8c3](https://github.com/vuejs/vuepress/commit/cefc8c3))
+* avoid the searchbox exceeded out of screen in narrow screen ([#254](https://github.com/vuejs/vuepress/issues/254)) ([8f04081](https://github.com/vuejs/vuepress/commit/8f04081))
+* code looks not good at small sreen (close: [#350](https://github.com/vuejs/vuepress/issues/350)) ([6514c8f](https://github.com/vuejs/vuepress/commit/6514c8f))
+* code looks not good at small sreen (close: [#350](https://github.com/vuejs/vuepress/issues/350)) ([d0ef06f](https://github.com/vuejs/vuepress/commit/d0ef06f))
+* dropdown overlap due to word wrapping (close: [#359](https://github.com/vuejs/vuepress/issues/359)) ([#360](https://github.com/vuejs/vuepress/issues/360)) ([c65a8b7](https://github.com/vuejs/vuepress/commit/c65a8b7))
+* duplicate slash when docs dir is not set ([#361](https://github.com/vuejs/vuepress/issues/361)) ([0c59ed5](https://github.com/vuejs/vuepress/commit/0c59ed5))
+* ensure `