---
name: md-to-mobile-book
description: Convert a large Markdown book to a responsive dark-themed HTML file with scroll position memory. Use when user wants an HTML version of their book for mobile reading.
category: anthropic
---

# MD to Mobile-Optimized HTML Book

## Trigger
User asks for an HTML version of a Markdown book/file, especially "адаптивный под телефон" (mobile-responsive) or "чтобы продолжалось с того же места" (scroll memory).

## Prerequisites
```bash
python3 -c "import markdown"  # ensure markdown library is available
```

## Steps

### 1. Convert MD to HTML body
```python
import markdown
with open('book.md', 'r') as f:
    md = f.read()
html_body = markdown.markdown(md, 
    extensions=['tables', 'fenced_code', 'codehilite', 'toc', 'nl2br'],
    extension_configs={
        'codehilite': {'css_class': 'highlight'},
        'toc': {'permalink': True}
    })
```

### 2. Add responsive dark-theme CSS
Key CSS features:
- CSS variables for colors (`--bg: #0d0d0d`, `--accent: #e67e22`)
- `clamp()` for fluid typography: `font-size: clamp(1.6em, 4vw, 2.2em)`
- `@media (max-width: 600px)` — tablet/phone breakpoint
- `@media (max-width: 380px)` — tiny phone breakpoint
- `overflow-x: auto` + `-webkit-overflow-scrolling: touch` on pre and tables
- `word-break: break-word` on headings and paragraphs
- `hyphens: auto` for better text flow
- `text-size-adjust: 100%` to prevent iOS zoom
- Print styles with `page-break-inside: avoid`

### 3. Add scroll position memory (localStorage)
```javascript
<script>(function(){
    var K='fenix1_scroll',t;
    function s(){clearTimeout(t);t=setTimeout(function(){
        try{localStorage.setItem(K,window.scrollY||window.pageYOffset)}catch(e){}
    },300)}
    function r(){try{
        var y=localStorage.getItem(K);
        if(y&&!isNaN(y)){var p=parseInt(y,10);
            if(p>0){setTimeout(function(){window.scrollTo(0,p)},200);
                     setTimeout(function(){window.scrollTo(0,p)},600);
                     setTimeout(function(){window.scrollTo(0,p)},1200)}}
    }catch(e){}}
    window.addEventListener('scroll',s,{passive:true});
    window.addEventListener('beforeunload',function(){s()});
    document.addEventListener('visibilitychange',function(){if(document.hidden)s()});
    if(document.readyState==='complete')r();else window.addEventListener('load',r)
})();</script>
```
Saves on: scroll (debounced 300ms), beforeunload, visibilitychange (mobile tab switch).
Restores with triple retry (200ms, 600ms, 1200ms) for slow mobile rendering.

### 4. Full template
```python
html = f'<!DOCTYPE html><html lang=ru><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1.0"><title>{title}</title><style>{css}</style></head><body>{html_body}<script>{js}</script></body></html>'
```

## Pitfalls
- Markdown `---` (hr) can be confused with YAML frontmatter. Use `markdown.markdown()` not a naive parser.
- Test on actual mobile device — desktop responsive mode doesn't catch all issues.
- Large books (400K+) may load slowly on old phones — no fix needed, just be aware.
- The `toc` extension adds `[TOC]` support but may create weird anchor IDs for Cyrillic headings.
