메뉴 건너뛰기

enjoyTools.net

vscode 워크벤치 편집창에서 웹폰트 사용하기

2022.09.21 00:28

꿈돌이 조회 수:271

아래 링크의 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 이라는 파워셸 스크립트를 만들어서 해결했다.

 

​

끝.

 

, , , , , , , , , 이 게시물을
목록
목록
번호 제목 글쓴이 날짜 조회 수
36 php7.4 확장 꿈돌이 2024.04.20 74
35 sql server 우분투 클라이언트로 연결 꿈돌이 2023.11.01 89
34 vscode 리눅스에서 실행시 검은 화면 먹통 꿈돌이 2023.10.30 119
33 vscode 워크벤치 화면 이동 단축키 꿈돌이 2023.08.29 111
32 스크롤 할 때 함수명을 위쪽에 딱 붙이기 꿈돌이 2023.06.08 97
31 c_cpp 확장에서 goto definition이 header내 extern 으로만 넘어갈 때 꿈돌이 2023.06.08 3785
30 vscode c_cpp vcformat if else while 줄바꿈 안시키기 꿈돌이 2022.12.29 163
» vscode 워크벤치 편집창에서 웹폰트 사용하기 꿈돌이 2022.09.21 271
28 vscode italic 설정 꿈돌이 2022.07.01 307
27 vscode 제안항목 트리거 취소 꿈돌이 2022.02.17 251
26 vscode 빈 패널 유지하기 꿈돌이 2021.10.07 109
25 vscode 1.60 이후 bracket pair colorizer 꿈돌이 2021.09.06 202
24 vscode 1.58 이후 편집창에 터미널 띄우기 꿈돌이 2021.07.09 315
23 vscode 1.55 이후 터미널 실행 내꺼 설정 꿈돌이 2021.05.17 130
22 vscode terminal 목록 켜기 꿈돌이 2021.05.07 127
21 VSCode git (Source Control)에 remote 표시 꿈돌이 2020.08.17 383
20 피씨방스튜디오 만들기 #번외6 - 닷넷코어 준비 꿈돌이 2019.01.02 712
19 피씨방스튜디오 만들기 #번외5 - JSP 준비 꿈돌이 2018.11.01 768
18 피씨방스튜디오에서 vscode 업데이트 꿈돌이 2018.09.06 659
17 vscode offline mode 설정 항목 꿈돌이 2018.08.18 3617
쓰기
태그