marked-prismjs-linenumber 0.0.1

package/index.cjs

@@ -0,0 +1,39 @@
+const Prism = require('prismjs');
+const loadLanguages = require('prismjs/components/');
+
+function highlightWithLineNumbers(code, lang = 'plaintext') {
+    const grammar = Prism.languages[lang] || Prism.languages.plaintext;
+
+    let highlightedCode;
+    if (grammar) {
+        highlightedCode = Prism.highlight(code, grammar, lang);
+    } else {
+        highlightedCode = code
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+
+    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>`;
+}
+
+const renderer = {
+    code({ text, lang }) {
+        const trimmedCode = text.trimEnd();
+        return highlightWithLineNumbers(trimmedCode, lang || 'plaintext');
+    }
+};
+
+function init(options = {}) {
+    if (Array.isArray(options.languages)) {
+        loadLanguages(options.languages);
+    }
+}
+
+module.exports = {
+    renderer,
+    init
+};

package/index.mjs

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

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "marked-prismjs-linenumber",
+  "version": "0.0.1",
+  "description": "Return HTML with line-number structure",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.cjs",
+      "default": "./index.mjs"
+    }
+  },
+  "files": [
+    "index.mjs",
+    "index.cjs"
+  ],
+  "keywords": ["marked", "prismjs", "linenumber"],
+  "author": "Y_z00",
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,117 @@
+# marked-prism-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.
+
+[![npm version](https://img.shields.io/npm/v/marked-prism-linenumber.svg)](https://www.npmjs.com/package/marked-prism-linenumber)
+[![license](https://img.shields.io/npm/l/marked-prism-linenumber.svg)](./LICENSE)
+
+## Installation
+
+```bash
+npm install marked-prism-linenumber
+```
+
+Or with pnpm / yarn:
+
+```bash
+pnpm add marked-prism-linenumber
+yarn add marked-prism-linenumber
+```
+
+You also need `marked` and `prismjs`:
+
+```bash
+npm install marked prismjs marked-prism-linenumber
+```
+
+## Required styles
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-funky.min.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.css"
+/>
+```
+
+- `prism-funky.min.css` — the syntax theme. You can replace it with any other [Prism theme](https://prismjs.com/#themes).
+- `line-numbers.min.css` — required for the line-number gutter, `pre.line-numbers` and `.line-numbers-rows`.
+
+## Usage
+
+### 1. Register the renderer
+
+```js
+import { marked } from 'marked';
+import { renderer, init } from 'marked-prism-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 });
+
+const markdown = `
+# Example
+
+\`\`\`js
+const greeting = 'hello world';
+console.log(greeting);
+\`\`\`
+`;
+
+console.log(marked.parse(markdown));
+```
+
+### 2. Output
+
+The code block above is rendered as:
+
+```html
+<pre class="line-numbers language-js">
+  <code class="language-js">
+    <span class="token keyword">const</span> greeting <span class="token operator">=</span> ...
+    <span aria-hidden="true" class="line-numbers-rows">
+      <span></span><span></span>
+    </span>
+  </code>
+</pre>
+```
+
+Each `<span></span>` inside `.line-numbers-rows` becomes one line number via the Prism line-numbers CSS.
+
+## API
+
+### `init(options?)`
+
+Loads Prism language grammars before rendering. Call it once at startup.
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `languages` | `string[]` | — | Language names or aliases to load via `prismjs/components/index.js`. |
+
+```js
+init({ 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-prism-linenumber';
+
+marked.use({ renderer });
+```
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `code` | `string` | — | The source code to highlight. |
+| `lang` | `string` | `'plaintext'` | Prism language name or alias. |