feat(#62): add support for highlight-line comments

meganesu · Jun 19, 2024 · a081204 · a081204
1 parent 026e6a8
commit a081204
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 16 deletions.
diff --git a/src/components/code-block/index.js b/src/components/code-block/index.js
@@ -38,22 +38,50 @@ const CodeBlock = (props) => {
           language={language}
           theme={theme}
         >
-          {({ className, tokens, getLineProps, getTokenProps }) => (
-            <pre className={`${className} ${preStyles}`}>
-              {/* for each line in the code */}
-              {tokens.map((line, i) => (
-                <code
-                  {...getLineProps({ line, key: i })}
-                  className={codeStyles}
-                >
-                  {/* for each token in the line */}
-                  {line.map((token, key) => (
-                    <span {...getTokenProps({ token, key })} />
-                  ))}
-                </code>
-              ))}
-            </pre>
-          )}
+          {({ className, tokens, getLineProps, getTokenProps }) => {
+            console.log({
+              'className': className,
+              'tokens': tokens,
+              'getLineProps': getLineProps,
+              'getTokenProps': getTokenProps,
+            })
+            return (
+              <pre className={`${className} ${preStyles}`}>
+                {/* for each line in the code block */}
+                {tokens.map((line, i) => {
+                  let shouldHighlightLine = false
+
+                  const tokensToRender = []
+                  {/* for highlight-line */}
+                  line.forEach(token => {
+                    if (token.types.includes("comment") && token.content.includes("highlight-line")) {
+                      shouldHighlightLine = true
+                    }
+                    else {
+                      tokensToRender.push(token)
+                    }
+                  })
+
+                  let codeClassNames = codeStyles
+                  if (shouldHighlightLine) {
+                    codeClassNames = codeClassNames.concat(` ${highlightStyles}`)
+                  }
+
+                  return (
+                    <code
+                      {...getLineProps({ line, key: i })}
+                      className={codeClassNames}
+                    >
+                      {/* for each token in the line */}
+                      {tokensToRender.map((token, key) => (
+                        <span {...getTokenProps({ token, key })} />
+                      ))}
+                    </code>
+                  )}
+                )}
+              </pre>
+            )}
+          }
         </SyntaxHighlightWrapper>
       </div>
     </div>

diff --git a/src/components/code-block/index.test.js b/src/components/code-block/index.test.js
@@ -49,3 +49,51 @@ describe('CodeBlock component', () => {
     expect(element).toBeDefined()
   });
 });
+
+describe('CodeBlock component with line highlighting', () => {
+
+  it('supports highlight-line', async () => {
+    // Given an MDX code block using highlight-line
+    const mdFencedCodeBlock = `
+    \`\`\`javascript
+    const greeting = "Howdy" // highlight-line
+    
+    const name = "Megan" // highlight-line
+    console.log(greeting, ", my name is ", name) // highlight-line
+    
+    return true
+    \`\`\`
+    `
+
+    let MdxContent
+    const mdxModule = await evaluate(
+      mdFencedCodeBlock,
+      {
+        ...runtime,
+        development: false,
+        remarkPlugins: [remarkMdxCodeMeta],
+      }
+    )
+
+    MdxContent = mdxModule.default
+
+    // When the MDX code block is rendered
+    render(
+      <MdxContent components={{pre: CodeBlock}} />
+    )
+
+    // Then the highlight class is applied to the correct lines
+    const codeElements = screen.getAllByRole("code")
+
+    expect(codeElements[0].classList.contains("highlight")).toBe(true)
+    expect(codeElements[1].classList.contains("highlight")).toBe(false)
+    expect(codeElements[2].classList.contains("highlight")).toBe(true)
+    expect(codeElements[3].classList.contains("highlight")).toBe(true)
+    expect(codeElements[4].classList.contains("highlight")).toBe(false)
+    expect(codeElements[5].classList.contains("highlight")).toBe(false)
+  })
+
+  it.todo('supports highlight-start and highlight-end')
+
+  it.todo('supports highlight-next-line')
+})