메뉴 건너뛰기

enjoyTools.net

아래 링크의 pr과 그 밑의 스택오버플로우 글을 보면 vscode 편집기에서 웹폰트는 정식으로 지원하지 않지만 어떤 식으로든 설치본을 변조해서 웹폰트를 쓸 수는 있다.

https://github.com/microsoft/vscode/pull/142203

 

 

스택오버플로우에 아래와 같은게 있는데, 문제는 매번 개발자도구를 열어서 같은 내용을 실행해야 해서 딱히 의미는 없다.

https://stackoverflow.com/a/54124991/8964990

 

 

 

위의 방법 말고 vscode 워크벤치 관련 파일을 직접 건드리는 방법이 있다.

 

D2Coding ligarture 웹글꼴을 추가한다고 가정하면,

https://github.com/Joungkyun/font-d2coding-ligature

 

 

아래 파일에

{vscode설치경로 또는 %appdata%/../Local/Programs/Microsoft VSCode}/resources/app/out/vs/workbench/workbench.desktop.main.css

 

 

아래 내용을 추가한다. (위 저장소의 d2coding-ligature.css 파일 안에 있는 내용이다)

아니면 @import로 가져와도 된다.

-> @import로 가져오는건 안된다. 걍 아래처럼 @font-face 길게 쓰는수 밖에 없겠다.

@font-face{

    font-family: 'D2Coding ligature';

    src: url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.eot?#iefix') format('embedded-opentype'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff2') format('woff2'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff') format('woff'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.ttf') format('truetype'); font-weight: normal; font-style: normal;

}

 

 

이런 식으로 넣어주면 된다.

.monaco-action-bar{white-space:nowrap;height:100%}.monaco-action-bar .actions-container{display:...... 이후생략

@font-face{

    font-family: 'D2Coding ligature';

    src: url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.eot?#iefix') format('embedded-opentype'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff2') format('woff2'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.woff') format('woff'),

    url('https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding-ligature/D2Coding-ligature.ttf') format('truetype');

    font-weight: normal; font-style: normal;

}

 

settings.json에는 원래 글꼴 추가하듯이 아래와 같이 추가한다.

{

    "editor.fontFamily": "D2Coding ligature, Consolas, 'Courier New', monospace"

}

 

 

Vscode를 다시 실행하면 웹폰트는 적용이 되었을 것이지만 vscode가 손상되었습니다 또는 Your Code installation appears to be corrupt 대충 이런 메시지가 계속 나와서 다시 설치해라고 괴롭혀댄다.

vscode는 실행 시 몇몇 중요파일의 변조여부를 체크하는데

위에서 workbench.desktop.main.css 라는 파일을 수정하면서 checksum이 깨져서 그런것이고

resources/app/product.json 파일에서 체크섬 값을 변조된 값으로 바꿔주면 손상되었다고 괴롭히는 메시지가 사라진다

윈도우 파워셸로는 대충 아래와 같이 할 수 있다.

# fix_checksum.ps1

 

$bytes  = [System.IO.File]::ReadAllBytes("vscode\resources\app\out\vs\workbench\workbench.desktop.main.css")

$Hasher = New-Object -TypeName System.Security.Cryptography.MD5CryptoServiceProvider

$md5 = $Hasher.ComputeHash($bytes)

$base64 = [System.Convert]::ToBase64String($md5)

 

$checksum = $base64.replace("=","")

 

$json = (Get-Content "vscode\resources\app\product.json" -Encoding UTF8 | Out-String)

$product = ConvertFrom-Json $json

 

$product.checksums.'vs/workbench/workbench.desktop.main.css' = $checksum

$product | ConvertTo-Json -Compress -Depth 10 | Out-File "vscode\resources\app\product.json" -Encoding UTF8

 

 

직접 하려면 workbench.desktop.main.css 파일의 내용으로 md5 -> base64 값을 만든 다음

resources/app/product.json 파일의 해당 부분에 == 이걸 뺀 문자열로 바꿔 주면 된다.

이후 vscode를 다시 실행하면 편집창의 글꼴이 웹폰트인 D2Coding ligarture로 바뀐 것과 Corrupted 어쩌고 하는 메시지가 사라진 것을 확인할 수 있다.

문제는 vscode 업데이트시 내용이 전부 리셋되므로 매번 업데이트할 때마다 css와 체크섬 변조를 반복해야된다.

수작업으로 하는게 싫으면 이걸 프로그램이나 스크립트로 만들어서 vscode의 매 업데이트 후에 한 번만 실행해주면 된다.

나는 위에 썼다시피 fix_checksum.ps1 이라는 파워셸 스크립트를 만들어서 해결했다.

 

끝.

 

번호 제목 글쓴이 날짜 조회 수
35 VSCode 다중커서 꿈돌이 2017.02.28 19482
34 C/C++ CDT/MinGW32에서 pthread 사용하기 file 꿈돌이 2015.03.03 5410
33 vscode offline mode 설정 항목 꿈돌이 2018.08.18 3467
32 CDT(c c++ development tools) 및 MinGW / MSYS 설정 file 꿈돌이 2015.02.26 3435
31 GTK+ 3 설정 file 꿈돌이 2015.03.01 2009
30 피씨방스튜디오 만들기 #1/4 - vscode 포터블 설정 file 꿈돌이 2017.09.07 1879
29 c_cpp 확장에서 goto definition이 header내 extern 으로만 넘어갈 때 꿈돌이 2023.06.08 1854
28 이클립스 최소판을 포터블형식으로 만들기 file 꿈돌이 2015.02.22 1258
27 VSCode 외 웹서버 및 node.js 등 포터블 설정 백업 꿈돌이 2017.03.21 903
26 피씨방스튜디오 만들기 #번외4 - Go 준비 file 꿈돌이 2018.07.14 879
25 피씨방스튜디오 만들기 #2/4 - MariaDB, HeidiSQL 준비 file 꿈돌이 2017.09.07 777
24 피씨방스튜디오 만들기 #4/4 - 취합 및 마무리 file 꿈돌이 2017.09.08 764
23 피씨방스튜디오 만들기 #3/4 - NginX, PHP 준비 꿈돌이 2017.09.08 750
22 External tools, Run 설정 이전 꿈돌이 2016.06.02 686
21 피씨방스튜디오 만들기 #번외1 - Node.js 준비 꿈돌이 2017.09.19 684
20 피씨방스튜디오 만들기 #번외5 - JSP 준비 꿈돌이 2018.11.01 682
19 피씨방스튜디오 만들기 #번외3 - Python(3.x) 준비 꿈돌이 2018.03.16 677
18 피씨방스튜디오 만들기 #번외6 - 닷넷코어 준비 꿈돌이 2019.01.02 632
17 VSCode 터미널에서 - Powershell 프롬프트 경로 짧게 하기 꿈돌이 2018.06.29 617
16 피씨방스튜디오에서 vscode 업데이트 꿈돌이 2018.09.06 573