Markdown

type MarkdownProps = {
  content: string;
};

function parseMarkdown(content: string): string {
  const lines = content.split("\n");
  let inCodeBlock = false;
  const codeLines: string[] = [];
  const result: string[] = [];

  for (const line of lines) {
    if (line.startsWith("```")) {
      if (!inCodeBlock) {
        inCodeBlock = true;
        codeLines.length = 0;
      } else {
        inCodeBlock = false;
        const escaped = codeLines
          .join("\n")
          .replace(/&/g, "&")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;");
        result.push('<pre class="pk-md-code-block"><code>' + escaped + "</code></pre>");
      }
      continue;
    }

    if (inCodeBlock) {
      codeLines.push(line);
      continue;
    }

    let html = line;
    if (html.startsWith("### ")) {
      html = '<h3 class="pk-md-h3">' + html.slice(4) + "</h3>";
    } else if (html.startsWith("## ")) {
      html = '<h2 class="pk-md-h2">' + html.slice(3) + "</h2>";
    } else if (html.startsWith("# ")) {
      html = '<h1 class="pk-md-h1">' + html.slice(2) + "</h1>";
    } else if (html.startsWith("- ")) {
      const inner = applyInline(html.slice(2));
      html = '<li class="pk-md-li">' + inner + "</li>";
    } else if (html.trim() === "") {
      html = "<br/>";
    } else {
      html = '<p class="pk-md-p">' + applyInline(html) + "</p>";
    }
    result.push(html);
  }

  return result.join("\n");
}

function applyInline(s: string): string {
  return s
    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
    .replace(/\*(.*?)\*/g, "<em>$1</em>")
    .replace(/`([^`]+)`/g, '<code class="pk-md-code">$1</code>')
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="pk-md-link" target="_blank" rel="noopener noreferrer">$1</a>');
}

export function Markdown({ content }: MarkdownProps) {
  return (
    <div
      className="pk-md"
      dangerouslySetInnerHTML={{ __html: parseMarkdown(content) }}
    />
  );
}