클로드스킬마트스킬 둘러보기바로 쓰는 문장영상으로 배우기터미널 사용법스킬이 뭐예요?
 
← 목록으로

바오위 마크다운 → HTML 변환기

마크다운 파일을 인라인 CSS가 적용된 위챗 호환 스타일 HTML로 변환해 주는 스킬.

콘텐츠·글쓰기중급★ 26,102⑂ 2,884AI 점수 9/10마지막 업데이트: 2026. 9. 10.

무엇을 해주나

  • 마크다운 파일을 인라인 CSS가 적용된 HTML로 변환합니다. 위챗 공식계정 에디터에 붙여넣어도 스타일이 깨지지 않도록 설계되었습니다.
  • 4가지 테마(default, grace, simple, modern)와 13가지 프리셋 색상, 폰트 종류·크기 옵션을 지원합니다.
  • 코드 하이라이팅, 수식, 각주, GitHub 스타일 알림 블록(> [!NOTE]), 표, 루비 문자, PlantUML을 처리합니다.
  • mermaid 코드 블록은 헤드리스 Chrome으로 PNG 이미지로 렌더링하고 캐시합니다(Chrome이 없으면 안전하게 대체 출력).
  • --cite 옵션으로 외부 링크를 본문 상단 첨자 + 문서 하단 引用链接 목록으로 변환합니다(위챗 외부링크 제한 대응).
  • 결과는 입력 파일과 같은 폴더에 .html로 저장되며, 기존 파일은 타임스탬프 백업이 만들어집니다.

이런 분께 추천

  • 위챗 공식계정, 블로그, 뉴스레터에 마크다운 원고를 발행하는 콘텐츠 제작자
  • 기술 문서를 다이어그램·코드 하이라이팅과 함께 예쁘게 배포해야 하는 개발자·테크라이터
  • 매번 같은 스타일로 변환해야 해서 자동화가 필요한 운영 담당자

활용 예시

  1. "article.md를 grace 테마로 HTML로 변환해줘" → 우아한 카드형 스타일 HTML 생성
  2. "이 글을 modern 테마 + 빨강 색상으로, 외부 링크는 문말 인용으로 바꿔줘" → --theme modern --color red --cite 실행
  3. Mermaid 순서도가 포함된 기술 문서를 변환 → 다이어그램이 PNG로 구워져 위챗에서도 그대로 보임

· · · 설치 가이드 · · ·

설치 없이 지금 한 번 써보기

아래를 Claude에 붙여넣으면 설치하지 않고도 이 스킬을 그대로 씁니다.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/JimLiu/baoyu-skills/HEAD/skills/baoyu-markdown-to-html/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

Claude가 링크를 열지 못하면, 링크를 직접 열어 내용을 복사해 붙여넣으세요.

↓ 쓸 만하면 아래에서 ZIP을 받아 설치하세요. 그러면 매번 붙여넣지 않아도 알아서 작동합니다.

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. 터미널을 열고 bun --version을 실행해 봅니다. 없으면 npx(Node.js 설치 시 포함)만 있어도 동작합니다. Mermaid 다이어그램을 이미지로 만들려면 Chrome/Chromium/Edge도 설치돼 있어야 합니다.
  2. 저장소를 클론합니다: git clone https://github.com/JimLiu/baoyu-skills.git /tmp/baoyu-skills
  3. 스킬 폴더를 복사합니다: mkdir -p ~/.claude/skills && cp -r /tmp/baoyu-skills/skills/baoyu-markdown-to-html ~/.claude/skills/
  4. Claude Code를 다시 시작합니다.
  5. "article.md를 HTML로 변환해줘"처럼 요청하면 스킬이 자동 발동합니다.
  6. (선택) 매번 같은 테마를 쓰려면 ~/.baoyu-skills/baoyu-markdown-to-html/EXTEND.md에 default_theme: grace 같은 기본값을 적어 둡니다.
GitHub에서 원본 보기 ↗라이선스: MIT