Generate a social media code screenshot using HCTI API with the optimized Akka.NET branding template. Creates professional code share images (1200x630) with syntax highlighting, logo watermark, and learnakka.net CTA.
Code snippet to format:
- Direct code block in the message
- File path to read code from
- Just the command with no args (will prompt for code)
--language "LANGUAGE": Language badge text (default: "C# / .NET")--comment "TEXT": Top comment to add context (default: none)--size small|medium|large|xlarge: Font size preset (auto-detected by default)
/generate-code-screenshot --comment "Build concurrent systems without fear"
```csharp
public class OrderActor : ReceiveActor
{
public OrderActor()
{
ReceiveAsync<ProcessOrder>(async order =>
{
await SaveToDatabase(order);
Sender.Tell(new OrderComplete());
});
}
}
/generate-code-screenshot src/MyActor.cs --language "F#" --comment "Pattern matching FTW"
/generate-code-screenshot --size xlarge
[paste your 20+ line code here]
## Process
1. **Extract and format code**:
- Parse code from message or file path
- Preserve original indentation and whitespace
- Detect line count for size recommendations
2. **Apply syntax highlighting**:
- Use C# syntax highlighting by default
- Apply HTML span tags for keywords, types, methods, strings, comments, parameters, operators
- Escape HTML entities (&, <, >)
- Maintain exact indentation using spaces
3. **Eval loop - CSS/HTML adjustment**:
- Count total lines in code snippet
- Determine optimal font size:
- < 10 lines: size-small (29px, line-height 1.5)
- 10-15 lines: DEFAULT (24px, line-height 1.4)
- 15-20 lines: size-large (21px, line-height 1.35)
- 20+ lines: size-xlarge (19px, line-height 1.32)
- If user provided --size flag, use that instead
- Calculate if code will fit in 630px height with current settings
- If doesn't fit: reduce font size 1-2px and tighten line-height
- Generate image and verify visually
- If text is cropped: adjust padding and font size, regenerate
- Maximum 3 iterations to find optimal layout
4. **Build final HTML**:
- Use base template with optimized CSS:
- Background: #0d1117 (dark GitHub theme)
- Code container: flex-start alignment, adaptive padding
- Akka.NET logo: top-right watermark, 120px, 33% opacity
- Footer: black with 3px blue border, language badge, learnakka.net CTA
- Inject syntax-highlighted code
- Inject optional top comment
- Set size class on code element
- Include Google Fonts: JetBrains Mono, Inter
5. **Generate image**:
- Make HCTI API request with:
- html: Complete HTML document
- google_fonts: 'JetBrains Mono:600,700|Inter:500,700,900'
- viewport_width: 1200
- viewport_height: 630
- device_scale: 2
- Get CDN URL from response
6. **Save and return**:
- Save generated HTML template to `~/.hcti-templates/code-screenshot-{timestamp}.html`
- Save URL to `~/.hcti-templates/screenshot-urls.txt` with metadata (timestamp, line count, size used)
- Create directory structure if it doesn't exist
- Display URL to user
- Include critique of final image (readability, fit, visual balance)
- Optionally display path to saved HTML template for debugging
## Base HTML Template
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1200, height=630">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700&family=Inter:wght@500;700;900&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1200px;
height: 630px;
font-family: 'JetBrains Mono', monospace;
background: #0d1117;
display: flex;
flex-direction: column;
}
.code-container {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: {{PADDING}};
overflow: visible;
}
.code {
font-size: {{FONT_SIZE}};
line-height: {{LINE_HEIGHT}};
color: #e6edf3;
font-weight: 600;
width: 100%;
}
.keyword { color: #ff7b72; font-weight: 700; }
.type { color: #79c0ff; font-weight: 700; }
.method { color: #d2a8ff; font-weight: 600; }
.string { color: #a5d6ff; }
.comment { color: #8b949e; font-style: italic; font-weight: 500; }
.parameter { color: #ffa657; }
.operator { color: #ff7b72; }
.logo-watermark {
position: absolute;
top: 30px;
right: 30px;
z-index: 10;
}
.logo-watermark img {
height: 120px;
width: auto;
opacity: 0.33;
}
.footer {
background: #000000;
border-top: 3px solid #1f6feb;
padding: 26px 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.lang-badge {
background: #21262d;
color: #8b949e;
padding: 7px 15px;
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.cta-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.cta-label {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #7d8590;
font-weight: 500;
letter-spacing: 0.3px;
}
.cta-link {
font-family: 'Inter', sans-serif;
font-size: 28px;
color: #58a6ff;
text-decoration: none;
font-weight: 900;
letter-spacing: -1px;
}
</style>
</head>
<body>
<div class="code-container">
<pre class="code">{{CODE}}</pre>
</div>
<div class="logo-watermark">
<img src="https://petabridge.com/images/hcti-assets/logos/akka-net/akka-net-logo.png" alt="Akka.NET">
</div>
<div class="footer">
<div class="lang-section">
<div class="lang-badge">{{LANGUAGE}}</div>
</div>
<div class="cta-section">
<span class="cta-label">Learn the Actor Model</span>
<a href="https://learnakka.net/" class="cta-link">learnakka.net</a>
</div>
</div>
</body>
</html>
| Preset | Font Size | Line Height | Padding |
|---|---|---|---|
| small | 29px | 1.5 | 60px 80px 45px 80px |
| medium (default) | 24px | 1.4 | 50px 70px 40px 70px |
| large | 21px | 1.35 | 45px 65px 35px 65px |
| xlarge | 19px | 1.32 | 45px 60px 35px 60px |
HCTI_USER_IDandHCTI_API_KEYenvironment variables MUST be set- These are read from Windows environment or standard env vars
- Command checks and fails with clear instructions if missing
- Templates saved to:
~/.hcti-templates/ - URLs saved to:
~/.hcti-templates/screenshot-urls.txt - Directory created automatically if it doesn't exist
- Each template named:
code-screenshot-YYYYMMDD-HHMMSS.html
- Prints CDN URL of generated image
- Saves URL to
~/.hcti-templates/screenshot-urls.txtwith timestamp and metadata - Provides brief critique of final image
- Images cached forever on HCTI CDN (same HTML = same URL)
- Free tier: 50 images/month
- Logo must use
https://petabridge.com/images/hcti-assets/logos/akka-net/akka-net-logo.png(verified working URL) - Always preserve exact whitespace and indentation from source code
- Eval loop ensures code fits without cropping before final generation