Add remark-mark-plus as a refactored local component to allow using ===my marked text=== to wrap the 'my marked text' in <mark> elements

Author: webstackdev

_TODO.md

@@ -249,16 +249,6 @@ Calculations: {Math.PI * 2}.
 Components: { <MyComponent /> }
 ```
 
-### remark-mark-plus
-
-Inserts indicated text in a pair of `<mark>` elements
-
-```markdown
-my ==marked== text
-```
-
-my ==marked== text
-
 ### Youtube embedding
 
 - `rehype-video` for self-hosted videos, you have to pass the video filename into the unified `process()` pipeline along with the plugin

package-lock.json

@@ -113,6 +113,7 @@
     "remark-deflist": "^1.0.0",
     "remark-emoji": "^5.0.2",
     "remark-linkify-regex": "^1.2.1",
+    "remark-mark-plus": "^1.0.21",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
     "remark-supersub": "^1.0.0",

package.json

@@ -648,6 +648,16 @@ Term 1
 
 : Definition 1
 
+### remark-mark-plus
+
+Inserts indicated text in a pair of `<mark>` elements
+
+```markdown
+my ==marked== text
+```
+
+my ==marked== text
+
 ### remark-supersub
 
 Subscript and superscript text

src/content/articles/demo/index.mdx

@@ -61,6 +61,10 @@ Subscript: a~i~
 
 Superscript: e^x^
 
+## Mark Plus (remark-mark-plus)
+
+My ==marked== text.
+
 ## Heading Anchors
 
 ### My Section Heading

src/content/test-fixtures/markdown/index.mdx

@@ -62,6 +62,9 @@ Object.defineProperty(remarkSupersub, 'name', { value: 'remarkSupersub' })
 import remarkCustomBlocks from '../markdown/plugins/remark-custom-blocks'
 Object.defineProperty(remarkCustomBlocks, 'name', { value: 'remarkCustomBlocks' })
 
+import remarkMarkPlus from '../markdown/plugins/remark-mark-plus'
+Object.defineProperty(remarkMarkPlus, 'name', { value: 'remarkMarkPlus' })
+
 import remarkLinkifyRegex from 'remark-linkify-regex'
 
 import remarkGridTables from '@adobe/remark-gridtables'
@@ -279,6 +282,8 @@ export const markdownConfig: Partial<MdxOptions> = {
     [remarkCustomBlocks, remarkCustomBlocksConfig],
     /** Subscript and superscript via ~sub~ and ^sup^ */
     remarkSupersub,
+    /** Highlights via ==marked== */
+    remarkMarkPlus,
     /** Definition lists (PHP Markdown Extra style) */
     remarkDeflist,
     /** Parse grid tables (+---+ / |...| syntax) into standard table nodes */

src/lib/config/markdown.ts

@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+/**
+ * Layer 3: E2E Tests - remarkMarkPlus
+ */
+
+import { describe, it, expect, beforeAll, afterEach } from 'vitest'
+import { cleanup, render } from '@testing-library/preact'
+import { MarkdownOutput } from '@lib/markdown/helpers/markdownLoader'
+import { processWithFullPipeline } from '@lib/markdown/helpers/processors'
+
+let html: string
+
+beforeAll(async () => {
+  const markdown = 'My ==marked== text.'
+  html = await processWithFullPipeline(markdown)
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Layer 3: E2E - remarkMarkPlus', () => {
+  it('should render mark tags', () => {
+    const { container } = render(<MarkdownOutput html={html} />)
+
+    expect(container.querySelector('mark')?.textContent).toBe('marked')
+  })
+})

src/lib/markdown/__tests__/e2e/remarkMarkPlus.spec.tsx

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import remarkMarkPlus from '@lib/markdown/plugins/remark-mark-plus'
+import { processWithAstroSettings } from '@lib/markdown/helpers/processors'
+
+describe('remark-mark-plus (Layer 2: Astro Pipeline)', () => {
+  it('should convert ==marked== into <mark>marked</mark>', async () => {
+    const markdown = 'My ==marked== text.'
+
+    const html = await processWithAstroSettings({ markdown, plugin: remarkMarkPlus })
+
+    expect(html).toContain('<mark>')
+    expect(html).toContain('marked')
+    expect(html).toContain('</mark>')
+  })
+})

src/lib/markdown/__tests__/integration/remark-mark-plus-astro.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import remarkMarkPlus from '@lib/markdown/plugins/remark-mark-plus'
+import { processIsolated } from '@lib/markdown/helpers/processors'
+
+describe('remark-mark-plus (Layer 1: Isolated)', () => {
+  it('should convert ==marked== into <mark>marked</mark>', async () => {
+    const markdown = 'My ==marked== text.'
+
+    const html = await processIsolated({ markdown, plugin: remarkMarkPlus })
+
+    expect(html).toContain('<mark>')
+    expect(html).toContain('marked')
+    expect(html).toContain('</mark>')
+  })
+})

src/lib/markdown/__tests__/units/remark-mark-plus.spec.ts

@@ -0,0 +1,96 @@
+import type { Root, Text, Parent } from 'mdast'
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+
+type MarkNode = {
+  type: 'mark'
+  children: Text[]
+  data: {
+    hName: 'mark'
+  }
+}
+
+type HasChildren = Parent & { children: unknown[] }
+
+function isHasChildren(node: unknown): node is HasChildren {
+  if (!node || typeof node !== 'object') return false
+  if (!('children' in (node as HasChildren))) return false
+  return Array.isArray((node as HasChildren).children)
+}
+
+function splitMarkedText(value: string): Array<Text | MarkNode> {
+  const parts: Array<Text | MarkNode> = []
+  let hasMark = false
+
+  let cursor = 0
+
+  while (cursor < value.length) {
+    const start = value.indexOf('==', cursor)
+    if (start === -1) {
+      const tail = value.slice(cursor)
+      if (tail) parts.push({ type: 'text', value: tail })
+      break
+    }
+
+    const before = value.slice(cursor, start)
+    if (before) parts.push({ type: 'text', value: before })
+
+    const contentStart = start + 2
+    const end = value.indexOf('==', contentStart)
+
+    // No closing delimiter; treat remainder as plain text.
+    if (end === -1) {
+      parts.push({ type: 'text', value: value.slice(start) })
+      break
+    }
+
+    const marked = value.slice(contentStart, end)
+
+    // Empty highlights are treated as plain text (avoids producing empty <mark/>).
+    if (!marked) {
+      parts.push({ type: 'text', value: '====' })
+      cursor = end + 2
+      continue
+    }
+
+    parts.push({
+      type: 'mark',
+      children: [{ type: 'text', value: marked }],
+      data: { hName: 'mark' },
+    })
+
+    hasMark = true
+
+    cursor = end + 2
+  }
+
+  // If no marks were created, keep the original text intact.
+  // This prevents breaking other token-based plugins (e.g., `<==>` in remark-replacements).
+  if (!hasMark) return [{ type: 'text', value }]
+
+  return parts
+}
+
+const remarkMarkPlus: Plugin<[], Root> = () => {
+  return tree => {
+    visit(tree, 'text', (node: Text, index, parent) => {
+      if (!parent || typeof index !== 'number') return
+      if (!isHasChildren(parent)) return
+
+      if (!node.value.includes('==')) return
+
+      const replacement = splitMarkedText(node.value)
+      if (replacement.length === 1) {
+        const first = replacement.at(0)
+        if (first?.type === 'text') return
+      }
+
+      ;(parent.children as unknown[]).splice(index, 1, ...replacement)
+
+      // Tell unist-util-visit to skip over the nodes we just inserted.
+      return index + replacement.length
+    })
+  }
+}
+
+export default remarkMarkPlus