)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Mini-Markdown Alternate Version

  1. const tagRules = {
  2.   b: '\\*\\*',
  3.   i: '_',
  4.   strike: '~~',
  5.   code: '`'
  6. };
  7. tagRules.keys = Object.keys(tagRules);
  8.  
  9. const toTag = (str, delim, tag) => str.replace(
  10.   new RegExp(
  11.     `${delim}(.+)${delim}`, 'gm'),`<${tag}>$1</${tag}>`)
  12.  
  13. const makeTags = str => 
  14.   tagRules.keys.reduce((accum, val, i) => 
  15.     toTag(accum, tagRules[val], val), str)
  16.  
  17. const markConfig = { 
  18.   emptyLine: {
  19.     check: val => val.trim() === '',
  20.     process: () => '<br>'
  21.   },
  22.   header: {
  23.     calc: val => val.split`#`.length - 1,
  24.     check: (val, result) => result > 0,
  25.     process: (val, result) => `<h${result} style="margin-bottom:0">
  26.       ${val.replace(/#/g, '')}</h${result}>`
  27.   },
  28.   hr: {
  29.     check: val => val.trim() === '***',
  30.     process: () => '<hr>'
  31.   },
  32.   li: {
  33.     check: val => val.startsWith('- '), 
  34.     process: (val, result, lastMethod) => {
  35.       const open = lastMethod != 'li' ? '<ul>' : '';
  36.       return `${open}<li>${val}</li>`;
  37.     }
  38.   }
  39. };
  40.  
  41. markConfig.keys = Object.keys(markConfig);
  42. markConfig.tail = {
  43.   process: (val, result, lastMethod) => {
  44.     const close = lastMethod == 'li' ? '</ul>' : '';
  45.     return val + close;
  46.   }
  47. };
  48.  
  49. const mark = str => {
  50.   const lines = str.split`\n`;
  51.   let lastMethod;
  52.   const newStr = lines.map((line, i) => {
  53.     const method = markConfig.keys.find(key => {
  54.       const { calc = () => {}, check } = markConfig[key];
  55.       return check(line, calc(line))
  56.     }) || 'tail'
  57.  
  58.     const { calc = () => {} } = markConfig[method];
  59.     const newLine = markConfig[method].process(line, calc(line), lastMethod);
  60.     lastMethod = method;
  61.     return newLine;
  62.   })
  63.   return newStr.join`\n`;
  64. }
  65.  
  66. // try it out
  67.  
  68. const md = document.body.appendChild(document.createElement('div'));
  69. md.style.fontFamily = 'sans-serif';
  70. md.innerHTML = `# Mini Markdown Subset
  71.  
  72. This is a subset of markdown stuff
  73.  
  74. ## It includes
  75.  
  76. - headers
  77. - **bold styles**
  78. - _italic styles, <br> multiline fine..._
  79. - \`code style\`
  80.  
  81. Other than ~~strikethrough~~ that is pretty much it... oh and **hr** tags
  82. ***
  83. ***
  84. _here is some italic text with some bold text **nested** <br>within it etc..._
  85. `;
  86. md.innerHTML = makeTags(mark(md.innerHTML));

This is another version of a post from awhile back. I was curious about readability. This has no for loops and no if statements. Personally I find it less readable than the other version…

Here is the simpler original version for comparison… this one also has nested list support.

  1.   const isLi = val => val.match(/(^\s+)?- /)
  2.  
  3.   function mark(str) {
  4.     const lines = str.split`\n`;
  5.     let wasLi = false
  6.     let lastDepth = 0;
  7.     let depth;
  8.  
  9.   for (let i = 0; i < lines.length; i++) {
  10.     let curr = lines[i];
  11.     const line = curr.trim();
  12.     const hdr = line.split`#`.length - 1;
  13.  
  14.     if (line === '') {
  15.       lines[i] = '<br>';
  16.     } else if (hdr > 0) {
  17.       lines[i] = `<h${hdr} style="margin-bottom:0">
  18.         ${curr.replace(/#/g, '')}</h${hdr}>`;
  19.     } else if (line === '***') {
  20.       lines[i] = '<hr>';
  21.     } else if (isLi(curr)) {
  22.       depth = curr.split('-')[0].length + 1;
  23.  
  24.       lines[i] = '';
  25.       if (depth < lastDepth) {
  26.         const diff = (lastDepth - depth) / 2
  27.  
  28.         lines[i] += '</ul>'.repeat(diff);
  29.         lastDepth = depth 
  30.       }
  31.  
  32.       lines[i] += `${depth > lastDepth ? '<ul>' : ''}
  33.         <li>${curr.replace(/-\s+/, '')}</li>`;
  34.  
  35.       lastDepth = depth;
  36.  
  37.       wasLi = true;
  38.     } else if (wasLi) {
  39.       lines[i - 1] = '</ul>\n'.repeat(lastDepth)
  40.       wasLi = false
  41.     }
  42.   }
  43.  
  44.   return lines.join`\n`
  45.     .replace(/\*\*(.+)\*\*/gm, '<b>$1</b>')
  46.     .replace(/_(.+)_/gm, '<i>$1</i>')
  47.     .replace(/~~(.+)~~/gm, '<strike>$1</strike>')
  48.     .replace(/`(.+)`/gm, '<code>$1</code>');
  49. }
  50.  
  51. // try it out
  52.  
  53. const md = document.body.appendChild(document.createElement('div'));
  54. md.style.fontFamily = 'sans-serif';
  55. md.innerHTML = `
  56. #Snippet Zone
  57.  
  58. This snippet renders a subset of markdown. 
  59.  
  60. - **bold** and _italic text_
  61. - lists 
  62.   - this particulate
  63.     - snippet can render 
  64.     - nested
  65.   - lists
  66.  
  67. - _**~~strikethrough text~~**_
  68.  
  69. In a real project you will probably want to use
  70. something more complete like the great <a href="https://github.com/markedjs/marked" target="blank" rel="noopener">marked.js</a> library.
  71. `;
  72. md.innerHTML = mark(md.innerHTML);
snippet.zone ~ 2021-22 /// {s/z}