simple-customize-markdown-converter 1.0.1 → 1.0.3

package/README.md

@@ -3,12 +3,19 @@ This simple library help you convert Markdown to HTML and customize it.
 
 ## Feature
 Currently, this lib only supports:
-- Headings (#, ##, …)
+- Headings (`#, ##, …`)
 - Paragraphs
-- Bold (\*\*text\*\*)
-- Italic (\*text\* or \_text\_)
-- Inline code (\`code\`)
-- Code blocks (\`\`\`lang ... \`\`\`)
+- Bold (`\*\*text\*\*`)
+- Italic (`\*text\* or \_text\_`)
+- Strikethrough (`\~\~text\~\~`)
+- Inline code (`\`code\``)
+- Code blocks (`\`\`\`lang ... \`\`\``)
+- Quote (`> text`)
+- List (`- Item 1,...`)
+- Tasklist (`- [ ], - \[x\]`)
+- Link (`\[link\]\(url\)`)
+- Image (`\[alt\]\(url\)`)
+- Horizontal line (`---` or `***` or `___`)
 
 And customizable renderer for all elements
 

package/dist/lexer.d.ts

@@ -3,6 +3,7 @@ export default class Lexer {
     input: string;
     pos: number;
     listToken: Token[];
+    listLevelFlag: number;
     constructor(input: string);
     /**
      * Tokenize the markdown into a list of tokens.
@@ -19,5 +20,18 @@ export default class Lexer {
     private handleTextBlock;
     private handleItalic;
     private handleBold;
+    private handleStrikethrough;
     private handleInlineBlock;
+    private handleQuoteBlock;
+    private handleList;
+    private handleStartList;
+    private handleListItem;
+    private handleTaskItem;
+    private handleEndList;
+    private handleLink;
+    private handleImage;
+    private handleHorizontalLine;
+    private readUntil;
+    private peekUntil;
+    private isStartOfLine;
 }

package/dist/lexer.js

@@ -4,6 +4,8 @@ class Lexer {
     constructor(input) {
         this.pos = 0;
         this.listToken = [];
+        // Flag for handle special syntax
+        this.listLevelFlag = 0;
         this.input = input;
     }
     /**
@@ -12,11 +14,52 @@ class Lexer {
      */
     tokenize() {
         const TOKEN_HANDLER = [
+            //Handle escape character first
+            {
+                match: (lex) => lex.peek() === "\\" && lex.peek(1) !== undefined,
+                emit: (lex) => {
+                    lex.next(1);
+                    lex.handleTextBlock();
+                }
+            },
+            {
+                //Regex: if line started with at least 3 characters: -, *, _
+                match: (lex) => /^([-*_])\1{2,}$/.test(lex.peekUntil("\n").trim()) && this.getLastToken()?.type === "NewLine",
+                emit: (lex) => lex.handleHorizontalLine()
+            },
             { match: (lex) => lex.startsWith("```"), emit: (lex) => lex.handleCodeBlock() },
             { match: (lex) => lex.startsWith("**"), emit: (lex) => lex.handleBold() },
+            { match: (lex) => lex.startsWith("~~"), emit: (lex) => lex.handleStrikethrough() },
+            //For List
+            {
+                match: (lex) => lex.isStartOfLine() && /^(\s*)([-*+]) \[( |x|X)\] /.test(lex.peekUntil("\n")),
+                emit: (lex) => lex.handleList(false, true)
+            },
+            {
+                //Regex: if line started with zero or more spaces, then have - or + or * + 1 space
+                match: (lex) => lex.isStartOfLine() && /^(\s*)([-*+]) /.test(lex.peekUntil("\n")),
+                emit: (lex) => lex.handleList(false, false)
+            },
+            {
+                //Regex: if line started with zero or more spaces, then have number. character + 1 space
+                match: (lex) => lex.isStartOfLine() && /^(\s*)(\d+)\. /.test(lex.peekUntil("\n")),
+                emit: (lex) => lex.handleList(true, false)
+            },
+            {
+                match: (lex) => lex.listLevelFlag > 0 && lex.isStartOfLine() && !/^(\s*)([-+*]|\d+\.) /.test(lex.peekUntil("\n")),
+                emit: (lex) => {
+                    while (lex.listLevelFlag > 0) {
+                        lex.handleEndList();
+                    }
+                }
+            },
+            //For common syntax
             { 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() === ">", emit: (lex) => lex.handleQuoteBlock() },
+            { match: (lex) => lex.peek() === "[", emit: (lex) => lex.handleLink() },
+            { match: (lex) => lex.peek() === "!" && lex.peek(1) === "[", emit: (lex) => lex.handleImage() },
             { match: (lex) => lex.peek() === "\n", emit: (lex) => lex.listToken.push({ type: "NewLine" }) },
         ];
         while (!this.isEndOfFile()) {
@@ -33,6 +76,9 @@ class Lexer {
             }
             this.next();
         }
+        while (this.listLevelFlag > 0) {
+            this.handleEndList();
+        }
         this.listToken.push({ type: "EOF" });
         return this.listToken;
     }
@@ -56,18 +102,16 @@ class Lexer {
         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++;
+        let level = 0;
+        while (this.peek() === "#") {
+            level++;
+            this.next();
         }
-        this.next();
         if (this.peek() === " ") {
             this.next();
             this.pos--;
         }
+        this.listToken.push({ type: "Header", level });
     }
     handleCodeBlock() {
         let lang = "";
@@ -83,7 +127,7 @@ class Lexer {
             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 });
+        this.listToken.push({ "type": "CodeBlock", lang: lang.trim(), content: content.trimEnd() });
     }
     handleTextBlock() {
         const currentChar = this.peek();
@@ -100,7 +144,11 @@ class Lexer {
     }
     handleBold() {
         this.listToken.push({ type: "Bold" });
-        this.next(); //Skip *
+        this.next(); //Skip remain *
+    }
+    handleStrikethrough() {
+        this.listToken.push({ type: "Strikethrough" });
+        this.next(); //Skip remain ~
     }
     handleInlineBlock() {
         let content = "";
@@ -109,8 +157,108 @@ class Lexer {
             content += this.peek();
             this.next();
         }
-        // this.next() //Skip close block
         this.listToken.push({ "type": "InlineCode", content: content });
     }
+    handleQuoteBlock() {
+        this.listToken.push({ type: "Quote" });
+    }
+    handleList(isOrdered, isTask) {
+        const line = this.peekUntil("\n");
+        if (isTask) {
+            const m = line.match(/^(\s*)([-*+]) \[( |x|X)\] (.*)$/);
+            const indent = Math.floor(m[1].length / 2) + 1;
+            while (this.listLevelFlag < indent)
+                this.handleStartList(false);
+            while (this.listLevelFlag > indent)
+                this.handleEndList();
+            this.next(m[1].length + 4);
+            this.handleTaskItem(m[3].toLowerCase() === "x");
+        }
+        else {
+            //Regex: line started with: Group 1: zero or more spaces, group 2: (- or + or * + 1 space) or (number with . character), group 3: everything else in line
+            const m = isOrdered ? line.match(/^(\s*)(\d+)\. (.*)$/) : line.match(/^(\s*)([-*+]) (.*)$/);
+            const indent = Math.floor(m[1].length / 2) + 1; //m[1] to get the spaces in group 1
+            while (this.listLevelFlag < indent)
+                this.handleStartList(isOrdered);
+            while (this.listLevelFlag > indent)
+                this.handleEndList();
+            this.next(m[1].length + (isOrdered ? 1 : 0)); //+1 due to marker have 2 characters (e.g: 1.) instead 1 like unordered list
+            this.handleListItem();
+        }
+    }
+    handleStartList(isOrder) {
+        this.listLevelFlag++;
+        this.listToken.push({ type: "ListStart", level: this.listLevelFlag, ordered: isOrder });
+    }
+    handleListItem() {
+        this.next(); // Skip space between - and text
+        this.listToken.push({ type: "ListItem" });
+    }
+    handleTaskItem(isChecked) {
+        this.next(); // Skip space between last ] and text
+        this.listToken.push({ type: "TaskItem", checked: isChecked });
+    }
+    handleEndList() {
+        this.listLevelFlag === 0 ? 0 : this.listLevelFlag--;
+        this.listToken.push({ type: "ListEnd" });
+    }
+    handleLink() {
+        this.next(); //Skip [
+        const text = this.readUntil("]");
+        this.next(); //Skip ]
+        if (this.peek() === "(") {
+            this.next(); //Skip (
+            const url = this.readUntil(")");
+            //Don't skip ) due to auto skip on while loop
+            this.listToken.push({ type: "Link", text: text, href: url });
+        }
+        else
+            this.listToken.push({ type: "Text", value: `[${text}]` });
+    }
+    handleImage() {
+        this.next(); //Skip !
+        if (this.peek() !== "[")
+            return;
+        this.next(); //Skip [
+        const alt = this.readUntil("]");
+        this.next(); //Skip ]
+        if (this.peek() === "(") {
+            this.next(); //Skip (
+            const src = this.readUntil(")");
+            this.next(); //Skip )
+            this.listToken.push({ type: "Image", alt: alt, src: src });
+        }
+        else
+            this.listToken.push({ type: "Text", value: `![${alt}]` });
+    }
+    handleHorizontalLine() {
+        this.next(2); //Skip two first characters, remain will be skiped after loop
+        this.listToken.push({ type: "HorizontalLine" });
+    }
+    //Utilities function
+    readUntil(char) {
+        let result = "";
+        while (this.peek() !== char) {
+            result += this.peek();
+            this.next();
+        }
+        return result;
+    }
+    peekUntil(char) {
+        let result = "";
+        let i = 0;
+        while (true) {
+            const current = this.peek(i++);
+            if (current == null)
+                break;
+            if (current == char)
+                break;
+            result += current;
+        }
+        return result;
+    }
+    isStartOfLine() {
+        return this.pos === 0 || this.peek(-1) === "\n";
+    }
 }
 exports.default = Lexer;

package/dist/parser.d.ts

@@ -18,6 +18,13 @@ export declare class Parser {
     private parseHeader;
     private parseBold;
     private parseItalic;
+    private parseStrikethrough;
     private parseInlineCode;
+    private parseQuote;
+    private parseList;
+    private parseListItem;
+    private parseLink;
+    private parseImage;
+    private parseHorizontalLine;
     private parseInlineUntil;
 }

package/dist/parser.js

@@ -37,12 +37,26 @@ class Parser {
                     listNode.push(this.parseHeader());
                     break;
                 }
-                case "CodeBlock":
-                    {
-                        listNode.push(this.parseCodeBlock());
-                        this.next();
-                    }
+                case "CodeBlock": {
+                    listNode.push(this.parseCodeBlock());
                     break;
+                }
+                case "Quote": {
+                    listNode.push(this.parseQuote());
+                    break;
+                }
+                case "Image": {
+                    listNode.push(this.parseImage());
+                    break;
+                }
+                case "HorizontalLine": {
+                    listNode.push(this.parseHorizontalLine());
+                    break;
+                }
+                case "ListStart": {
+                    listNode.push(this.parseList());
+                    break;
+                }
                 case "NewLine": {
                     this.next(); // skip
                     break;
@@ -60,6 +74,7 @@ class Parser {
     }
     parseCodeBlock() {
         const tok = this.peek();
+        this.next();
         return {
             type: "CodeBlock",
             lang: tok?.type === "CodeBlock" ? tok.lang : "",
@@ -83,6 +98,10 @@ class Parser {
         this.next(); // skip marker
         return { type: "Italic", children: this.parseInlineUntil("Italic") };
     }
+    parseStrikethrough() {
+        this.next(); // skip marker
+        return { type: "Strikethrough", children: this.parseInlineUntil("Strikethrough") };
+    }
     parseInlineCode() {
         const tok = this.peek();
         this.next();
@@ -91,12 +110,113 @@ class Parser {
             content: tok?.type === "InlineCode" ? tok.content : ""
         };
     }
+    parseQuote() {
+        this.next(); //skip marker
+        return { type: "Quote", children: [{ type: "Paragraph", children: this.parseInlineUntil("NewLine") }] };
+    }
+    parseList() {
+        const tok = this.peek();
+        if (tok?.type === "ListStart") {
+            this.next(); //skip marker
+            const result = {
+                type: "List",
+                level: tok.level,
+                ordered: tok.ordered,
+                children: [],
+            };
+            let nextToken = this.peek();
+            while (!this.isEnd()) {
+                if (nextToken?.type === "ListItem" || nextToken?.type === "TaskItem") {
+                    result.children.push(this.parseListItem());
+                    nextToken = this.peek();
+                }
+                else if (nextToken?.type === "ListEnd") {
+                    this.next();
+                    break;
+                }
+                else
+                    break;
+            }
+            return result;
+        }
+        //Temp return
+        return {
+            type: "Text",
+            value: ""
+        };
+    }
+    parseListItem() {
+        const currentToken = this.peek();
+        this.next(); // skip marker   
+        const children = [];
+        while (!this.isEnd()) {
+            const tok = this.peek();
+            if (!tok)
+                break;
+            if (tok.type === "NewLine") {
+                this.next();
+                continue;
+            }
+            if (tok.type === "ListStart") {
+                children.push(this.parseList());
+                continue;
+            }
+            if (["ListItem", "TaskItem", "ListEnd"].includes(tok.type)) {
+                break;
+            }
+            children.push({
+                type: "Paragraph",
+                children: this.parseInlineUntil("NewLine")
+            });
+        }
+        return currentToken?.type === "TaskItem" ? {
+            type: "TaskItem",
+            checked: currentToken.type === "TaskItem" ? currentToken.checked : false,
+            children: children
+        } : {
+            type: "ListItem",
+            children: children
+        };
+    }
+    parseLink() {
+        const tok = this.peek();
+        this.next();
+        if (tok?.type === "Link") {
+            return {
+                type: "Link",
+                href: tok.href,
+                text: tok.text
+            };
+        }
+        return { type: "Link", href: "", text: "" };
+    }
+    parseImage() {
+        const tok = this.peek();
+        this.next();
+        if (tok?.type === "Image") {
+            return {
+                type: "Image",
+                src: tok.src,
+                alt: tok.alt
+            };
+        }
+        else
+            return { type: "Image", src: "", alt: "" };
+    }
+    parseHorizontalLine() {
+        const tok = this.peek();
+        this.next(); // skip marker
+        return { type: "HorizontalLine" };
+    }
     parseInlineUntil(stopType) {
+        const stop = Array.isArray(stopType) ? stopType : [stopType];
         const listNode = [];
-        while (!this.isEnd() && this.peek()?.type !== stopType) {
+        while (!this.isEnd()) {
             const currentNode = this.peek();
             if (!currentNode)
                 break;
+            if (stop.includes(currentNode.type))
+                break;
             switch (currentNode.type) {
                 case "Bold": {
                     listNode.push(this.parseBold());
@@ -106,12 +226,22 @@ class Parser {
                     listNode.push(this.parseItalic());
                     break;
                 }
+                case "Strikethrough": {
+                    listNode.push(this.parseStrikethrough());
+                    break;
+                }
                 case "InlineCode": {
                     listNode.push(this.parseInlineCode());
                     break;
                 }
                 case "Text": {
                     listNode.push({ type: "Text", value: currentNode.value });
+                    this.next();
+                    break;
+                }
+                case "Link": {
+                    listNode.push(this.parseLink());
+                    break;
                 }
                 default: this.next();
             }

package/dist/renderer.js

@@ -19,14 +19,27 @@ class Renderer {
     }
     handleRender(type) {
         const defaultRender = {
+            //Base structural nodes
             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>`,
+            //Container nodes
             CodeBlock: (node) => `<pre><code class="lang-${node.lang}">${this.escapeHtml(node.content)}</code></pre>`,
+            Header: (node, children) => `<h${node.level}${node.level <= 2 ? ' style="border-bottom: 1px solid #d1d9e0b3"' : ''}>${children.join("")}</h${node.level}>`,
+            Quote: (_node, children) => `<blockquote>${children.join("")}</blockquote>`,
+            List: (node, children) => node.ordered ? `<ol>${children.join("")}</ol>` : `<ul>${children.join("")}</ul>`,
+            ListItem: (_node, children) => `<li>${children.join("")}</li>`,
+            TaskItem: (node, children) => `<li><input type="checkbox" disabled ${node.checked ? "checked" : ""}>${children.join("")}</li>`,
+            //Styling nodes
             Bold: (_node, children) => `<strong>${children.join("")}</strong>`,
             Italic: (_node, children) => `<em>${children.join("")}</em>`,
-            Text: (node) => node.value
+            Strikethrough: (_node, children) => `<s>${children.join("")}</s>`,
+            InlineCode: (node) => `<code>${this.escapeHtml(node.content)}</code>`,
+            //Media nodes
+            Link: (node) => `<a href="${node.href}">${node.text}</a>`,
+            Image: (node) => `<img src="${node.src}" alt="${node.alt}"/>`,
+            //Leaf nodes
+            HorizontalLine: (_node) => `<hr>`,
+            Text: (node) => node.value,
         };
         return this.option.elements?.[type] ?? defaultRender[type];
     }

package/dist/types/node.d.ts

@@ -10,8 +10,16 @@
  * - 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`
+ * - Strikethrough: Strilethrough text
+ * - InlineCode: Inline code snippet, with it's `content`
+ * - Quote: A quote block
+ * - CodeBlock: A code block, with it's `lang` and `content`
+ * - List: A list, with it's level and children
+ * - ListItem: An item of a list, with it's children
+ * - TaskItem: An item for tasklist, with it's checked state
+ * - Link: A link, with it's `text` and `href`
+ * - Image: An image, with it's `src` and `alt`
+ * - HorizontalLine: A horizontal line
  * - Text: Raw text content.
  */
 export type Node = {
@@ -30,6 +38,9 @@ export type Node = {
 } | {
     type: "Italic";
     children: Node[];
+} | {
+    type: "Strikethrough";
+    children: Node[];
 } | {
     type: "InlineCode";
     content: string;
@@ -37,6 +48,31 @@ export type Node = {
     type: "CodeBlock";
     lang: string;
     content: string;
+} | {
+    type: "Quote";
+    children: Node[];
+} | {
+    type: "List";
+    ordered: boolean;
+    level: number;
+    children: Node[];
+} | {
+    type: "ListItem";
+    children: Node[];
+} | {
+    type: "TaskItem";
+    checked: boolean;
+    children: Node[];
+} | {
+    type: "Link";
+    href: string;
+    text: string;
+} | {
+    type: "Image";
+    src: string;
+    alt: string;
+} | {
+    type: "HorizontalLine";
 } | {
     type: "Text";
     value: string;

package/dist/types/token.d.ts

@@ -8,10 +8,19 @@
  * - 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 `_`).
+ * - Strikethrough: Strikethrough marker (`~~`)
  * - InlineCode: Inline code snippet (`` ` ``), with its `content`.
+ * - Quote: A quote block (`>`).
+ * - ListStart: Start a list
+ * - ListItem: A list's item (`* ` or `+ ` or `- ` or `number with dot`)
+ * - TaskItem: A task item in a list (`- [ ]` or `- [x]`)
+ * - ListEnd: End a list
+ * - Link: A link (`[text](url)`)
+ * - Image: An image (`![alt](url)`)
+ * - HorizontalLine: A horizontal line (`---` or `___` or `***`)
+ * - Text: Plain text content.
  * - EOF: A special token, this is the end of input.
  */
 export type Token = {
@@ -23,16 +32,41 @@ export type Token = {
     content: string;
 } | {
     type: "NewLine";
-} | {
-    type: "Text";
-    value: string;
 } | {
     type: "Bold";
 } | {
     type: "Italic";
+} | {
+    type: "Strikethrough";
 } | {
     type: "InlineCode";
     content: string;
+} | {
+    type: "Quote";
+} | {
+    type: "ListStart";
+    ordered: boolean;
+    level: number;
+} | {
+    type: "ListItem";
+} | {
+    type: "TaskItem";
+    checked: boolean;
+} | {
+    type: "ListEnd";
+} | {
+    type: "Link";
+    text: string;
+    href: string;
+} | {
+    type: "Image";
+    src: string;
+    alt: string;
+} | {
+    type: "HorizontalLine";
+} | {
+    type: "Text";
+    value: string;
 } | {
     type: "EOF";
 };

package/package.json

@@ -1,41 +1,41 @@
-{
-  "name": "simple-customize-markdown-converter",
-  "version": "1.0.1",
-  "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"
+{
+  "name": "simple-customize-markdown-converter",
+  "version": "1.0.3",
+  "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"
 }