Markdown → HTML 변환기 (위챗 테마)
마크다운 문서를 인라인 CSS가 적용된 예쁜 HTML로 변환해 위챗 공식계정 등 어디든 붙여넣을 수 있게 해주는 스킬.
콘텐츠·글쓰기중급★ 24,749⑂ 2,764AI 점수 8/10마지막 업데이트: 2026. 7. 4.
무엇을 해주나
마크다운 파일을 인라인 CSS가 삽입된 완성형 HTML로 변환합니다. 스타일시트를 별도로 불러올 수 없는 위챗 공식계정 에디터 같은 환경에서도 레이아웃이 깨지지 않습니다.
- 4가지 테마(
default,grace,simple,modern)와 13종 프리셋 색상, 폰트/글자 크기 옵션 - 코드 하이라이팅, 수식, 각주, GitHub 스타일 경고 블록(
> [!NOTE]), 루비 문자 지원 - Mermaid 다이어그램은 헤드리스 Chrome으로 PNG 렌더링 후 캐시(Chrome이 없으면 자동 폴백)
- PlantUML 다이어그램 처리
--cite옵션으로 외부 링크를 위첨자 번호 + 문서 하단 참고 링크 섹션으로 변환- 결과 경로·제목·이미지 목록을 JSON으로 출력해 후속 자동화에 연결 가능
- 프로젝트/사용자 단위
EXTEND.md로 기본 테마와 CSS 변수를 고정할 수 있음
이런 분께 추천
- 위챗 공식계정, 네이버 블로그, 뉴스레터 등 HTML 붙여넣기 기반 플랫폼에 글을 올리는 분
- 매번 같은 스타일로 문서를 배포해야 하는 기술 블로거·테크 라이터
- 문서에 Mermaid/PlantUML 다이어그램을 자주 쓰는 개발자
활용 예시
- 기본 변환: "article.md를 grace 테마 HTML로 바꿔줘" →
article.html생성, 기존 파일은 타임스탬프 백업. - 브랜드 컬러 적용:
--theme modern --color red로 붉은색 계열 위챗 스타일 아티클을 만들고, 첫 H1은 자동 제거해 에디터 제목과 중복되지 않게 처리. - 참고 링크 정리: 외부 링크가 많은 리서치 글에
--cite를 붙여 본문은 위첨자 번호로, 문서 끝에는引用链接목록으로 정리.
· · · 설치 가이드 · · ·
Claude 앱에 설치 (터미널 필요 없음)
- 아래 버튼으로 ZIP 파일을 받으세요.
- Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
- Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
Claude Code에 설치
Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요
클로드스킬마트에서 찾은 스킬을 설치해줘. GitHub 저장소 JimLiu/baoyu-skills 의 skills/baoyu-markdown-to-html 폴더를 내 ~/.claude/skills/baoyu-markdown-to-html/ 에 그대로 복사해줘. 설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.
직접 명령으로 설치하기
git clone https://github.com/JimLiu/baoyu-skills.git /tmp/baoyu-skills && mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.
- 터미널을 열고 저장소를 내려받습니다:
git clone https://github.com/JimLiu/baoyu-skills.git - 스킬 폴더를 Claude 스킬 디렉터리로 복사합니다:
mkdir -p ~/.claude/skills && cp -r baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/ - 실행 런타임을 준비합니다.
bun --version이 동작하지 않으면curl -fsSL https://bun.sh/install | bash로 설치하거나, Node.js가 있으면npx -y bun으로 대체됩니다. - (선택) Mermaid 다이어그램을 PNG로 렌더링하려면 Chrome, Chromium 또는 Edge가 설치되어 있어야 합니다. 없으면 코드블록 폴백으로 처리됩니다.
- Claude Code를 재시작한 뒤 "이 마크다운을 HTML로 변환해줘"라고 요청하면 스킬이 실행됩니다.
- (선택) 매번 같은 테마를 쓰려면
~/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md에default_theme: modern같은 기본값을 저장하세요.
GitHub에서 원본 보기 ↗라이선스: MIT