rehype-pre-language 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ipikuka
+
+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,178 @@
+# rehype-pre-language
+
+[![NPM version][npm-image]][npm-url]
+[![Build][github-build]][github-build-url]
+![npm-typescript]
+[![License][github-license]][github-license-url]
+
+This package is a [unified][unified] ([rehype][rehype]) plugin **to add language information as a property to pre element** (compatible with new parser "[micromark][micromark]").
+
+"**unified**" is a project that transforms content with abstract syntax trees (ASTs). "**rehype**" is a tool that transforms HTML with plugins. "**hast**" stands for HTML Abstract Syntax Tree (HAST) that rehype uses.
+
+**This plugin is a rehype plugin that adds language information into "className" of the `<pre />` element that has a `<code />` element inside if the `<code />` element's className contains a language information.**
+
+## When should I use this?
+
+This plugin `rehype-pre-language` is useful if there is no language information in `<pre>` element but `<code>` element like `<pre><code className="language-typescript"></pre>`, and you need `<pre>` element to have language information.
+
+## Installation
+
+This package is suitable for ESM only. In Node.js (version 16+), install with npm:
+
+```bash
+npm install rehype-pre-language
+```
+
+or
+
+```bash
+yarn add rehype-pre-language
+```
+
+## Usage
+
+Say we have the following markdown file, `example.md`:
+
+````markdown
+```javascript
+const me = "ipikuka";
+```
+````
+
+And our module, `example.js`, looks as follows:
+
+```javascript
+import { read } from "to-vfile";
+import remark from "remark";
+import gfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypePreLanguage from "rehype-pre-language";
+
+main();
+
+async function main() {
+  const file = await remark()
+    .use(gfm)
+    .use(remarkRehype)
+    .use(rehypePreLanguage)
+    .use(rehypeStringify)
+    .process(await read("example.md"));
+
+  console.log(String(file));
+}
+```
+
+Now, running `node example.js` you see that the `<pre>` element has a "class" with language information:
+
+```html
+<pre class="javascript"><code class="language-javascript">const me = "ipikuka";
+</code></pre>
+```
+
+Without `rehype-pre-language`, the `<pre>` element wouldn't have a language information:
+
+```html
+<pre><code class="language-javascript">const me = "ipikuka";
+</code></pre>
+```
+
+## Options
+
+There is one **string** option which is a property of `<pre>` element in which the language information is going to be passed. 
+
+```typescript
+type PreLanguageOption = string; // the default is "className"
+
+use(rehypePreLanguage, PreLanguageOption);
+```
+
+### Examples:
+
+```typescript
+// adds the language information into "className" of <pre> element as default
+use(rehypePreLanguage);
+
+// adds the language information into "className" of <pre> element
+use(rehypePreLanguage, "className");
+
+// adds the language information into "data-language" property of <pre> element
+use(rehypePreLanguage, "data-language"); 
+```
+
+## Syntax tree
+
+This plugin modifies the `hast` (HTML abstract syntax tree).
+
+## Types
+
+This package is fully typed with [TypeScript][typeScript].
+
+The plugin exports the type `PreLanguageOption`.
+
+## Compatibility
+
+This plugin works with unified version 6+ and remark version 7+.
+
+## Security
+
+Use of `rehype-pre-language` involves rehype (hast), but doesn't lead to cross-site scripting (XSS) attacks.
+
+## My Plugins
+
+### My Remark Plugins
+
+- [`remark-flexible-code-titles`](https://www.npmjs.com/package/remark-flexible-code-titles)
+  – Remark plugin to add titles or/and containers for the code blocks with customizable properties
+- [`remark-flexible-containers`](https://www.npmjs.com/package/remark-flexible-containers)
+  – Remark plugin to add custom containers with customizable properties in markdown
+- [`remark-ins`](https://www.npmjs.com/package/remark-ins)
+  – Remark plugin to add `ins` element in markdown
+- [`remark-flexible-paragraphs`](https://www.npmjs.com/package/remark-flexible-paragraphs)
+  – Remark plugin to add custom paragraphs with customizable properties in markdown
+- [`remark-flexible-markers`](https://www.npmjs.com/package/remark-flexible-markers)
+  – Remark plugin to add custom `mark` element with customizable properties in markdown
+- [`remark-flexible-toc`](https://www.npmjs.com/package/remark-flexible-toc)
+  – Remark plugin to expose the table of contents via Vfile.data or via an option reference
+- [`remark-mdx-remove-esm`](https://www.npmjs.com/package/remark-mdx-remove-esm)
+  – Remark plugin to remove import and/or export statements (mdxjsEsm)
+
+### My Rehype Plugins
+
+- [`rehype-pre-language`](https://www.npmjs.com/package/rehype-pre-language)
+  – Rehype plugin to add language information as a property to `pre` element
+
+### My Recma Plugins
+
+- [`recma-mdx-escape-missing-components`](https://www.npmjs.com/package/recma-mdx-escape-missing-components)
+  – Recma plugin to set the default value `() => null` for the Components in MDX in case of missing or not provided so as not to throw an error
+- [`recma-mdx-change-props`](https://www.npmjs.com/package/recma-mdx-change-props)
+  – Recma plugin to change the `props` parameter into the `_props` in the `function _createMdxContent(props) {/* */}` in the compiled source in order to be able to use `{props.foo}` like expressions. It is useful for the `next-mdx-remote` or `next-mdx-remote-client` users in `nextjs` applications.
+
+## License
+
+[MIT][license] © ipikuka
+
+### Keywords
+
+[unified][unifiednpm] [rehype][rehypenpm] [rehype-plugin][rehypepluginnpm] [hast][hastnpm] [markdown][markdownnpm]
+
+[unified]: https://github.com/unifiedjs/unified
+[unifiednpm]: https://www.npmjs.com/search?q=keywords:unified
+[rehype]: https://github.com/rehypejs/rehype
+[rehypenpm]: https://www.npmjs.com/search?q=keywords:rehype
+[rehypepluginnpm]: https://www.npmjs.com/search?q=keywords:rehype%20plugin
+[hast]: https://github.com/syntax-tree/hast
+[hastnpm]: https://www.npmjs.com/search?q=keywords:hast
+[micromark]: https://github.com/micromark/micromark
+[typescript]: https://www.typescriptlang.org/
+[license]: https://github.com/ipikuka/rehype-pre-language/blob/main/LICENSE
+[markdownnpm]: https://www.npmjs.com/search?q=keywords:markdown
+
+[npm-url]: https://www.npmjs.com/package/rehype-pre-language
+[npm-image]: https://img.shields.io/npm/v/rehype-pre-language
+[github-license]: https://img.shields.io/github/license/ipikuka/rehype-pre-language
+[github-license-url]: https://github.com/ipikuka/rehype-pre-language/blob/master/LICENSE
+[github-build]: https://github.com/ipikuka/rehype-pre-language/actions/workflows/publish.yml/badge.svg
+[github-build-url]: https://github.com/ipikuka/rehype-pre-language/actions/workflows/publish.yml
+[npm-typescript]: https://img.shields.io/npm/types/rehype-pre-language

package/dist/esm/index.d.ts

@@ -0,0 +1,10 @@
+import type { Plugin } from "unified";
+import type { Root } from "hast";
+export type PreLanguageOption = string;
+/**
+ *
+ * This plugin adds language information as a property to pre element
+ *
+ */
+declare const plugin: Plugin<[PreLanguageOption?], Root>;
+export default plugin;

package/dist/esm/index.js

@@ -0,0 +1,58 @@
+import { visit } from "unist-util-visit";
+import { hasProperty } from "hast-util-has-property";
+/**
+ *
+ * This plugin adds language information as a property to pre element
+ *
+ */
+const plugin = (option) => {
+    const property = option ? (option.startsWith("on") ? option.slice(2) : option) : "className";
+    /**
+     * Transform.
+     *
+     * @param {Root} tree
+     *   Tree.
+     * @returns {undefined}
+     *   Nothing.
+     */
+    return (tree) => {
+        visit(tree, "element", function (node, index, parent) {
+            if (!parent)
+                return;
+            if (node.tagName !== "code")
+                return;
+            if (parent.type !== "element" || parent.tagName !== "pre")
+                return;
+            if (hasProperty(node, "className")) {
+                const filtered = node.properties.className.filter((name) => name.startsWith("language-"));
+                if (filtered.length) {
+                    let language = filtered[0].slice(9);
+                    if (language.startsWith("diff-")) {
+                        language = language.slice(5);
+                    }
+                    if (parent.properties) {
+                        if (property === "className") {
+                            if (hasProperty(parent, "className")) {
+                                parent.properties["className"] = [
+                                    ...parent.properties.className,
+                                    language,
+                                ];
+                            }
+                            else {
+                                parent.properties["className"] = [language];
+                            }
+                        }
+                        else {
+                            parent.properties[property] = language;
+                        }
+                    }
+                    else {
+                        parent.properties = { [property]: language };
+                    }
+                }
+            }
+        });
+    };
+};
+export default plugin;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD;;;;GAIG;AACH,MAAM,MAAM,GAAuC,CAAC,MAAM,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAE7F;;;;;;;OAOG;IACH,OAAO,CAAC,IAAU,EAAa,EAAE;QAC/B,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,IAAI,EAAE,KAAK,EAAE,MAAM;YAClD,IAAI,CAAC,MAAM;gBAAE,OAAO;YAEpB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;gBAAE,OAAO;YAEpC,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,KAAK,KAAK;gBAAE,OAAO;YAElE,IAAI,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,CAAC;gBACnC,MAAM,QAAQ,GAAI,IAAI,CAAC,UAAU,CAAC,SAAsB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CACvE,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAC7B,CAAC;gBAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;oBACpB,IAAI,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBAEpC,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;wBACjC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBAC/B,CAAC;oBAED,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;wBACtB,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;4BAC7B,IAAI,WAAW,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;gCACrC,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG;oCAC/B,GAAI,MAAM,CAAC,UAAU,CAAC,SAAsB;oCAC5C,QAAQ;iCACT,CAAC;4BACJ,CAAC;iCAAM,CAAC;gCACN,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;4BAC9C,CAAC;wBACH,CAAC;6BAAM,CAAC;4BACN,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAC;wBACzC,CAAC;oBACH,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,UAAU,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;oBAC/C,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "rehype-pre-language",
+  "version": "1.0.1",
+  "description": "Rehype plugin to add language information as a property to pre element",
+  "type": "module",
+  "exports": "./dist/esm/index.js",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "type-coverage": "type-coverage --ignoreAsAssertion",
+    "lint": "eslint .",
+    "prettier": "prettier --write .",
+    "test": "vitest",
+    "test:ci": "vitest --watch=false",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run test:ci && npm run type-coverage && npm run prettier && npm run lint"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "LICENSE",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ipikuka/rehype-pre-language.git"
+  },
+  "keywords": [
+    "unified",
+    "hast",
+    "rehype",
+    "markdown",
+    "plugin",
+    "rehype-plugin",
+    "rehype-pre",
+    "rehype-pre-language"
+  ],
+  "author": "ipikuka <talatkuyuk@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/ipikuka/rehype-pre-language#readme",
+  "bugs": {
+    "url": "https://github.com/ipikuka/rehype-pre-language/issues"
+  },
+  "devDependencies": {
+    "@types/dedent": "^0.7.2",
+    "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "dedent": "^0.7.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "prettier": "^3.1.1",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.0.0",
+    "rimraf": "^5.0.5",
+    "type-coverage": "^2.27.1",
+    "typescript": "^5.3.3",
+    "unified": "^11.0.4",
+    "vfile": "^6.0.1",
+    "vitest": "^1.3.0"
+  },
+  "dependencies": {
+    "@types/hast": "^3.0.4",
+    "hast-util-has-property": "^3.0.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "ignoreCatch": true,
+    "strict": true
+  },
+  "sideEffects": false
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+import type { Plugin } from "unified";
+import type { Root } from "hast";
+import { type VisitorResult, visit } from "unist-util-visit";
+import { hasProperty } from "hast-util-has-property";
+
+export type PreLanguageOption = string;
+
+/**
+ *
+ * This plugin adds language information as a property to pre element
+ *
+ */
+const plugin: Plugin<[PreLanguageOption?], Root> = (option) => {
+  const property = option ? (option.startsWith("on") ? option.slice(2) : option) : "className";
+
+  /**
+   * Transform.
+   *
+   * @param {Root} tree
+   *   Tree.
+   * @returns {undefined}
+   *   Nothing.
+   */
+  return (tree: Root): undefined => {
+    visit(tree, "element", function (node, index, parent): VisitorResult {
+      if (!parent) return;
+
+      if (node.tagName !== "code") return;
+
+      if (parent.type !== "element" || parent.tagName !== "pre") return;
+
+      if (hasProperty(node, "className")) {
+        const filtered = (node.properties.className as string[]).filter((name) =>
+          name.startsWith("language-"),
+        );
+
+        if (filtered.length) {
+          let language = filtered[0].slice(9);
+
+          if (language.startsWith("diff-")) {
+            language = language.slice(5);
+          }
+
+          if (parent.properties) {
+            if (property === "className") {
+              if (hasProperty(parent, "className")) {
+                parent.properties["className"] = [
+                  ...(parent.properties.className as string[]),
+                  language,
+                ];
+              } else {
+                parent.properties["className"] = [language];
+              }
+            } else {
+              parent.properties[property] = language;
+            }
+          } else {
+            parent.properties = { [property]: language };
+          }
+        }
+      }
+    });
+  };
+};
+
+export default plugin;