marked-prismjs-linenumber 0.0.6 → 0.0.8

package/index.cjs

@@ -1,6 +1,11 @@
 const Prism = require('prismjs');
 const loadLanguages = require('prismjs/components/');
 
+/**
+ * @param {string} code
+ * @param {string} [lang]
+ * @returns {string}
+ */
 function highlightWithLineNumbers(code, lang = 'plaintext') {
     const grammar = Prism.languages[lang] || Prism.languages.plaintext;
 
@@ -17,23 +22,27 @@ function highlightWithLineNumbers(code, lang = 'plaintext') {
     const lineCount = code.split('\n').length;
     const rowsSpans = '<span></span>'.repeat(lineCount);
     const rowsWrapper = `<span aria-hidden="true" class="line-numbers-rows">${rowsSpans}</span>`;
-    return `<pre class="line-numbers language-${lang}"><code class="language-${lang}">${highlightedCode}${rowsWrapper}</code></pre>`;
+    return `<pre class="line-numbers language-${lang}"><code class="language-${lang}">${highlightedCode}</code>${rowsWrapper}</pre>`;
 }
 
 const renderer = {
+    /**
+     * @param {{ text: string; lang?: string }} args
+     * @returns {string}
+     */
     code({ text, lang }) {
         const trimmedCode = text.trimEnd();
         return highlightWithLineNumbers(trimmedCode, lang || 'plaintext');
     }
 };
 
+/**
+ * @param {{ languages?: string[] }} [options]
+ */
 function init(options = {}) {
     if (Array.isArray(options.languages)) {
         loadLanguages(options.languages);
     }
 }
 
-module.exports = {
-    renderer,
-    init
-};
+module.exports = { renderer, init };

package/index.d.ts

@@ -0,0 +1,19 @@
+export interface PrismJsLineNumberOptions {
+  languages?: string[];
+}
+
+export interface MarkedCodeArgs {
+  text: string;
+  lang?: string;
+}
+
+export interface MarkedExtension {
+  renderer: {
+    code(args: MarkedCodeArgs): string;
+  };
+}
+
+declare function linenumber(options?: PrismJsLineNumberOptions): MarkedExtension;
+
+export { linenumber };
+export default linenumber;

package/index.mjs

@@ -1,4 +1,4 @@
-import mod from './index.cjs';
-export const renderer = mod.renderer;
-export const init = mod.init;
-export default mod;
+import linenumber from './index.cjs';
+
+export default linenumber;
+export { linenumber };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "marked-prismjs-linenumber",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Return HTML with prismjs line-number structure",
-  "type": "module",
   "main": "./index.cjs",
   "module": "./index.mjs",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./index.mjs",
       "require": "./index.cjs",
       "default": "./index.mjs"
@@ -14,13 +15,22 @@
   },
   "files": [
     "index.mjs",
-    "index.cjs"
+    "index.cjs",
+    "index.d.ts"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/Yz0012/y_z00blog/tree/main/marked-extensions/marked-prismjs-linenumber"
   },
-  "keywords": ["marked", "prismjs", "linenumber"],
+  "peerDependencies": {
+    "marked": ">=4",
+    "prismjs": "^1.29.0"
+  },
+  "keywords": [
+    "marked",
+    "prismjs",
+    "linenumber"
+  ],
   "author": "Y_z00",
   "license": "MIT"
 }

package/readme.md

@@ -1,6 +1,6 @@
 # marked-prismjs-linenumber
 
-> A [marked](https://marked.js.org/) renderer that highlights Markdown code blocks with [Prism.js](https://prismjs.com/) and renders line numbers — just like the `line-numbers` plugin, but produced straight from the Markdown parser.
+> A [marked](https://marked.js.org/) extension that highlights Markdown code blocks with [Prism.js](https://prismjs.com/) and renders line numbers — just like the `line-numbers` plugin, but produced straight from the Markdown parser.
 
 [![npm version](https://img.shields.io/npm/v/marked-prismjs-linenumber.svg)](https://www.npmjs.com/package/marked-prismjs-linenumber)
 [![license](https://img.shields.io/npm/l/marked-prismjs-linenumber.svg)](./LICENSE)
@@ -42,18 +42,19 @@ npm install marked prismjs marked-prismjs-linenumber
 
 ## Usage
 
-### 1. Register the renderer
+### 1. Register the extension
 
 ```js
 import { marked } from 'marked';
-import { renderer, init } from 'marked-prismjs-linenumber';
+import linenumber from 'marked-prismjs-linenumber';
 
-// Optional: preload Prism grammars you need.
-// Anything not loaded falls back to escaped plain text.
-init({ languages: ['javascript', 'typescript', 'css', 'bash', 'json'] });
-
-// Hook the renderer into marked.
-marked.use({ renderer });
+marked.use(
+  linenumber({
+    // Optional: preload Prism grammars you need.
+    // Anything not loaded falls back to escaped plain text.
+    languages: ['javascript', 'typescript', 'css', 'bash', 'json'],
+  })
+);
 
 const markdown = `
 # Example
@@ -82,38 +83,30 @@ The code block above is rendered as:
 </pre>
 ```
 
-[Effect display](https://yz0012.github.io/y_z00blog/Post/%E6%9D%82%E9%A1%B9/%E8%A1%8C%E5%8F%B7%E7%A4%BA%E4%BE%8B.html)
-
 Each `<span></span>` inside `.line-numbers-rows` becomes one line number via the Prism line-numbers CSS.
 
 ## API
 
-### `init(options?)`
+### `linenumber(options?)`
 
-Loads Prism language grammars before rendering. Call it once at startup.
+Creates a `marked` extension. Pass it directly to `marked.use(...)`.
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
 | `languages` | `string[]` | — | Language names or aliases to load via `prismjs/components/index.js`. |
 
 ```js
-init({ languages: ['javascript', 'python', 'go'] });
+import { marked } from 'marked';
+import linenumber from 'marked-prismjs-linenumber';
+
+marked.use(linenumber({ languages: ['javascript', 'python', 'go'] }));
 ```
 
 If a language is not loaded, or an unknown `lang` is used in a fenced code block, the renderer escapes the raw code and outputs it as plain text.
 
-### `renderer`
-
-A `marked` renderer object exposing a single `code({ text, lang })` method. Pass it to `marked.use({ renderer })`.
-
-```js
-import { marked } from 'marked';
-import { renderer } from 'marked-prismjs-linenumber';
-
-marked.use({ renderer });
-```
+The extension overrides the `code({ text, lang })` renderer:
 
 | Parameter | Type | Default | Description |
 | --- | --- | --- | --- |
-| `code` | `string` | — | The source code to highlight. |
+| `text` | `string` | — | The source code to highlight. |
 | `lang` | `string` | `'plaintext'` | Prism language name or alias. |