Add remark-custom-blocks and set up an initial block for <details> and <summary> elements

Author: webstackdev

.markdownlint.json

@@ -3,6 +3,7 @@
   "MD013": false,
   "MD025": false,
   "MD033": false,
+  "MD035": false,
   "MD036": false,
   "MD041": false
 }

@types/remark-custom-blocks.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Type definitions for remark-custom-blocks
+ *
+ * The package does not currently ship TypeScript types.
+ */
+
+declare module 'remark-custom-blocks' {
+  import type { Plugin } from 'unified'
+  import type { Root } from 'mdast'
+
+  export type CustomBlockTitleRequirement = 'required' | 'optional' | 'none'
+
+  export type CustomBlockDefinition = {
+    classes?: string
+    title?: CustomBlockTitleRequirement
+    containerElement?: string
+    titleElement?: string
+    contentsElement?: string
+    details?: boolean
+  }
+
+  export type RemarkCustomBlocksOptions = Record<string, CustomBlockDefinition>
+
+  const remarkCustomBlocks: Plugin<[RemarkCustomBlocksOptions?] | [], Root>
+
+  export default remarkCustomBlocks
+}

_TODO.md

@@ -249,51 +249,40 @@ Calculations: {Math.PI * 2}.
 Components: { <MyComponent /> }
 ```
 
-### THINGS TO WIRE INTO CUSTOM COMPONENTS IN STANDARD MARKDOWN OR ADD AS COMPONENTS
+### remark-supersub
 
-### remark-text-decoration
-
-This plugin lets you apply an element to text based on a marker defined in config. It could handle subscript, superscript, underline, and highlighting.
+Subscript and superscript text
 
 ```markdown
 ~subscript~, e.g. a~i~
 
 ^superscript^, e.g. e^x^
-
-!!underline!!
-
-==marked== gives <mark>inserted</mark>
 ```
 
-### Youtube embedding
+Subscript: a~i~
 
-- `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
+Superscript: e^x^
+
+### remark-mark-plus
 
+Inserts indicated text in a pair of `<mark>` elements
 
-### remark-custom-blocks
+```markdown
+my ==marked== text
+```
 
-This plugin parses custom Markdown syntax to create new custom blocks. It takes a config object with a name for the block, CSS classes to apply to it, and whether a title is required, optional, or the block does not have a title.
+my ==marked== text
 
-These HTML elements aren't being processed by remarkGfm (they need to be raw HTML). Expandable and collapsible content using HTML <details> and <summary> elements.
+###
 
 ```markdown
-[[details | My summary]]
-| Some content for the detail
+!!underline!!
 ```
 
-```typescript
-{
-  details: {
-    classes: '',
-    title: 'required',
-    containerElement: 'details',
-    titleElement: 'summary',
-    contentsElement: 'div',
-    details: true,
-  },
-}
-```
+### 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