Konsla Hobby
konsla99 님의 블로그 입니다.
Category
개요

옵시디언의 티스토리 플러그인이 막혔기 때문에
정확히는 API가 더이상 지원하지 않기 떄문에 여러 방법을 탐구했다.
- 마크다운 모드로 작성을 지원하지만 옵시디언의 콜아웃과 같은 기능은 미구현
- 때문에 HTML로 변환하는 방법을 사용한다.
- 옵시디언 내부 HTML변환 플러그인들은 추천하지 않는다
- 사용해 보았을때 하나씩 부족했다.
- 단! 콜아웃 등은 CSS에 추가가 필요하다.
- AI를 활용한다.
방법
- 우선 AI를 준비한다.
- 로컬에 있는 옵시디언 노트를 변환하므로 CLI를 사용하는것이 편하다.
- 다음 프롬프트와 함꼐 파일을 첨부한다.
# 역할
너는 옵시디언 마크다운을 티스토리 HTML로 변환하는 전문 변환기이다.
# 지시문
내가 제공하는 [옵시디언 마크다운]을 아래 [변환 규칙]에 따라 [티스토리용 HTML]로 변환해라.
# 변환 규칙
1. **콜아웃 구조**: 마크다운 콜아웃 `[!type]` 구문은 토글 기능을 가진 `<div>` 구조로 변환한다.
- `[!type]` → `<div class="my-callout type">`
- `제목` → `<div class="my-callout-title">`
- `내용` → `<div class="my-callout-content">`
- **예시**: `[!info] 정보`는 `<div class="my-callout info"><div class="my-callout-title">...</div>...</div>`가 된다.
2. **아이콘 처리**: 콜아웃 제목(`my-callout-title`) 안에는 이모지 대신 아이콘을 위한 빈 `<span>` 태그만 삽입한다.
- `<div class="my-callout-title"><span class="my-callout-icon"></span><span>콜아웃 제목</span></div>`
3. **이미지 처리**: 마크다운 이미지 `![[파일명.png]]` 구문은 `<p>[이미지: 파일명.png]</p>` 형식의 안내 문구로 대체한다.
4. **기타 요소**: 나머지 마크다운(문단, 목록, 테이블 등)은 표준 HTML 태그로 변환한다.
5. **출력 형식**: 다른 설명 없이, 변환된 HTML 코드 블록만 출력한다.
---
[옵시디언 마크다운]
(여기에 옵시디언 마크다운 내용을 붙여넣으세요)
이미지 태그 [이미지: 파일명] 에 해당하는 사진을 티스토리에서 첨부한다.
반응형
END