Merge pull request #15 from sdthaker/Add-support-for-image-parsing-fr…

…om-markdown-to-html

added support for image parsing from markdown to html

README.md

@@ -45,8 +45,9 @@ npm run start
 - Passing `-v` or `--version` command prints version and name of the tool.
 - <ins>_Optional Feature #2_</ins>: Passing `-o` or `--output` command followed by an output directory path, stores all the generated HTML files to that directory. If no directory exists, it'll create one. It overwrites the content of the files that match with the input file or directory of files and creates a new file if it doesn't exist in the output directory.
 - Name of the generated html file is the same as name of txt file.
-- Supports Markdown syntax.
-- Auto-detect and convert Markdown syntax to HTML.
+- Converts Markdown horizontal lines to HTML horizontal lines.
+- Converts Markdown links to HTML links.
+- Converts Markdown images to HTML images.
 - **TOML Configuration**: Instead of repeatedly passing in command-line arguments, you can now set your preferences in a TOML configuration file. Use the `-c` or `--config` flags followed by the path to your TOML configuration file.
 
 # Usages / Examples

examples/This is a Markdown Test Blog.md

@@ -23,4 +23,14 @@ There is horizontal line above this
 
 There is horizontal line below this
 ---
-There is horizontal line above this
+There is horizontal line above this
+
+This line has a link [Github](https://github.com/) plus an image ![Github](https://github.com/favicon.ico) in the same line
+
+![minimalist-1](../src/static/minimalist-1.jpg) This line has an image at the beginning
+
+This line has an image at the end ![minimalist-8](../src/static/minimalist-8.png)
+
+This line has an image in the middle ![minimalist-6](../src/static/minimalist-6.avif) of the line
+
+![minimalist-2](../src/static/minimalist-2.jpg) This line has lots of images ![minimalist-3](../src/static/minimalist-3.jpg) within itself ![minimalist-4](../src/static/minimalist-4.jpg) and more ![minimalist-5](../src/static/minimalist-5.jpg) and more ![minimalist-7](../src/static/minimalist-7.jpg)

src/utils/htmlGenerator.js

@@ -89,7 +89,7 @@ function generateHTMLForMdFile(inputFile, pathToOutputDir, lines) {
   let currentLine = '';
   let bodyArrWithHTMLTags = [];
   // Regex to match http links
-  const mdLinkGroupRegex = /\[([^\]]+)\]\(([^\)]+)\)/;
+  const mdBlobRegex = /(\!?)\[([^\]]+)\]\(([^\)]+)\)/;
 
   // Loop through bodyArr and add <p> tags to each line
   for (let i = 0; i < bodyArr.length; i++) {
@@ -103,19 +103,28 @@ function generateHTMLForMdFile(inputFile, pathToOutputDir, lines) {
         bodyArr[i + 1] === '' ||
         bodyArr[i] === '---'
       ) {
-        const mdLinks = bodyArr[i].match(new RegExp(mdLinkGroupRegex, 'g'));
-
-        if (mdLinks && mdLinks.length > 0) {
-          mdLinks.forEach((link) => {
-            const linkGroup = link.match(mdLinkGroupRegex);
-
-            if (linkGroup) {
-              const [mdLink, mdText, mdURL] = linkGroup;
-              // Replace http links with <a> tags
-              bodyArr[i] = bodyArr[i].replace(
-                mdLink,
-                `<a href="${mdURL}" target="_blank">${mdText}</a>`
-              );
+        const mdBlobs = bodyArr[i].match(new RegExp(mdBlobRegex, 'g'));
+
+        if (mdBlobs && mdBlobs.length > 0) {
+          mdBlobs.forEach((blob) => {
+            const blobGroup = blob.match(mdBlobRegex);
+
+            if (blobGroup) {
+              const [mdPhrase, mdDelimiter, mdAltText, mdURL] = blobGroup;
+
+              if (mdDelimiter === '!') {
+                // Replace md image with <img> tags
+                bodyArr[i] = bodyArr[i].replace(
+                  mdPhrase,
+                  `<img src="${mdURL}" alt="${mdAltText}" width=150 height=150 >`
+                );
+              } else {
+                // Replace md links with <a> tags
+                bodyArr[i] = bodyArr[i].replace(
+                  mdPhrase,
+                  `<a href="${mdURL}" target="_blank">${mdAltText}</a>`
+                );
+              }
             }
           });
         }