From 93811b5b6f9297e5d850a121145dfeeb6589e832 Mon Sep 17 00:00:00 2001 From: Matt Goldman Date: Sat, 18 Nov 2023 09:49:43 +1100 Subject: [PATCH] Add number ranges (#379) Add number rages. Updates highlight.jsx to accept ranges as well as individual numbers for line highlighting in syntax blox. --- components/highlight.jsx | 26 +++++++++++++++++--------- content/reference/fencedcode.md | 8 ++++---- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/components/highlight.jsx b/components/highlight.jsx index 4a8a11eb..dcbc116e 100644 --- a/components/highlight.jsx +++ b/components/highlight.jsx @@ -39,10 +39,20 @@ SyntaxHighlighter.registerLanguage('python', python) SyntaxHighlighter.registerLanguage('django', django) SyntaxHighlighter.registerLanguage('javascript', javascript) -const yamlToArray = (yamlString) => - yamlString.split(',').map(function (n) { - return Number(n) - }) +const rangeToArray = (rangeString) => { + return rangeString.split(',').flatMap((item) => { + const trimmedItem = item.trim(); + if (trimmedItem.includes('-')) { + const [start, end] = trimmedItem.split('-').map(s => Number(s.trim())); + if (!isNaN(start) && !isNaN(end)) { + return Array.from({ length: end - start + 1 }, (_, i) => start + i); + } + return []; + } + const number = Number(trimmedItem); + return isNaN(number) ? [] : [number]; + }); +}; const Highlight = (props) => { const themeCtx = useContext(ThemeContext) @@ -54,11 +64,9 @@ const Highlight = (props) => { const dark = props.dark === '' ? true : false const nocopy = props.nocopy === '' ? true : false const numbered = props.numbered === '' ? true : false - const markedArray = marked.split(',').map(function (n) { - return Number(n) - }) - const addedArray = yamlToArray(added) - const removedArray = yamlToArray(removed) + const markedArray = rangeToArray(marked) + const addedArray = rangeToArray(added) + const removedArray = rangeToArray(removed) const pseudoNumbered = markedArray.concat(removedArray).concat(addedArray).length > 1 && !numbered diff --git a/content/reference/fencedcode.md b/content/reference/fencedcode.md index d1484c3d..2e676a60 100644 --- a/content/reference/fencedcode.md +++ b/content/reference/fencedcode.md @@ -238,7 +238,7 @@ results in: In some cases there's a need to highlight/mark some lines and then describe each line seperately. Any number of lines can be marked by providing `marked` parameter: ~~~ -```html marked=2,5,6,10 +```html marked=2,4-6,6,10 @@ -256,7 +256,7 @@ In some cases there's a need to highlight/mark some lines and then describe each results in: -```html marked=2,5,6,10 nocopy +```html marked=2,4-6,10 nocopy @@ -276,7 +276,7 @@ results in: Sometimes you want to show which lines were added or removed from code. This can be achieved by passing related line numbers as `added` and `removed` parameters. Added lines will be highlighted with light green, removed lines with light red color. Note that displaying numbers, although works, in this case would cause a confusion as line numbers do not repeat. ~~~ -```html removed=2,8 added=3,9,10 +```html removed=2,8 added=3,6,7-10 @@ -294,7 +294,7 @@ Sometimes you want to show which lines were added or removed from code. This can results in: -```html removed=2,8 added=3,9,10 nocopy +```html removed=2,8 added=3,6,7-10 nocopy