simple-customize-markdown-converter 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Regiko04
+
+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,67 @@
+# Simple Custom Markdown Converter
+This simple library help you convert Markdown to HTML and customize it.
+
+## Feature
+Currently, this lib only supports:
+- Headings (#, ##, …)
+- Paragraphs
+- Bold (\*\*text\*\*)
+- Italic (\*text\* or \_text\_)
+- Inline code (\`code\`)
+- Code blocks (\`\`\`lang ... \`\`\`)
+
+And customizable renderer for all elements
+
+## Install
+```bash
+npm install simple-custom-markdown-converter
+```
+
+## Usage
+#### 1. Convert markdown to HTML
+```js
+const input = `
+# Hello World
+This is **bold** and *italic*
+`
+console.log(convertMarkdownToHTML(input))
+```
+Output:
+```html
+<h1>Hello World</h1>
+<p>This is <strong>bold</strong> and <em>italic</em></p>
+```
+
+#### 2. Customize your converter
+You can also customize which HTML should be rendered which every commmon Markdown syntax.
+
+For example: change `<h1>` to `<h5>`, wrap paragraphs in `<div>`, or style bold text:
+```ts
+const renderOptions: RenderOption = {
+  elements: {
+    Header: (node, children) => {
+        //Customize for only Heading 1
+        if (node.level === 1) {
+            return `<h5 class="custom-h1">${children.join("")}</h5>`
+        }
+        //Keep all remain Heading
+        return `<h${node.level}>${children.join("")}</h${node.level}>`
+    },
+    Paragraph: (_node, children) => `<div class="paragraph">${children.join("")}</div>`,
+    Bold: (_node, children) => `<b class="bold-text">${children.join("")}</b>`,
+  }
+}
+
+const input = `
+# Title
+Hello **World**
+`
+
+console.log(convertMarkdownToHTML(input, renderOptions))
+```
+
+Output:
+```html
+<h5 class="custom-h1">Title</h5>
+<div class="paragraph">Hello <b class="bold-text">World</b></div>
+```

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { RenderOption } from "./types/renderOptions";
+export { RenderOption };
+/**
+ * Convert a Markdown string into HTML.
+ * @param input - The Markdown source string
+ * @param options - Optional rendering options
+ * @returns The rendered HTML string
+ *
+ * @example
+ * ```ts
+ * const html = convertMarkdownToHTML("Hello **world**")
+ * // => <p>Hello <strong>world</strong></p>
+ * ```
+ */
+export declare function convertMarkdownToHTML(input: string, options?: RenderOption): string;

package/dist/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMarkdownToHTML = convertMarkdownToHTML;
+const lexer_1 = __importDefault(require("./lexer"));
+const parser_1 = require("./parser");
+const renderer_1 = __importDefault(require("./renderer"));
+/**
+ * Convert a Markdown string into HTML.
+ * @param input - The Markdown source string
+ * @param options - Optional rendering options
+ * @returns The rendered HTML string
+ *
+ * @example
+ * ```ts
+ * const html = convertMarkdownToHTML("Hello **world**")
+ * // => <p>Hello <strong>world</strong></p>
+ * ```
+ */
+function convertMarkdownToHTML(input, options = {}) {
+    const tokens = new lexer_1.default(input).tokenize();
+    const nodes = new parser_1.Parser(tokens).parse();
+    return new renderer_1.default(options).render(nodes);
+}

package/dist/lexer.d.ts

@@ -0,0 +1,23 @@
+import { Token } from "./types/token";
+export default class Lexer {
+    input: string;
+    pos: number;
+    listToken: Token[];
+    constructor(input: string);
+    /**
+     * Tokenize the markdown into a list of tokens.
+     * @returns List of tokens
+     */
+    tokenize(): Token[];
+    private peek;
+    private next;
+    private startsWith;
+    private isEndOfFile;
+    private getLastToken;
+    private handleHeader;
+    private handleCodeBlock;
+    private handleTextBlock;
+    private handleItalic;
+    private handleBold;
+    private handleInlineBlock;
+}

package/dist/lexer.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Lexer {
+    constructor(input) {
+        this.pos = 0;
+        this.listToken = [];
+        this.input = input;
+    }
+    /**
+     * Tokenize the markdown into a list of tokens.
+     * @returns List of tokens
+     */
+    tokenize() {
+        const TOKEN_HANDLER = [
+            { match: (lex) => lex.startsWith("```"), emit: (lex) => lex.handleCodeBlock() },
+            { match: (lex) => lex.startsWith("**"), emit: (lex) => lex.handleBold() },
+            { match: (lex) => lex.peek() === "`", emit: (lex) => lex.handleInlineBlock() },
+            { match: (lex) => lex.peek() === "#", emit: (lex) => lex.handleHeader() },
+            { match: (lex) => lex.peek() === "*" || lex.peek() === "_", emit: (lex) => lex.handleItalic() },
+            { match: (lex) => lex.peek() === "\n", emit: (lex) => lex.listToken.push({ type: "NewLine" }) },
+        ];
+        while (!this.isEndOfFile()) {
+            let matched = false;
+            for (const handler of TOKEN_HANDLER) {
+                if (handler.match(this)) {
+                    handler.emit(this);
+                    matched = true;
+                    break;
+                }
+            }
+            if (!matched) {
+                this.handleTextBlock();
+            }
+            this.next();
+        }
+        this.listToken.push({ type: "EOF" });
+        return this.listToken;
+    }
+    //Get current character with offset
+    peek(offset = 0) {
+        const i = this.pos + offset;
+        return i < this.input.length ? this.input[i] : null;
+    }
+    //Move cursor by amount
+    next(amount = 1) {
+        this.pos += amount;
+    }
+    //If current cursor startsWith given str
+    startsWith(str) {
+        return this.input.slice(this.pos, this.pos + str.length) === str;
+    }
+    isEndOfFile() {
+        return this.pos >= this.input.length;
+    }
+    getLastToken() {
+        return this.listToken[this.listToken.length - 1];
+    }
+    handleHeader() {
+        const lastToken = this.getLastToken();
+        if (!lastToken || lastToken.type === "NewLine") {
+            this.listToken.push({ type: "Header", level: 1 });
+        }
+        else if (lastToken.type === "Header") {
+            lastToken.level++;
+        }
+        this.next();
+        if (this.peek() === " ") {
+            this.next();
+            this.pos--;
+        }
+    }
+    handleCodeBlock() {
+        let lang = "";
+        let content = "";
+        this.next(3); //Skip open block
+        while (!this.isEndOfFile() && this.peek() !== "\n") {
+            lang += this.peek();
+            this.next();
+        }
+        this.next(); //Skip \n
+        while (!this.isEndOfFile() && !this.startsWith("```")) {
+            content += this.peek();
+            this.next();
+        }
+        this.next(2); //Skip close block (due to next() after each tokenize iteration)
+        this.listToken.push({ "type": "CodeBlock", lang: lang.trim(), content: content });
+    }
+    handleTextBlock() {
+        const currentChar = this.peek();
+        if (currentChar === null)
+            return;
+        const lastToken = this.getLastToken();
+        if (lastToken?.type === "Text")
+            lastToken.value += currentChar;
+        else
+            this.listToken.push({ type: "Text", value: currentChar });
+    }
+    handleItalic() {
+        this.listToken.push({ type: "Italic" });
+    }
+    handleBold() {
+        this.listToken.push({ type: "Bold" });
+        this.next(); //Skip *
+    }
+    handleInlineBlock() {
+        let content = "";
+        this.next(); //Skip open block
+        while (!this.isEndOfFile() && !this.startsWith("`")) {
+            content += this.peek();
+            this.next();
+        }
+        // this.next() //Skip close block
+        this.listToken.push({ "type": "InlineCode", content: content });
+    }
+}
+exports.default = Lexer;

package/dist/node.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/parser.d.ts

@@ -0,0 +1,23 @@
+import { Node } from "./types/node";
+import { Token } from "./types/token";
+export declare class Parser {
+    listToken: Token[];
+    pos: number;
+    constructor(listToken: Token[]);
+    /**
+     * Parse a list token to a node
+     * @return A parsed abstract syntax tree (AST)
+     */
+    parse(): Node;
+    private peek;
+    private next;
+    private isEnd;
+    private parseBlocks;
+    private parseParagraph;
+    private parseCodeBlock;
+    private parseHeader;
+    private parseBold;
+    private parseItalic;
+    private parseInlineCode;
+    private parseInlineUntil;
+}

package/dist/parser.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parser = void 0;
+class Parser {
+    constructor(listToken) {
+        this.pos = 0;
+        this.listToken = listToken;
+    }
+    /**
+     * Parse a list token to a node
+     * @return A parsed abstract syntax tree (AST)
+     */
+    parse() {
+        return {
+            type: "Document",
+            children: this.parseBlocks()
+        };
+    }
+    peek(offset = 0) {
+        const i = this.pos + offset;
+        return i < this.listToken.length ? this.listToken[i] : null;
+    }
+    next(amount = 1) {
+        this.pos += amount;
+    }
+    isEnd() {
+        return this.peek()?.type === "EOF";
+    }
+    parseBlocks() {
+        const listNode = [];
+        while (!this.isEnd()) {
+            const currentNode = this.peek();
+            if (!currentNode)
+                break;
+            switch (currentNode.type) {
+                case "Header": {
+                    listNode.push(this.parseHeader());
+                    break;
+                }
+                case "CodeBlock":
+                    {
+                        listNode.push(this.parseCodeBlock());
+                        this.next();
+                    }
+                    break;
+                case "NewLine": {
+                    this.next(); // skip
+                    break;
+                }
+                default: listNode.push(this.parseParagraph());
+            }
+        }
+        return listNode;
+    }
+    parseParagraph() {
+        return {
+            type: "Paragraph",
+            children: this.parseInlineUntil("NewLine")
+        };
+    }
+    parseCodeBlock() {
+        const tok = this.peek();
+        return {
+            type: "CodeBlock",
+            lang: tok?.type === "CodeBlock" ? tok.lang : "",
+            content: tok?.type === "CodeBlock" ? tok.content : ""
+        };
+    }
+    parseHeader() {
+        const currentNode = this.peek();
+        this.next();
+        return {
+            type: "Header",
+            level: currentNode?.type === "Header" ? currentNode.level : 1,
+            children: this.parseInlineUntil("NewLine") //Temp
+        };
+    }
+    parseBold() {
+        this.next(); // skip marker
+        return { type: "Bold", children: this.parseInlineUntil("Bold") };
+    }
+    parseItalic() {
+        this.next(); // skip marker
+        return { type: "Italic", children: this.parseInlineUntil("Italic") };
+    }
+    parseInlineCode() {
+        const tok = this.peek();
+        this.next();
+        return {
+            type: "InlineCode",
+            content: tok?.type === "InlineCode" ? tok.content : ""
+        };
+    }
+    parseInlineUntil(stopType) {
+        const listNode = [];
+        while (!this.isEnd() && this.peek()?.type !== stopType) {
+            const currentNode = this.peek();
+            if (!currentNode)
+                break;
+            switch (currentNode.type) {
+                case "Bold": {
+                    listNode.push(this.parseBold());
+                    break;
+                }
+                case "Italic": {
+                    listNode.push(this.parseItalic());
+                    break;
+                }
+                case "InlineCode": {
+                    listNode.push(this.parseInlineCode());
+                    break;
+                }
+                case "Text": {
+                    listNode.push({ type: "Text", value: currentNode.value });
+                }
+                default: this.next();
+            }
+        }
+        this.next(); //Skip stop token
+        return listNode;
+    }
+}
+exports.Parser = Parser;

package/dist/renderOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/renderer.d.ts

@@ -0,0 +1,15 @@
+import { Node } from "./types/node";
+import { RenderOption } from "./types/renderOptions";
+export default class Renderer {
+    option: RenderOption;
+    constructor(option: RenderOption);
+    /**
+     * Render a Node (AST) to a HTML string according renderer options
+     *
+     * @param node - The abstract syntax tree (AST) from the Parser
+     * @returns The rendered HTML string.
+     */
+    render(node: Node): string;
+    private handleRender;
+    private escapeHtml;
+}

package/dist/renderer.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Renderer {
+    constructor(option) {
+        this.option = option;
+    }
+    /**
+     * Render a Node (AST) to a HTML string according renderer options
+     *
+     * @param node - The abstract syntax tree (AST) from the Parser
+     * @returns The rendered HTML string.
+     */
+    render(node) {
+        //Get proper handler type
+        const handler = this.handleRender(node.type);
+        //If node have children, recursive to handle all node's children
+        const children = "children" in node ? node.children.map((ele) => this.render(ele)) : [];
+        return handler(node, children);
+    }
+    handleRender(type) {
+        const defaultRender = {
+            Document: (_node, children) => children.join(""),
+            Paragraph: (_node, children) => `<p>${children.join("")}</p>`,
+            Header: (node, children) => `<h${node.level}>${children.join("")}</h${node.level}>`,
+            InlineCode: (node) => `<code>${this.escapeHtml(node.content)}</code>`,
+            CodeBlock: (node) => `<pre><code class="lang-${node.lang}">${this.escapeHtml(node.content)}</code></pre>`,
+            Bold: (_node, children) => `<strong>${children.join("")}</strong>`,
+            Italic: (_node, children) => `<em>${children.join("")}</em>`,
+            Text: (node) => node.value
+        };
+        return this.option.elements?.[type] ?? defaultRender[type];
+    }
+    escapeHtml(str) {
+        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+}
+exports.default = Renderer;

package/dist/token.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/node.d.ts

@@ -0,0 +1,43 @@
+/**
+ * AST (Abstract Syntax Tree) node definition.
+ *
+ * Each node represents a Markdown construct and some special nodes (Document, Paragraph).
+ * Some nodes are containers (have `children`), while others are leaf nodes (contain text).
+ *
+ * Variants:
+ * - Document: Root node, contains all other nodes.
+ * - Paragraph: A block of text, contain inline nodes.
+ * - Header: A header with given `level` (1-6)
+ * - Bold: Bold text
+ * - Italic: Italic text
+ * - InlineCode: Inline code snippet, with `content`
+ * - CodeBlock: A code block, with `lang` and `content`
+ * - Text: Raw text content.
+ */
+export type Node = {
+    type: "Document";
+    children: Node[];
+} | {
+    type: "Paragraph";
+    children: Node[];
+} | {
+    type: "Header";
+    level: number;
+    children: Node[];
+} | {
+    type: "Bold";
+    children: Node[];
+} | {
+    type: "Italic";
+    children: Node[];
+} | {
+    type: "InlineCode";
+    content: string;
+} | {
+    type: "CodeBlock";
+    lang: string;
+    content: string;
+} | {
+    type: "Text";
+    value: string;
+};

package/dist/types/node.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/renderOptions.d.ts

@@ -0,0 +1,23 @@
+import { Node } from "./node";
+/**
+ * Option to customize how AST nodes are renderes into HTML
+ *
+ * @property elements? - A mapping of AST node types to custom render functions.
+ * - The key is the `Node` type (e.g. `"Header"`, `"Text"`).
+ * - The value is a function `(node, children) => string` that define how to render HTML string. With `node` is a AST `Node`. `children` is the node's childrens
+ *
+ * @example
+ * ```ts
+ * const renderOptions: RenderOption = {
+ *   elements: {
+ *     Paragraph: (_node, children) => `<div class="paragraph">${children.join("")}</div>`,
+ *     Bold: (_node, children) => `<b class="bold-text">${children.join("")}</b>`,
+ *   }
+ * }
+ * ```
+ *
+ * @todo Update`node` type in value function from `any` to `Node`
+ */
+export type RenderOption = {
+    elements?: Partial<Record<Node["type"], (node: any, children: string[]) => string>>;
+};

package/dist/types/renderOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/token.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Token produced by the Markdown lexer.
+ *
+ * Each token represents the smallest meaningful unit of Markdown syntax
+ * before being parsed into the AST.
+ *
+ * Variants:
+ * - Header: Markdown header (`#`), with a `level` (1–6).
+ * - CodeBlock: Fenced code block (` ``` `), with optional `lang` and its `content`.
+ * - NewLine: Line break (`\n`).
+ * - Text: Plain text content.
+ * - Bold: Bold marker (`**`).
+ * - Italic: Italic marker (`*` or `_`).
+ * - InlineCode: Inline code snippet (`` ` ``), with its `content`.
+ * - EOF: A special token, this is the end of input.
+ */
+export type Token = {
+    type: "Header";
+    level: number;
+} | {
+    type: "CodeBlock";
+    lang: string;
+    content: string;
+} | {
+    type: "NewLine";
+} | {
+    type: "Text";
+    value: string;
+} | {
+    type: "Bold";
+} | {
+    type: "Italic";
+} | {
+    type: "InlineCode";
+    content: string;
+} | {
+    type: "EOF";
+};

package/dist/types/token.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "simple-customize-markdown-converter",
+  "version": "1.0.0",
+  "description": "Convert Markdown to your customize HTML",
+  "keywords": [
+    "markdown",
+    "html",
+    "converter"
+  ],
+  "author": "Regiko04",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "jest",
+    "build": "tsc",
+    "start": "ts-node src/index.ts"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.3.3",
+    "jest": "^30.1.3",
+    "ts-jest": "^29.4.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Riiichan04/simple-custom-markdown-converter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Riiichan04/simple-custom-markdown-converter/issues"
+  },
+  "homepage": "https://github.com/Riiichan04/simple-custom-markdown-converter#readme"
+}