@rokelamen/md2html 0.1.2 → 0.1.4

package/README.md

@@ -2,9 +2,17 @@
 
 A simple markdown-html conventer written in Typescript.
 
+## Goal
+
+> I create this project for learning TS and node dev, not for the purpose of building another better markdown parse engine.
+
+Markdown syntax was first promoted with the release of `markdown.pl` by John Gruber. This leads to Markdown has no explicit definition, which means how markdown is parsed to HTML highly depends on the implementation of the tool. *And I choosed a simplest way(line-by-line parsing)*
+
+To stay as close as possible to the 'Standard Markdown', [CommonMark](https://commonmark.org/) is a great reference.
+
 ## Development Log
 
-Why I choose to use `rollup`?
+Why I choose to use [`rollup`](https://rollupjs.org/)?
 
-A: I find that every time I `import` a module, I have to add extension to the module file and it is probably a `.js` ranther than `.ts`. It's wired that I must `import` a future JS file. So I decided to use a build tool(`rollup` of course) to pack all files together, which eliminates all `import` statements.
+A: Every time I `import` a module, I have to add extension to the module file and it is probably a `.js` ranther than `.ts`. It's wired that I must `import` a future JS file. So I decided to use a build tool(`rollup` of course) to pack all files together, which eliminates all `import` statements.
 

package/bin/cli.cjs

@@ -4336,16 +4336,259 @@ const {
   Help,
 } = commander;
 
+/* For markdown line pattern pair */
+const headingReg = /^\s*(#{1,6})(?:\s+|$)(.*)$/;
+const quoteReg = /^>\s*(.*)$/;
+const ulistReg = /^\s*([-+*])(?:\s+|$)(.*)$/;
+const olistReg = /^\s*(\d+)(.|\))(?:\s+|$)(.*)$/;
+const codeStartReg = /^```([^`]*)$/;
+const codeEndReg = /^```\s*$/;
+/* For text inline pattern pair */
+const inlineCodeReg = /(`+)([^`]+?)\1/g;
+const imgReg = /!\[([^\]]+)\]\(([^)\s]+)\)/g;
+const linkReg = /\[([^\]]+)\]\(([^)\s]+)\)/g;
+const boldItalicReg = /(\*\*\*|___)([^*_]+)\1/g;
+const boldReg = /(\*\*|__)([^*_]+)\1/g;
+const italicReg = /([*_])([^*_]+)\1/g;
+
+/**
+ * When a scope in Markdown is of `code` type,
+ * the content inside this area must not be parsed as either Markdown or HTML.
+ * It should be treated as pure text content.
+ * Therefore, it can not carry any semantic representation in HTML.
+ * This function is intended to remove all such representations.
+ */
+function escapeHtml(content) {
+    return content;
+}
+
+/* traverse markdown content elements and wrap text with tags at proper positions. */
+function renderToHtml(mdElements) {
+    let result = '';
+    for (const element of mdElements) {
+        const type = element.type;
+        switch (type) {
+            case "text":
+                result += `<p>${inlineParse(element.content)}</p>\n`;
+                break;
+            case "heading":
+                result += `<h${element.level}>${inlineParse(element.content)}</h${element.level}>\n`;
+                break;
+            case "quote":
+                result += `<quote>${inlineParse(element.content)}</quote>\n`;
+                break;
+            case 'ulist':
+                result += '<ul>\n' +
+                    element.items
+                        .map(item => `  <li>${inlineParse(item)}</li>`)
+                        .join('\n') +
+                    '\n</ul>\n';
+                break;
+            case 'olist':
+                result += `<ol start="${element.start}">\n` +
+                    element.items
+                        .map(item => `  <li>${inlineParse(item)}</li>`)
+                        .join('\n') +
+                    '\n</ol>\n';
+                break;
+            case "code":
+                result += '<code>\n' +
+                    element.items
+                        .map(item => `  <p>${escapeHtml(item)}</p>`)
+                        .join('\n') +
+                    '\n</code>\n';
+                break;
+        }
+    }
+    return result;
+}
+function inlineParse(content) {
+    const placeholders = [];
+    let idx = 0;
+    /* Make placeholders for code */
+    const stash = (html) => {
+        const key = `\u0000${idx}\u0000`;
+        placeholders.push(html);
+        idx++;
+        return key;
+    };
+    // 1. code
+    content = content
+        .replace(inlineCodeReg, (_, __, code) => stash(`<code>${code}</code>`));
+    // 2. link and emphasis
+    content = content
+        .replace(imgReg, '<img src="$2" alt="$1">')
+        .replace(linkReg, '<a href="$2">$1</a>')
+        .replace(boldItalicReg, '<strong><em>$2</em></strong>')
+        .replace(boldReg, '<strong>$2</strong>')
+        .replace(italicReg, '<em>$2</em>');
+    // 3. restore codes
+    content = content.replace(/\u0000(\d+)\u0000/g, (_, i) => escapeHtml(placeholders[i]));
+    return content;
+}
+
+/**
+ * Since AST-based parsing is too complex and not
+ * suitable for a personal typescript learning project,
+ * So I just let my markdown rendering engine to
+ * receive a line and analysis which type it is,
+ * and then output the corresponding format(with tags).
+ * That means it's just a simple line-by-line parsing.
+ *
+ * Some special scenes still need to be handled carefully:
+ * plain text -> <p>plain text</p>
+ * need to consider whether there is a following empty line.
+ * Cause
+ * ```
+ * plain text 1
+ * plain text 2
+ * ```
+ * is one paragraph NOT two.
+ * The same happens with quote text:
+ * ```
+ * > quote text
+ * plain text
+ * ```
+ * is one paragraph as well.
+ */
 /* The main parse logic */
-function parse(content) {
-    const source = content.trim();
-    return `<p>${source}</p>`;
+function parse(markdown) {
+    /* Split markdown content to many lines */
+    const crlfReg = /\r?\n/;
+    const lines = markdown.split(crlfReg);
+    // console.log(lines);
+    const mdElements = parseToElements(lines);
+    // console.log(mdElements);
+    const html = renderToHtml(mdElements);
+    return html;
 }
+/**
+ * Traverse lines to turn to markdown elements with different well-designed structures
+ */
+function parseToElements(lines) {
+    let lastFlowElement = null;
+    const mdElements = [];
+    /* Push last flow text element into the return value */
+    const flush = () => {
+        if (lastFlowElement) {
+            mdElements.push(lastFlowElement);
+            lastFlowElement = null;
+        }
+    };
+    for (const line of lines) {
+        // Code End
+        if (lastFlowElement?.type === 'code') {
+            if (codeEndReg.test(line)) {
+                flush();
+            }
+            else {
+                lastFlowElement.items.push(line);
+            }
+            continue;
+        }
+        // Empty line
+        if (!line.trim()) {
+            flush();
+            continue;
+        }
+        // Headings
+        const headingM = line.match(headingReg);
+        if (headingM) {
+            flush();
+            mdElements.push({
+                type: 'heading',
+                level: headingM[1].length,
+                content: headingM[2].trim()
+            });
+            continue;
+        }
+        // Quote
+        const quoteM = line.match(quoteReg);
+        if (quoteM) {
+            /* Last line is quote as well */
+            if (lastFlowElement?.type === 'quote') {
+                lastFlowElement.content += ' ' + quoteM[1].trim();
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'quote',
+                    content: quoteM[1].trim()
+                };
+            }
+            continue;
+        }
+        // Unordered List
+        const ulistM = line.match(ulistReg);
+        if (ulistM) {
+            if (lastFlowElement?.type === 'ulist' && lastFlowElement.sign === ulistM[1]) {
+                lastFlowElement.items.push(ulistM[2].trim());
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'ulist',
+                    sign: ulistM[1],
+                    items: [ulistM[2].trim()]
+                };
+            }
+            continue;
+        }
+        // Ordered List
+        const olistM = line.match(olistReg);
+        if (olistM) {
+            if (lastFlowElement?.type === 'olist' && lastFlowElement.delimiter === olistM[2]) {
+                lastFlowElement.items.push(olistM[3].trim());
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'olist',
+                    start: parseInt(olistM[1]),
+                    delimiter: olistM[2],
+                    items: [olistM[3].trim()]
+                };
+            }
+            continue;
+        }
+        // Code Start
+        const codeStartM = line.match(codeStartReg);
+        if (codeStartM) {
+            flush();
+            lastFlowElement = {
+                type: 'code',
+                lang: codeStartM[1],
+                items: []
+            };
+            continue;
+        }
+        // Fall back to plain text
+        if (lastFlowElement &&
+            ['text', 'quote', 'ulist', 'olist'].includes(lastFlowElement.type)) {
+            if (lastFlowElement.type === 'ulist' || lastFlowElement.type === 'olist') {
+                lastFlowElement.items[lastFlowElement.items.length - 1] += ' ' + line.trim();
+            }
+            else {
+                lastFlowElement.content += ' ' + line.trim();
+            }
+        }
+        else {
+            flush();
+            lastFlowElement = {
+                type: 'text',
+                content: line.trim()
+            };
+        }
+    }
+    // Avoid the last element is omitted
+    flush();
+    return mdElements;
+}
+
+var name = "@rokelamen/md2html";
+var version = "0.1.4";
+var description = "A simple tool to convert markdown content to html";
 
-// Import these from package.json in the future
-const name = 'md2html';
-const version = '0.1.2';
-const description = 'A simple tool to convert markdown content to html';
 /* Command-line tool logic */
 function command() {
     /* Set basic info */
@@ -4356,6 +4599,7 @@ function command() {
     /* Config arguments info */
     program
         .option('-f, --file <path>', 'source file path')
+        .option('-o, --output <path>', 'output file path')
         .argument('[input]', 'input content');
     /* Parse the cli options */
     program.parse(process.argv);
@@ -4381,6 +4625,11 @@ function command() {
             }
         })()
         : input;
-    console.log(parse(content));
+    const html = parse(content);
+    if (typeof options.output === 'string') {
+        fs__namespace.writeFileSync(options.output, html, 'utf-8');
+        return;
+    }
+    console.log(html);
 }
 command();

package/dist/index.js

@@ -1,7 +1,250 @@
+/* For markdown line pattern pair */
+const headingReg = /^\s*(#{1,6})(?:\s+|$)(.*)$/;
+const quoteReg = /^>\s*(.*)$/;
+const ulistReg = /^\s*([-+*])(?:\s+|$)(.*)$/;
+const olistReg = /^\s*(\d+)(.|\))(?:\s+|$)(.*)$/;
+const codeStartReg = /^```([^`]*)$/;
+const codeEndReg = /^```\s*$/;
+/* For text inline pattern pair */
+const inlineCodeReg = /(`+)([^`]+?)\1/g;
+const imgReg = /!\[([^\]]+)\]\(([^)\s]+)\)/g;
+const linkReg = /\[([^\]]+)\]\(([^)\s]+)\)/g;
+const boldItalicReg = /(\*\*\*|___)([^*_]+)\1/g;
+const boldReg = /(\*\*|__)([^*_]+)\1/g;
+const italicReg = /([*_])([^*_]+)\1/g;
+
+/**
+ * When a scope in Markdown is of `code` type,
+ * the content inside this area must not be parsed as either Markdown or HTML.
+ * It should be treated as pure text content.
+ * Therefore, it can not carry any semantic representation in HTML.
+ * This function is intended to remove all such representations.
+ */
+function escapeHtml(content) {
+    return content;
+}
+
+/* traverse markdown content elements and wrap text with tags at proper positions. */
+function renderToHtml(mdElements) {
+    let result = '';
+    for (const element of mdElements) {
+        const type = element.type;
+        switch (type) {
+            case "text":
+                result += `<p>${inlineParse(element.content)}</p>\n`;
+                break;
+            case "heading":
+                result += `<h${element.level}>${inlineParse(element.content)}</h${element.level}>\n`;
+                break;
+            case "quote":
+                result += `<quote>${inlineParse(element.content)}</quote>\n`;
+                break;
+            case 'ulist':
+                result += '<ul>\n' +
+                    element.items
+                        .map(item => `  <li>${inlineParse(item)}</li>`)
+                        .join('\n') +
+                    '\n</ul>\n';
+                break;
+            case 'olist':
+                result += `<ol start="${element.start}">\n` +
+                    element.items
+                        .map(item => `  <li>${inlineParse(item)}</li>`)
+                        .join('\n') +
+                    '\n</ol>\n';
+                break;
+            case "code":
+                result += '<code>\n' +
+                    element.items
+                        .map(item => `  <p>${escapeHtml(item)}</p>`)
+                        .join('\n') +
+                    '\n</code>\n';
+                break;
+        }
+    }
+    return result;
+}
+function inlineParse(content) {
+    const placeholders = [];
+    let idx = 0;
+    /* Make placeholders for code */
+    const stash = (html) => {
+        const key = `\u0000${idx}\u0000`;
+        placeholders.push(html);
+        idx++;
+        return key;
+    };
+    // 1. code
+    content = content
+        .replace(inlineCodeReg, (_, __, code) => stash(`<code>${code}</code>`));
+    // 2. link and emphasis
+    content = content
+        .replace(imgReg, '<img src="$2" alt="$1">')
+        .replace(linkReg, '<a href="$2">$1</a>')
+        .replace(boldItalicReg, '<strong><em>$2</em></strong>')
+        .replace(boldReg, '<strong>$2</strong>')
+        .replace(italicReg, '<em>$2</em>');
+    // 3. restore codes
+    content = content.replace(/\u0000(\d+)\u0000/g, (_, i) => escapeHtml(placeholders[i]));
+    return content;
+}
+
+/**
+ * Since AST-based parsing is too complex and not
+ * suitable for a personal typescript learning project,
+ * So I just let my markdown rendering engine to
+ * receive a line and analysis which type it is,
+ * and then output the corresponding format(with tags).
+ * That means it's just a simple line-by-line parsing.
+ *
+ * Some special scenes still need to be handled carefully:
+ * plain text -> <p>plain text</p>
+ * need to consider whether there is a following empty line.
+ * Cause
+ * ```
+ * plain text 1
+ * plain text 2
+ * ```
+ * is one paragraph NOT two.
+ * The same happens with quote text:
+ * ```
+ * > quote text
+ * plain text
+ * ```
+ * is one paragraph as well.
+ */
 /* The main parse logic */
-function parse(content) {
-    const source = content.trim();
-    return `<p>${source}</p>`;
+function parse(markdown) {
+    /* Split markdown content to many lines */
+    const crlfReg = /\r?\n/;
+    const lines = markdown.split(crlfReg);
+    // console.log(lines);
+    const mdElements = parseToElements(lines);
+    // console.log(mdElements);
+    const html = renderToHtml(mdElements);
+    return html;
+}
+/**
+ * Traverse lines to turn to markdown elements with different well-designed structures
+ */
+function parseToElements(lines) {
+    let lastFlowElement = null;
+    const mdElements = [];
+    /* Push last flow text element into the return value */
+    const flush = () => {
+        if (lastFlowElement) {
+            mdElements.push(lastFlowElement);
+            lastFlowElement = null;
+        }
+    };
+    for (const line of lines) {
+        // Code End
+        if (lastFlowElement?.type === 'code') {
+            if (codeEndReg.test(line)) {
+                flush();
+            }
+            else {
+                lastFlowElement.items.push(line);
+            }
+            continue;
+        }
+        // Empty line
+        if (!line.trim()) {
+            flush();
+            continue;
+        }
+        // Headings
+        const headingM = line.match(headingReg);
+        if (headingM) {
+            flush();
+            mdElements.push({
+                type: 'heading',
+                level: headingM[1].length,
+                content: headingM[2].trim()
+            });
+            continue;
+        }
+        // Quote
+        const quoteM = line.match(quoteReg);
+        if (quoteM) {
+            /* Last line is quote as well */
+            if (lastFlowElement?.type === 'quote') {
+                lastFlowElement.content += ' ' + quoteM[1].trim();
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'quote',
+                    content: quoteM[1].trim()
+                };
+            }
+            continue;
+        }
+        // Unordered List
+        const ulistM = line.match(ulistReg);
+        if (ulistM) {
+            if (lastFlowElement?.type === 'ulist' && lastFlowElement.sign === ulistM[1]) {
+                lastFlowElement.items.push(ulistM[2].trim());
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'ulist',
+                    sign: ulistM[1],
+                    items: [ulistM[2].trim()]
+                };
+            }
+            continue;
+        }
+        // Ordered List
+        const olistM = line.match(olistReg);
+        if (olistM) {
+            if (lastFlowElement?.type === 'olist' && lastFlowElement.delimiter === olistM[2]) {
+                lastFlowElement.items.push(olistM[3].trim());
+            }
+            else {
+                flush();
+                lastFlowElement = {
+                    type: 'olist',
+                    start: parseInt(olistM[1]),
+                    delimiter: olistM[2],
+                    items: [olistM[3].trim()]
+                };
+            }
+            continue;
+        }
+        // Code Start
+        const codeStartM = line.match(codeStartReg);
+        if (codeStartM) {
+            flush();
+            lastFlowElement = {
+                type: 'code',
+                lang: codeStartM[1],
+                items: []
+            };
+            continue;
+        }
+        // Fall back to plain text
+        if (lastFlowElement &&
+            ['text', 'quote', 'ulist', 'olist'].includes(lastFlowElement.type)) {
+            if (lastFlowElement.type === 'ulist' || lastFlowElement.type === 'olist') {
+                lastFlowElement.items[lastFlowElement.items.length - 1] += ' ' + line.trim();
+            }
+            else {
+                lastFlowElement.content += ' ' + line.trim();
+            }
+        }
+        else {
+            flush();
+            lastFlowElement = {
+                type: 'text',
+                content: line.trim()
+            };
+        }
+    }
+    // Avoid the last element is omitted
+    flush();
+    return mdElements;
 }
 
 export { parse };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rokelamen/md2html",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A simple tool to convert markdown content to html",
   "author": "rokelamen <rogerskelamen@gmail.com>",
   "license": "MIT",
@@ -32,6 +32,7 @@
   ],
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/commander": "^2.12.0",