[VSCode] Markdown PDF LaTex 포함 변환하기 (+M1 속도 향상)

VSCode에는 Markdown을 PDF로 export할 수 있는 유용한 plugin(링크)이 있다. 해당 플러그인을 활용해서 LaTeX 수식이 있는 Markdown 파일을 PDF로 export해보자. 마지막 부분에는 Apple Silicon(M1) macOS에서 발생하는 timeout 이슈를 해결할 수 있는 별도의 chromium 다운로드 과정 또한 설명한다.

목차

  1. “Markdown PDF” VSCode plugin 설치
  2. Markdown 파일에 MathJax script 추가
  3. (macOS Apple silicon/Windows ARM64) Chromium 다운로드 및 경로 설정

1. “Markdown PDF” VSCode plugin 설치

VSCode에 Markdown PDF 라이브러리를 설치한다: 설치 바로가기 링크

사용법 보기 (Overview 페이지 참고)

2. Markdown 파일에 MathJax script 추가

이제 위 사용법에 따라 간단하게 PDF를 export할 수 있다. 하지만 LaTeX가 그대로 출력되는 문제가 있는데, 이렇게 되면 완성된 PDF에서 수식 TeX 코드가 렌더링되지 않고 소스코드가 그대로 보이게 된다.

PDF에서 이런 식으로 코드가 보인다.

물론 yzane/vscode-markdown-pdf#21에서 해당 문제에 대한 해결 방법을 이미 다루고 있다. 하지만 여기에 더해 자연스러운 TeX 폰트까지 적용해 보려 한다.

사용 방법은, 각 Markdown 파일의 맨 아래 끝에 아래 script를 추가하고 PDF export를 진행하면 된다.


<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$', '$']]},
    messageStyle: "none",
    "HTML-CSS": { availableFonts: "TeX", preferredFont: "TeX" },
  });
</script>

위 HTML tag를 추가한 뒤에 export를 진행하면, 아래와 같이 깔끔하게 TeX가 렌더링된 것을 확인할 수 있다!

렌더링이 잘 된 결과 PDF의 일부.

3. (ARM64) Chromium 다운로드 및 경로 설정

macOS (M1, Apple Silicon) 또는 ARM64 Windows에서는 별도로 해당 아키텍쳐 전용 Chromium을 다운로드해 주는 것이 속도 향상에 큰 영향을 준다. 특히나 macOS에서 PDF Export에 2~3배 이상의 체감 속도 향상이 있었으니 반드시 설정해주도록 하자. 여기서는 macOS Apple Silicon 기준으로 설명한다.

그런데 왜 Chromium일까, 잘 보니 내부적으로 Markdown을 chromium으로 렌더링한 후 이를 PDF로 출력하는듯 하다. 결과물이 깔끔하니 잘 활용한 듯 하다.

먼저 Chromium release page(링크)에 접속하여 하단 릴리즈들 중 “Chromium for Mac ARM”을 선택하고 다운로드를 진행한다. 압축을 해제한 후 /Applications 폴더로 Chromium.app 어플리케이션을 이동하여 설치하도록 하자.

Chromium 손상된 어플리케이션 등의 오류 발생 시 해결방법

macOS Ventura에서는 해당 문제가 확정적으로 발생하였다. macOS에서 실행하는 binary는 모두 signature가 필요한데, 여기서 다운로드한 snapshot 빌드에는 사인이 되어있지 않는듯 하다. 아래 명령어를 입력한 뒤 실행하면 문제없이 실행할 수 있다.

sudo xattr -c /Applications/Chromium.app
sudo xattr -c /Applications/Chromium.app/Contents/MacOS/Chromium

위 명령어는 해당 바이너리의 출처 정보(Attribute)를 삭제한다. 일반적으로는 문제가 없겠지만 보안 이슈가 있을 수 있다는 것은 알아두어야 할 듯 하다.

설치와 실행이 문제없이 된다면, 이제 VSCode의 설정(커맨트 팔레트 Cmd+Shift+P 등으로 “사용자 설정 (User Settings)”에서 설정을 변경해주자. 상단 검색창에 Markdown PDF를 검색하면 친절하게(?) 관련 설정이 필터링된다. 우리가 관심있는 설정은 “Markdown-pdf: Executable Path“이다. 해당 설정을 아래와 같이 변경해주도록 하자.

기본적으로 extension이 다운로드하는 Chromium(Intel)을 사용하지 않겠다는 의미이기도 하다.
/Applications/Chromium.app/Contents/MacOS/Chromium

위 값을 입력해주었다면, 자동으로 저장되므로 탭을 닫고 원하는 Markdown을 PDF로 export 해보도록 하자.

[macOS] 네이버 웨일 브라우저 AdGuard 사용하기

기본적으로 macOS에서 AdGuard를 설치해서 사용하게 되면 Browser Assistant Extension도 작동하지 않고, 일부 광고들이 필터링되지 않는 문제가 있다. 이를 해결하기 위해서는…

  1. Browser Assistant Extension과 AdGuard 연결
  2. AdGuard에서 네이버 웨일을 브라우저로 등록

위와 같이 서로 등록을 해주어야 하는 번거로운 과정이 필요하다.

[1] AdGuard Browser Assistant Extension과 AdGuard 연결

Browser Assistant Extension을 설치하였다면 AdGuard가 설치되지 않았다고 뜬다.
사용중인 터미널로 /Users/사용자명/Library/Application Support/Naver/Whale/NativeMessagingHosts/com.adguard.browser_extension_host.nm.json 파일을 새로 생성하고 아래와 같이 값을 입력하여 저장한다.

{
"name": "com.adguard.browser_extension_host.nm",
"description": "AdGuard Native message connector",
"path": "/Applications/Adguard.app/Contents/MacOS/adguard-nm",
"type": "stdio",
"allowed_origins": [ "chrome-extension://fbohpolgemkbfphodcfgnpjcmedcjhpn/", "chrome-extension://hhaeiccdiaojoofohjiennalnphobkaf/", "chrome-extension://mkphddcgnalfkgjbklbepofehokofiek/", "chrome-extension://lcelghcpbepaoamjahfegdgocagfgpdi/", "chrome-extension://calilkfbhgibagenlbchfbiafnacldki/", "chrome-extension://calilkfbhgibagenlbchfbiafnacldki/" ]
}

AdGuard 앱 설치 위치가 달라지면 path를 달리 설정하여야 한다. 입력 후 Whale을 재시작하면 Browser Extension이 정상적으로 작동하는 것을 확인할 수 있다.

[2] AdGuard에서 네이버 웨일을 브라우저로 등록

AdGuard의 기본 브라우저 리스트에는 안타깝게도 네이버 웨일이 등록되어있지 않다. 기본적으로 AdGuard는 등록된 어플리케이션에 대하여 필터링을 수행하므로, 네이버 웨일을 아래와 같이 등록해주도록 하자.

먼저 macOS Menu Bar에 있는 AdGuard 아이콘 클릭 후, 설정으로 진입한다.

다음으로, 우측 “네트워크” 탭에서 “애플리케이션…”으로 선택 창으로 진입한다.

기본적으로 애플리케이션 리스트에 갖가지 브라우져들이 있지만 네이버 웨일은 없다. 설치되어있는 네이버 웨일을 추가해 주도록 한다.

닫기 버튼으로 나간 뒤, 창을 닫으면 자동으로 적용된다. 개인적으로 네이버 메인 화면에서 중간 배너와 우측 배너가 보이지 않으면 적용된 것이라고 본다.

Why?

같은 macOS 환경에서, Google Chrome을 설치하고 그 안에 AdGuard Browser Extension을 사용해보면 정상 작동하는것을 확인할 수 있다. 사실 AdGuard의 애플리케이션 필터링 리스트에 웨일이 없었던 것이 근본 문제였을지, 아니면 네이버 웨일이 상단 과정에서 넣었던 NativeMessagingHosts에 대한 버그를 가지고 있는지는 모르겠다.

어찌 되었든, 위 과정을 거치고 나니 Custom Rule 등등이 문제없이 적용되어 쾌적한 브라우징이 가능했다!

참고자료

[1] AdGuard Browser Assistant under Vivaldi Browser possible?

AMD Radeon 4500U 드라이버 업데이트 – 레노버 Thinkpad E15 Gen2 (Radeon Graphics 384SP)

르누아르 노트북의 GPU 드라이버를 최신으로 업데이트를 하고싶다면
이제는 가능합니다. 원래는 안됐었어요. 암튼 그럼.

최신 드라이버는 먹기 싫어요

최근, 쓰던 노트북이 맛가서 새로 Thinkpad E15 Gen2 노트북을 장만했습니다.
Lenovo 노트북은 각 디바이스 드라이버를 Lenovo 홈페이지나 “Lenovo Vantage”라는 Windows 10 App으로 통합 관리할 수 있게 되어있습니다.

르누아르 GPU가 나온지 얼마 되지 않았기에, Lenono에서 공식 제공하는 드라이버도 Release History 맨 끝에 초기 버전으로 나와 있더군요.

결국 공식 그래픽 드라이버를 설치하면, 구버전을 쓰게 된다는 결론입니다. 어림도 없지 어딜
그래서 최신 드라이버를 설치하기로 했습니다. 다만 이 같은일을 한달 전쯤에 이미 했었죠.
당시 결론은, “아직은 불안정하다”였습니다. 초기 Windows 부팅 시 드라이버 로드 시, TDR (Time Detection & Recovery) 관련 드라이버가 로드가 안되는 이슈였습니다. 그래서 부팅 시간이 짧게는 2분, 길게는 3분 이상도 딜레이가 되고 있었습니다. 노트북인데!! 노트북이라서 못봐줍니다!! 다만 달리 할 수 있는 일이 없었기에, 원래 버전으로 롤백했습니다. 그리고, 어제 또다시 시도를 해봤습니다.

결과: 대성공(?).

이번 2020년 11월 말에 출시한 Radeon Software 20.11.3 (2020-11-25)을, DDU를 하지 않고 기존 드라이버 위에 다시 설치해봤습니다. 어? 이번엔 이 이슈를 수정했나봅니다. 문제없이 빠른 부팅이 되고 있습니다.

아직 한 발 남았다

하지만, Lenovo사는 Windows Update에 자사의 공식 드라이버를 Release하고 있습니다. 이렇단 얘기는, 드라이버 버전이 구버전이거나 설치되어 있지 않다면, 자동으로 Windows Update가 공식 GPU 드라이버를 설치한다는 말이 됩니다. 좋은 기능이지만, 최신 버전의 드라이버 설치에도 불구하고 자동 업데이트 기능은 쉬지 않았습니다…. 최신 버전을 설치하고 난 뒤, Windows Update는 구버전으로 다시 롤백을 시도하고 있었습니다.

이제, Windows Update를 없애버릴 시간입니다 조금 손봐서, GPU 드라이버를 설치하지 않도록 해보겠습니다. Windows 10에서 설치할 업데이트중 일부를 무시할 수 있는데, MS사에서 제공한 공식 도구를 사용하면 됩니다.

주의할점이 있다면, 드라이버를 먼저 설치한 뒤에 Windows Update를 실행해 업데이트를 확인하고, GPU Driver를 설치할 것이라는 리스트가 뜨면 이를 일시 중지하고 진행해야 합니다. 진행할 업데이트가 없는데 이를 Block할 수는 없으므로, 조금 복잡한 위의 방법대로 하는게 탈이 없을것 같아 이렇게 진행했습니다. 아, Windows Update를 확인만 하고 리스트가 뜨면 바로 일시 중지해야 합니다. 그렇게 하지 않으면, 작업하던 중간에 구버전으로 드라이버가 다시 설치될지도…?

어쨌든, 다운로드 받은 프로그램 실행후 “Hide Updates”를 누르면 지금 진행하려는 GPU 업데이트 패키지가 리스트에 뜹니다. 제 기억상 Lenovo와 AMD라는 단어가 같이 들어가있었던것 같네요. 이를 체크하고 Hide합니다. 이렇게 하면 나중에도 GPU 업데이트는 되지 않습니다.

공식보다는 최신을 쓰고 싶은 분들을 위한 정리

  1. Radeon Software 20.11.3 이상을 다운로드한다.
  2. 기존 드라이버 위에 설치한다 (저는 초기화 진행했습니다)
  3. Windows Update 확인 버튼을 눌러준다.
  4. 확인이 끝나고 설치를 해버리기 전에 “7일 동안 업데이트 일시 중지”를 누른다.
  5. 위의 툴로 해당 드라이버를 숨긴다.
  6. Profit!

참고

가비아에서 dailylime.kr 블로그 도메인 구입 + DNSever DNS 구축기

도메인 Flex 해버렸습니다

갑자기 친구랑 대화하던 도중, 도메인 관련한 얘기가 나와서 하다보니, 결국 블로그 도메인을 구입해버리고 말았습니다…

갑자기 구매해버린 도메인

구 .ml 도메인을 이미 소유하고 있었음에도 불구하고(https://blog.stabilization-in.ml), DNSever와 같은 서비스는 .ml 도메인을 아예 블럭했고(아마 무료 도메인이라 다들 등록하려고 해서 그런가 보네요), 이 블로그만을 위한 도메인을 따로 마련하는게 좋을 것 같아 겸사겸사 구매했습니다. 이름은 Daily Lime(일일 라임?)으로, 라임오렌지파이의 일상을 줄여서 키워드로 만들어보았습니다.

가비아에서 행사중인 도메인

현재 가비아에서 도메인을 할인해주는 행사를 하고 있습니다. 마침 제가 산 도메인도 저렴해서 바로 장만했습니다!

도메인 구입 시 네임서버(NS) 입력 화면

구매할 때, 네임서버를 선택하는 부분이 있습니다. 이 부분에서 기본 네임서버를 선택하면,가비아에서 제공하는 기본 네임 서버 서비스의 이용이 가능합니다 (대부분의 경우에, 기본 제공 네임서버를 이용하여도 괜찮습니다). 다만 TXT 레코드나 와일드카드 A 레코드, CAA 레코드 등, 여러 DNS 세부 세팅을 건드리기 위해서는 DNSever를 사용하거나, 직접 bind9 DNS 서버를 구축해야 합니다. 저는 세부 세팅을 건드릴 일이 많을 것 같아, DNSever에서 제공하는 클라우드 DNS 서버를 사용하도록 하겠습니다.

DNSever 관리 페이지 홈 화면

DNSever에 내 도메인을 등록하게 되면, 네임 서버를 설정하는 페이지가 나타나 총 3~5개의 네임서버를 부여해줍니다. 이 네임서버 리스트를, 가비아의 네임서버 입력 화면에 입력해주면 끝입니다. 도메인을 결제한 뒤, 30분~4시간까지 기다리면 DNSever에서 도메인을 설정할 수 있는 기능이 활성화됩니다. 이 때부터는 보통 접속이 가능하나 전세계 DNS로 전파되는데는 2~3일에서 길게는 일주일까지 걸리므로 이 점을 유의하시면 됩니다.

호스트 IP(A) 관리 부분이 저희가 눈 여겨 볼 부분입니다. 기본적으로 도메인에는 아무것도 연결되어 있지 않아 그 자체로는 사용성이 전무합니다. 그러므로 도메인을 실제 서버 IP와 매핑하는 작업이 필요합니다. 이 때, 호스트 IP(네임서버 상 A 레코드)에 서버의 IP를 입력함으로써 매핑이 진행됩니다.

매핑 시, 보통은 위와 같이 “www.”와 같은 서브사이트가 붙지 않은 통짜 도메인(dailylime.kr), 그리고 모든 서브사이트를 의미하는 Asterisk(*) 서브사이트 두 개를 같이 사용하면, 모든 도메인과 서브사이트에 대해 매핑하게 됩니다.

현재는 아무 서브사이트(home.dailylime.kr, blog.dailylime.kr)나 입력해도 다시 dailylime.kr로 리디렉팅 되는데, 이 이유는 서브사이트가 있을 경우 무조건 루트 도메인(dailylime.kr)으로 다시 리디렉팅 되도록 웹 서버내에 설정되어 있기 때문입니다.

마치며

저는 이미 개인 웹 서버를 소유하여 가동하고 있습니다. 이 때문에, 도메인을 기존의 서버에 연결할 수 있었습니다.

따로 서버가 없으신 분들은 웹서버 호스팅을 위한 각종 플랫폼이나 무료 웹 서비스 플랫폼(AWS, Azure, Oracle Cloud)들이 있습니다. 아니면, 블로그 목적의 운영이라면 단순히 현재 운영중인 블로그(다음/네이버/티스토리 등등)에 직접 연결하는 방법도 있습니다. 해당 키워드 “XXX 블로그 도메인 연결” 로 구글에 검색해보세요.