클로드스킬마트스킬 둘러보기스킬이 뭐예요?
목록으로

Markdown → HTML 변환기 (위챗 테마)

마크다운 문서를 인라인 CSS가 적용된 예쁜 HTML로 변환해 위챗 공식계정 등 어디든 붙여넣을 수 있게 해주는 스킬.

콘텐츠·글쓰기중급24,7492,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 다이어그램을 자주 쓰는 개발자

활용 예시

  1. 기본 변환: "article.md를 grace 테마 HTML로 바꿔줘" → article.html 생성, 기존 파일은 타임스탬프 백업.
  2. 브랜드 컬러 적용: --theme modern --color red로 붉은색 계열 위챗 스타일 아티클을 만들고, 첫 H1은 자동 제거해 에디터 제목과 중복되지 않게 처리.
  3. 참고 링크 정리: 외부 링크가 많은 리서치 글에 --cite를 붙여 본문은 위첨자 번호로, 문서 끝에는 引用链接 목록으로 정리.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
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자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 저장소를 내려받습니다: git clone https://github.com/JimLiu/baoyu-skills.git
  2. 스킬 폴더를 Claude 스킬 디렉터리로 복사합니다: mkdir -p ~/.claude/skills && cp -r baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/
  3. 실행 런타임을 준비합니다. bun --version이 동작하지 않으면 curl -fsSL https://bun.sh/install | bash로 설치하거나, Node.js가 있으면 npx -y bun으로 대체됩니다.
  4. (선택) Mermaid 다이어그램을 PNG로 렌더링하려면 Chrome, Chromium 또는 Edge가 설치되어 있어야 합니다. 없으면 코드블록 폴백으로 처리됩니다.
  5. Claude Code를 재시작한 뒤 "이 마크다운을 HTML로 변환해줘"라고 요청하면 스킬이 실행됩니다.
  6. (선택) 매번 같은 테마를 쓰려면 ~/.baoyu-skills/baoyu-markdown-to-html/EXTEND.mddefault_theme: modern 같은 기본값을 저장하세요.