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

.cache/pages.json

@@ -22,16 +22,10 @@
   "contact",
   "offline",
   {
-    "privacy": [
-      "my-data"
-    ]
+    "privacy": ["my-data"]
   },
   {
-    "services": [
-      "consulting",
-      "overview",
-      "web-development"
-    ]
+    "services": ["consulting", "overview", "web-development"]
   },
   {
     "tags": [
@@ -67,4 +61,4 @@
       "typescript"
     ]
   }
-]
+]

.markdownlint.json

@@ -2,6 +2,7 @@
   "MD004": false,
   "MD013": false,
   "MD025": false,
+  "MD031": false,
   "MD033": false,
   "MD035": false,
   "MD036": false,

@types/adobe__mdast-util-gridtables.d.ts

@@ -1,7 +1,7 @@
 declare module '@adobe/mdast-util-gridtables' {
-  export const TYPE_TABLE: string
+  export const TYPE_TABLE: 'gridTable'
 
   // This is a mdast-util-to-hast handler factory; typing varies by mdast-util-to-hast version.
   // Keep it permissive to avoid coupling tests/build to internal types.
-  export function mdast2hastGridTablesHandler(..._args: Array<unknown>): unknown
+  export function mdast2hastGridTablesHandler(..._args: Array<unknown>): import('mdast-util-to-hast').Handler
 }

@types/mdast-extensions-figures-and-gridtables.d.ts

@@ -0,0 +1,27 @@
+import type { Parent } from 'unist'
+
+declare module 'mdast' {
+  /** Custom node emitted by remark-captions / remark-attribution */
+  interface Figure extends Parent {
+    type: 'figure'
+    children: Array<RootContent>
+  }
+
+  /** Custom node emitted by remark-captions / remark-attribution */
+  interface Figcaption extends Parent {
+    type: 'figcaption'
+    children: Array<PhrasingContent>
+  }
+
+  /** Custom node emitted by @adobe/remark-gridtables */
+  interface GridTable extends Parent {
+    type: 'gridTable'
+    children: Array<RootContent>
+  }
+
+  interface RootContentMap {
+    figure: Figure
+    figcaption: Figcaption
+    gridTable: GridTable
+  }
+}

@types/remark-captions.d.ts

@@ -0,0 +1,15 @@
+declare module 'remark-captions' {
+  import type { Plugin } from 'unified'
+  import type { Root } from 'mdast'
+
+  export type RemarkCaptionsExternalNodeType = 'table' | 'code'
+  export type RemarkCaptionsInternalNodeType = 'blockquote' | 'image'
+
+  export interface RemarkCaptionsOptions {
+    external?: Partial<Record<RemarkCaptionsExternalNodeType, string>>
+    internal?: Partial<Record<RemarkCaptionsInternalNodeType, string>>
+  }
+
+  const remarkCaptions: Plugin<[RemarkCaptionsOptions?], Root>
+  export default remarkCaptions
+}

_TODO.md

@@ -241,64 +241,24 @@ You can then opt-out of prefetching for individual links by setting data-astro-p
 
 - `remark-attributes` does not work because `{...}` in MDX embeds dynamic JavaScript logic or JSX components directly within Markdown content
 
+Must define escaping rules (what if the content legitimately includes `[[...]]`), and whether .md, .mdx, or both:
+
 ```markdown
-![Image](url){width=300 .centered}
+### Heading [[.my-class #my-id]]
+![Image](url) [[width=300 .centered]]
+[Link](url) [[.btn target=_blank]]
 
-Variables: # {postTitle}.
-Calculations: {Math.PI * 2}.
-Components: { <MyComponent /> }
+### Heading[[.my-class #my-id]]
+![Image](url)[[width=300 .centered]]
+[Link](url)[[.btn target=_blank]]
 ```
 
 ### Youtube embedding
 
 - `rehype-video` for self-hosted videos, you have to pass the video filename into the unified `process()` pipeline along with the plugin
 - `@hongvanpc10/rehype-embed` works the same way - you have to pass the Youtube link into the config to be processed
 
-### remark-captions
-
-By default it wraps the elements code, image, table and blockquote in a `<figure>` element, and adds a `<figcaption>` block as the last child. You can configure it to work on other elements. You supply the keyword (by default Code, Figure, Table, and Source respectively) and to add a caption you add a line right below the element with that keyword:
-
-```markdown
-> Some blockquote text that will have a caption
-Source: The caption text that will appear under the blockquote
-```
-
-### Add Twitter like mentions in markdown using @twittername syntax
-
-`markdown-it-mentions`
-
-Options object including parse function for content generated by mentions plugin using `@twittername` syntax:
-
-```javascript
-const markdownMentionsConfig = {
-  parseURL: username => {
-    return `https://twitter.com/@${username}`
-  },
-  /** adds a target="_blank" attribute if it's true and target="_self" if it's false */
-  external: true,
-}
-```
-
-### my-accessible-list-plugin
 
-```typescript
-import { visit } from 'unist-util-visit';
-
-export function myAccessibleListPlugin() {
-  return (tree) => {
-    visit(tree, 'list', (node) => {
-      // Example: Add an aria-label to lists
-      if (!node.data) {
-        node.data = {}
-      }
-      if (!node.data.hProperties) {
-        node.data.hProperties = {}
-      }
-      node.data.hProperties['aria-label'] = 'List of items'; // Customize this
-    })
-  }
-}
-```
 
 ### Custom version of the code block integration from Astro Docs. "Beautiful code blocks for your Astro site". Applied to the code blocks created in `.mdx` files
 
@@ -341,6 +301,8 @@ const markdownCodeCopyConfig = {
 }
 ```
 
+
+
 ## Math - LATEX / KATEX
 
 ### Exclude Mermaid, Latex, etc. from Shiki syntax highlighting in code blocks

package-lock.json

@@ -109,6 +109,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "remark-breaks": "^4.0.0",
+    "remark-captions": "^2.2.4",
     "remark-custom-blocks": "^2.6.1",
     "remark-deflist": "^1.0.0",
     "remark-emoji": "^5.0.2",