fix(transformers): handle split # and -- comments in rose-pine theme (#1317)

Author: anandghegde

packages/transformers/src/shared/parse-comments.ts

@@ -4,6 +4,7 @@ import type { MatchAlgorithm } from './notation-transformer'
 const RE_SPLIT_COMMENT = /(\s+\/\/)/
 const RE_V1_END_COMMENT_PREFIX = /(?:\/\/|["'#]|;{1,2}|%{1,2}|--)(\s*)$/
 const RE_V3_END_COMMENT_PREFIX = /(?:\/\/|#|;{1,2}|%{1,2}|--)(\s*)$/
+const RE_LINE_COMMENT_PREFIX = /^(?:\/\/|["'#]|;{1,2}|%{1,2}|--)$/
 
 export type ParsedComments = {
   line: Element
@@ -105,14 +106,14 @@ export function parseComments(
       let match = matchToken(head.value, isLast)
       let additionalTokens: Element[] | undefined
 
-      // Handle multi-token comments (e.g., rose-pine theme splits "//" and " [!code --]")
+      // Handle multi-token comments (e.g., rose-pine theme splits "//" or "#" and " [!code --]")
       // Check if current token might be the second part of a split comment
       if (!match && i > 0 && head.value.trim().startsWith('[!code')) {
         // Look back to see if the previous token contains the comment prefix
         const prevToken = elements[i - 1]
         if (prevToken?.type === 'element') {
           const prevHead = prevToken.children.at(0)
-          if (prevHead?.type === 'text' && prevHead.value.includes('//')) {
+          if (prevHead?.type === 'text' && (prevHead.value.includes('//') || RE_LINE_COMMENT_PREFIX.test(prevHead.value.trim()))) {
             const combinedValue = prevHead.value + head.value
             const combinedMatch = matchToken(combinedValue, isLast)
             if (combinedMatch) {

packages/transformers/test/notation-diff-rose-pine.test.ts

@@ -220,4 +220,48 @@ const c = 3 // [!code highlight]`
     expect(html).toContain('diff remove')
     expect(html).not.toContain('[!code --]')
   })
+
+  it('transformerNotationDiff works with rose-pine theme for `#` and `--` comments', async () => {
+    using highlighter = await createHighlighter({
+      themes: ['rose-pine-dawn'],
+      langs: ['yaml', 'bash', 'sql'],
+    })
+
+    const cases = [
+      ['yaml', 'foo: bar # [!code ++]'],
+      ['bash', 'echo hi # [!code ++]'],
+      ['sql', 'SELECT 1 -- [!code ++]'],
+    ] as const
+
+    for (const [lang, code] of cases) {
+      const html = highlighter.codeToHtml(code, {
+        lang,
+        theme: 'rose-pine-dawn',
+        transformers: [transformerNotationDiff()],
+      })
+
+      expect(html).toContain('diff add')
+      expect(html).not.toContain('[!code ++]')
+    }
+  })
+
+  it('removes comment-only lines with `#` comments in rose-pine theme', async () => {
+    using highlighter = await createHighlighter({
+      themes: ['rose-pine'],
+      langs: ['yaml'],
+    })
+
+    const code = `# [!code highlight:2]
+foo: 1
+bar: 2`
+
+    const html = highlighter.codeToHtml(code, {
+      lang: 'yaml',
+      theme: 'rose-pine',
+      transformers: [transformerNotationHighlight()],
+    })
+
+    expect(html).not.toContain('[!code')
+    expect(html.match(/class="line highlighted"/g)).toHaveLength(2)
+  })
 })