# Obsidian Publish 이미지 줌인

- 저자: chorr
- URL: https://8log.kr/obsidian-publish-image-zoom
- 날짜: 2024-05-23

---

Obsidian Publish 마크다운에서 스크립트 실행을 별도 지원하지 않는다. 대신 `publish.js` 파일을 활용하여 실행이 가능하다.

Obsidian Publish 페이지(document) 렌더링은 html에서 담당하지 않고 별도 렌더러를 거쳐서 그려진다. 때문에 스크립트가 로딩될 때 일반적인 라이브러리 초기화 과정으로 동작이 불가능했다.

이미지 줌인 라이브러리 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 사용하기로 결정했다. 모든 코드는 `publish.js` 인라인으로 삽입한다. `img` 태그의 `alt` 속성에 `"📷"`이 있다면 줌인 동작하도록 세팅하였다.

## publish.js

```javascript
document.addEventListener("click", (ev) => {
    const container = document.querySelector(".markdown-preview-view");
    const { tagName, alt } = ev.target;
    if (
        tagName === "IMG" &&
        alt.includes("📷") &&
        container.contains(ev.target)
    ) {
        ev.target.zzoom = ev.target.zzoom || mediumZoom(ev.target);
        ev.target.zzoom.open();
    }
});
```

## publish.css

```css
.markdown-preview-view img[alt*="📷"] {
    cursor: zoom-in;
}
```

## Markdown

```markdown
![Zooming this image 📷](https://dummyimage.com/600x400)
```

## Example

![](https://cdn.8dlog.com/assets/hhkb.webp)