Add number ranges (#379)

Add number rages. Updates highlight.jsx to accept ranges as well as individual numbers for line highlighting in syntax blox.
amiroff · Nov 17, 2023 · 93811b5 · 93811b5 · vercel · Nov 17, 2023
1 parent 59f90e9
commit 93811b5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git 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
@@ -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
 <!DOCTYPE html>
 <html lang='en'>
 <head>
@@ -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
 <!DOCTYPE html>
 <html lang='en'>
 <head>
@@ -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
 <!DOCTYPE html>
 <html lang='en'>
 <html lang='ja'>
@@ -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
 <!DOCTYPE html>
 <html lang='en'>
 <html lang='ja'>