md-tag-function.ts

/**
 * A quick way of using Markdown inside JSX: via tagged templates
 *
 * Downsides:
 * – Works completely dynamically (no static compilation)
 * – Big downside: You must escape backticks.
 *   Potential work-around in template tag function: result.replace(/∆/ug, '`')
 *
 * Upsides:
 * – Preserves line breaks (JSX doesn’t)
 * – Dedents (esp. important for Markdown)
 * – Markdown is interpreted directly (“raw”):
 *   a slash in the content is a Markdown slash, not a string literal slash
 */

import { compiler } from 'markdown-to-jsx';

/** Template tag function */
function md(templateStrings: TemplateStringsArray, ...substitutions: unknown[]) {
  let md = templateStrings.raw[0];
  for (let i=0; i<substitutions.length; i++) {
    md += String(substitutions[i]) + templateStrings.raw[i+1];
  }
  if (md.startsWith('\n')) {
    // Dedent
    const lines = md.split('\n').slice(1);
    if (lines.length > 0) {
      const afterIndent = lines[0].search(/[^\s]/);
      if (afterIndent >= 0) {
        const indent = lines[0].slice(0, afterIndent);
        md = lines
          .map(l => l.startsWith(indent) ? l.slice(indent.length) : l)
          .join('\n');
      }
    }
  }
  return compiler(md);
}

/** JSX component that uses the template tag function */
function Content() {
  return <>
    {md`
      # Useful content

      * Fee
      * Fi
      * Fo
      * Fum
    `}
  </>;
}