| name | blog-html-converter |
| description | Converts Markdown blog posts to HTML with SVG diagrams. Invoke when user needs to convert blog content to HTML format for web publishing or WeChat official accounts. |
Blog HTML Converter
Overview
This skill provides comprehensive guidelines for converting Markdown blog posts to HTML format with SVG diagram support, ensuring proper display on web platforms and WeChat official accounts.
When to Invoke
- Converting Markdown blog posts to HTML format
- Creating web-ready blog content from Markdown source
- Preparing blog content for WeChat official account publishing
- Replacing ASCII diagrams with SVG images in blog posts
- Generating responsive HTML blog layouts
Workflow
1. Markdown to HTML Conversion
Basic Conversion Steps
-
Read Source Markdown
- Parse the Markdown file structure
- Identify all sections, code blocks, tables, and diagrams
- Note any special formatting requirements
-
Create HTML Structure
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Blog Title}</title>
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--bg-color: #f8fafc;
--text-color: #334155;
--code-bg: #f1f5f9;
--border-color: #e2e8f0;
--highlight-bg: #dbeafe;
}
</style>
</head>
<body>
</body>
</html>
-
Content Mapping
| Markdown Element | HTML Element | CSS Class |
|---|
# Heading | <h1> | .header h1 |
## Heading | <h2> | h2[data-section] |
### Heading | <h3> | h3 |
| Code block | <pre><code> | pre |
| Table | <table> | table |
| Blockquote | <blockquote> | blockquote |
| ASCII Diagram | <img> (SVG) | .svg-diagram |
2. ASCII to SVG Diagram Conversion
Why Convert to SVG?
- Responsive: Scales perfectly on all devices
- WeChat Compatible: Displays correctly in official accounts
- Searchable: Text within SVG is selectable
- Small Size: Compact vector format
- Professional: Clean, modern appearance
SVG Generation Guidelines
-
File Naming Convention
diagram_{description}.svg
Examples:
- diagram_three_layer.svg
- diagram_architecture_overview.svg
- diagram_data_flow.svg
-
SVG Template Structure
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {width} {height}" width="{width}px" height="{height}px">
<defs>
<style>
.bg { fill: #fafafa; }
.box { fill: #ffffff; stroke: #2563eb; stroke-width: 2; rx: 8; }
.box-alt { fill: #dbeafe; stroke: #1e40af; stroke-width: 2; rx: 8; }
.box-highlight { fill: #fef3c7; stroke: #d97706; stroke-width: 2; rx: 8; }
.title-box { fill: #2563eb; stroke: none; rx: ; }
{ : none; : ; : ; : (); }
{ : -apple-system, BlinkMacSystemFont, , Roboto, sans-serif; : ; : ; }
{ : ; : bold; : ; }
{ : ; : bold; : ; }
{ : ; : ; }
3. HTML Integration
SVG Embedding
Replace ASCII diagram divs with SVG images:
<div class="diagram">
┌─────────────────┐
│ ASCII Art │
└─────────────────┘
</div>
<div class="svg-diagram">
<img src="diagram_{name}.svg" alt="Description"
style="max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 8px;"/>
</div>
Responsive Image Styling
.svg-diagram {
margin: 25px 0;
text-align: center;
}
.svg-diagram img {
max-width: 100%;
height: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
4. Complete CSS Template
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--bg-color: #f8fafc;
--text-color: #334155;
--code-bg: #f1f5f9;
--border-color: #e2e8f0;
--highlight-bg: #dbeafe;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.8;
color: var(--text-color);
background-color: var(--bg-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
: white;
: ;
: center;
}
{
: white;
: ;
: solid (--border-color);
: sticky;
: ;
: ;
}
{ : ; }
{
: ;
: (--primary-color);
: ;
: ;
: solid (--primary-color);
}
{
: ;
: (--secondary-color);
: ;
}
pre {
: (--code-bg);
: solid (--border-color);
: ;
: ;
: auto;
: ;
: , , monospace;
: ;
}
{
: ;
: collapse;
: ;
: white;
: (,,,);
}
{
: (--primary-color);
: white;
: ;
: left;
}
{
: ;
: solid (--border-color);
}
{
: ;
: center;
}
{
: ;
: auto;
: solid (--border-color);
: ;
}
(: ) {
{ : ; }
{ : ; }
}
5. File Organization
docs/
├── blog-post.md # Source Markdown
├── blog-post.html # Generated HTML
├── diagram_1.svg # SVG diagrams
├── diagram_2.svg
└── generate_svgs.py # Optional: SVG generation script
6. Quality Checklist
Example Usage
Input: Markdown with ASCII Diagram
## Architecture
┌─────────────┐
│ Layer 1 │
└──────┬──────┘
│
▼
┌─────────────┐
│ Layer 2 │
└─────────────┘
Output: HTML with SVG
<h2>Architecture</h2>
<div class="svg-diagram">
<img src="diagram_architecture.svg" alt="System Architecture"
style="max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 8px;"/>
</div>
Best Practices
- Always use relative paths for SVG images
- Include alt text for accessibility
- Test on mobile devices before publishing
- Keep SVG files small (optimize if needed)
- Use consistent styling across all diagrams
- Version control both Markdown and HTML
- Backup SVG generation scripts for future edits
Troubleshooting
| Issue | Solution |
|---|
| SVG not displaying | Check file path and extension |
| Text cut off in SVG | Increase viewBox dimensions |
| Colors inconsistent | Use CSS variables |
| Mobile layout broken | Add viewport meta tag |
| WeChat formatting issues | Use inline styles |
