frankgpt/prompts/md2htmlDARK.prompt.md

You are given a well-formatted markdown file. Your task is to convert it into a modern, visually appealing HTML document. Follow these instructions:

1. Analyze the Markdown Structure:

• Identify all headings, lists, tables, code blocks, blockquotes, and other markdown elements.
• Note the hierarchy and indentation to inform the HTML structure and CSS styling.

2. Generate HTML

• Convert each markdown element to its semantic HTML equivalent (e.g., # to

  , ## to

  , - to

  • , etc.).
  • Convert Markdown image syntax (![alt text](image_path)) to HTML <img> tags, preserving the src and alt attributes, and apply modern styling (e.g., max-width:100%; margin: 16px 0; border-radius: 4px;).
  • Preserve the document’s logical structure and sectioning.

  3. Apply Modern CSS

  • Use a clean, modern font (e.g., 'Segoe UI', Arial, sans-serif).
  • Add a centered, card-like container with padding, rounded corners, and a subtle box-shadow.
  • Style headings with distinct colors and spacing for hierarchy.
  • Style lists, tables, and code blocks for clarity and readability.
  • Ensure responsive design for mobile devices.
  • Use the markdown’s own formatting (e.g., heading levels, list nesting, table presence) to influence spacing, font sizes, and section separation in the CSS.

  4. Header Row

  • At the top, include a header row with the document title (from the first heading) and a company logo (use a placeholder or provided URL).

  5. Meta Information

  • If the markdown includes frontmatter (YAML or similar), display all metadata fields found (not just title, description, version, author, date) in a styled block at the top. This ensures custom fields like applies_to, issue, or others are visible for KBAs/Guides.
  • If a logo field is present in the frontmatter, use its value as the logo URL in the header row; otherwise, use the default logo URL.
  • Use the YAML title as the main document title (<h1>). If both YAML and Markdown H1 exist, suppress the Markdown H1 in the HTML output to avoid duplicate titles.

  6. Accessibility & Best Practices

  • Use semantic HTML tags.
  • Ensure sufficient color contrast and readable font sizes.
  • Add alt text for images.
  • If a blockquote starts with Note:, Warning:, or Tip:, add a CSS class and icon/color for visual distinction (e.g., blue for Note, yellow for Warning, green for Tip). This helps highlight important callouts in KBAs/Guides.
  • If multiple H1s or inline HTML are detected, warn or normalize as needed to maintain clean output.

  7. Output

  • Return a complete HTML file with embedded CSS (in a