Devonthink에서 Markdown으로 웹클리핑시 이미지 주소 문제

코딩을 공부하면서 정말 많은 웹 문서들을 참고하며 정리하게 된다.
 

그 중, 보관하고자 하는 문서는 주로 웹클리핑을 통해 정보를 수집한다.
이때, 클리핑 포맷은 보통 PDF로 하지만 가끔 code block내 스크롤이 있는 경우에는
PDF에서 짤린채로 수집되는 문제가 있어 MarkDown 포맷으로 클리핑을 한다.
 

나는 주로 아래 두 도구를 사용하여 자료를 정리한다.

• Obsidian(note taking app)
• DevonThink(note database)  

이때, 웹클리핑은 Obsidian 노트내로 바로 삽입할 수 있는 방법도 있지만 ¹
파일자체에 Tag 및 Annotation 관리를 위해 DevonThink의 웹클리핑 tool을 사용한다.
 
 

그런데 DevonThink의 MarkDown 웹클리핑 조금 이상한 부분이 있다.

일반적인 MarkDown 문법에서의 이미지 삽입 문법은 다음과 같다.
 

1

![image 설명](image 주소)

그런데 DevonThink의 웹클리퍼는 클리핑시 모든 부가적인 웹링크의 주소를 주석처리하는 경향이 보인다.
그래서 실제로 웹클리핑을 해보면 다음과 같이 MarkDown 변환 처리가 되어있음을 볼 수 있다.
 

1
2

![][1] 
<!-- [1]은 주석번호 --> 

사실 이는 standard markdown 문법에서도 문제가 없기때문에 일반적인 다른 markdown 편집기에서도 이상없이 출력은 된다.
 

하지만… Obsidian 노트앱을 사용중이라면 Obsidian만의 변형 markdown 문법에서² 다른 문제를 야기한다.  

Obsidian에서는 이미지를 넣을때 이미지의 사이즈를 편하게 조절할 수 있는 문법이 있다.³
 

1
2
3

![image 설명 |500](image 주소)

<!-- |숫자 는 이미지의 width를 설정해준다. |500x400 이렇게 넣으면 마크업 시, width 500, height 400을 설정해준다 --> 

이 때, 이미지의 주소가 주석으로 입력되면 위 문법이 먹히지 않게 된다. (변형문법의 단점 ;; ㅠ )
 

이를 위해 이미지 주소 자리에 있는 주석번호를, 주석에 있는 원래의 이미지 링크로 바꿔주는 스크립트를 만들어 해당 파일에 스크립트를 적용하면 편하게 변환할 수 있다.
 

우선 스크립트는 다음과 같다.
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(() => {
  const app = Application("DEVONthink 3")
  app.includeStandardAdditions = true;
  const records = app.selectedRecords();
  records.forEach(r => {
    const links = getReferenceLinks(r.plainText())
    r.plainText = replaceLinks(r.plainText(), links);
  })
})()

function getReferenceLinks(txt) {
  const allLinks = [...txt.matchAll(/^\[(\d+)\]:\s+(.*)$/gm)];
  const linkArray = {};
  allLinks.forEach(l => {
    const index = l[1];
    const URL = l[2];
    linkArray[index] = URL;
  })
  return linkArray;
}

function replaceLinks(txt, links) {
  console.log(links);
  Object.keys(links).forEach(k => {
    const URL = links[k];
    const regEx = new RegExp(`]\\[${k}\\]`);
    txt = txt.replace(regEx, `](${URL})`);
  })
  return txt;
}

이를 적용하면 다음과 같이 주석으로 처리되었던 이미지 주소가 원 링크로 대체된다.
 

DevonThink의 상단 툴바에 스크립트 넣기

macOS에 기본으로 설치되어 있는 스크립트 편집기를 열어서 위 코드를 넣는다.
 

이때 옵션에서 applescript가 아닌, javascript로 설정해줘야 한다.
 

그리고 devonthink에서 이 스크립트를 상단 툴바에 넣고 싶다면,

1. devonthink의 상단 메뉴 중 script(아이콘) - open scripts folder 를 눌러 아래와 같이 파인더로 진입한다.
2. Toolbar 폴더 내에 방금 만든 스크립트를 넣는다.

그럼 이제 toolbar 커스터마이징을 통해 아래와 같이 상단에 위치 시킬 수 있다.
 

물론 이 스크립트는 DevonThink의 smart rules에 등록시켜 자동으로 파일을 감지하여 사용하게끔 할 수도 있다.