Obsidian Publish 이미지 줌인

May 23, 2024

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

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

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

publish.js

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

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

Markdown

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

Example

Links To This Page

Posts