@thomd/rehype-textmarker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Thomas Dürr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# rehype-textmarker
+
+![Build][build-badge]
+
+`rehype-textmarker` is a [rehype][rehype] plugin to highlight text pattern like e.g. `TODO`, `FIXME` or to highlight text surrounded by a defined symbol, e.g. `this is ≈highlighted≈ text` by enclosing the text with a `<mark>` tag.
+
+See below example.
+
+## Usage
+
+Say we have the following file `example.md`:
+
+```markdown
+# Headline
+
+Paragraph with ≈highlighted≈ text.
+
+Inline code `console.≈log≈();`.
+
+TODO things to do later
+```
+
+and a module `example.js`:
+
+```js
+import { remark } from 'remark'
+import remarkRehype from 'remark-rehype'
+import rehypeTextmarker from 'rehype-textmarker'
+import rehypeStringify from 'rehype-stringify'
+import { read } from 'to-vfile'
+
+const file = await remark()
+  .use(remarkRehype)
+  .use(rehypeTextmarker, [
+    {
+      textPattern: /≈([^≈]+)≈/g,
+      className: 'yellow-marker',
+      tags: ['p', 'code'],
+    },
+    {
+      textPattern: /\b(TODO)\b/,
+      className: 'red-marker',
+    },
+  ])
+  .use(rehypeStringify)
+  .process(await read('example.md'))
+
+console.log(file.value)
+```
+
+then running `node example.js` yields:
+
+```html
+<h1>Headline</h1>
+<p>Paragraph with <mark class="yellow-marker">highlighted</mark> text.</p>
+<p>
+  Inline code <code>console.<mark class="yellow-marker">log</mark>();</code>.
+</p>
+<p><mark class="red-marker">TODO</mark> things to do later</p>
+```
+
+## Test
+
+    npm run test
+
+## API
+
+The default export is `rehypeTextmarker`.
+
+```js
+unified().use(rehypeTextmarker, options)
+```
+
+### Options
+
+In order to define **multiple** regular expressions, put options into a list.
+
+```js
+unified().use(rehypeTextmarker, options)
+unified().use(rehypeTextmarker, [options_1, options_2, ... ])
+```
+
+where `options` is an object with at least a `textPattern` property.
+
+The following options are available:
+
+- `textPattern` (`RegExp`, mandatory) — regular expression which must contain a **capturing group**.
+
+- `htmlTag` (`string`, optional) — HTML tag to sourround the captured string. Default is a `mark` tag.
+
+- `className` (`string`, optional) — style class to be added to the html tag. Default is no style class.
+
+- `tags` (`array` of `string`, optional) — list of tags within whose text is highlighted. It is also possible to define tags with class names, e.g. `code.language-js`  which will only highlight wihtin Javascript code blocks . Default is `p` tag.
+
+- `ignore` (`array` of `string`, optional) — list of tags to ignore. Default is `[]`.
+
+[rehype]: https://github.com/rehypejs/rehype
+[build-badge]: https://github.com/thomd/rehype-textmarker/workflows/plugin-test/badge.svg

package/index.js

@@ -0,0 +1,41 @@
+import { visit } from 'unist-util-visit'
+import { findAndReplace, defaultIgnore } from 'hast-util-find-and-replace'
+
+const rehypeTextmarker = (options) => {
+   if (options !== null) {
+      if (!Array.isArray(options)) {
+         options = [options]
+      }
+      return (tree) => {
+         for (let option of options) {
+            visit(
+               tree,
+               (node) => {
+                  const className = node.properties?.className
+                  const tags = className && Array.isArray(className) ? className.map((cls) => `${node.tagName}.${cls}`) : []
+                  return option.tags ? option.tags.some((tag) => [node.tagName, ...tags].includes(tag)) : node.tagName == 'p'
+               },
+               (node) => {
+                  findAndReplace(
+                     node,
+                     [
+                        option.textPattern,
+                        (value, capture, match) => {
+                           const markNode = {
+                              type: 'element',
+                              tagName: option.htmlTag != null ? option.htmlTag : 'mark',
+                              properties: option.className != null ? { className: [option.className] } : {},
+                              children: [{ type: 'text', value: capture }],
+                           }
+                           return markNode
+                        },
+                     ],
+                     { ignore: defaultIgnore.concat(option.ignore ? option.ignore : []) }
+                  )
+               }
+            )
+         }
+      }
+   }
+}
+export default rehypeTextmarker

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@thomd/rehype-textmarker",
+  "version": "1.0.0",
+  "description": "rehype-plugin to enclode text pattern with a mark-tag for text highlighting",
+  "keywords": [
+    "rehype-plugin",
+    "rehype",
+    "html"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "type": "module",
+  "dependencies": {
+    "hast-util-find-and-replace": "^5.0.1",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "c8": "^10.1.2",
+    "prettier": "^3.3.2",
+    "rehype-document": "^7.0.3",
+    "rehype-format": "^5.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark": "^15.0.1",
+    "remark-rehype": "^11.1.0",
+    "to-vfile": "^8.0.0"
+  },
+  "scripts": {
+    "test": "c8 --100 --reporter lcov node --conditions development test/index.js"
+  },
+  "files": [
+    "index.js"
+  ],
+  "author": "Thomas Dürr <thomduerr@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thomd/rehype-textmarker.git"
+  },
+  "bugs": "https://github.com/thomd/rehype-textmarker/issues"
+}