code-server에 커스텀 폰트 적용하기

6162 단어 vscode코드서버code-servercode-server

참고 링크: https://github.com/coder/code-server/issues/1374

code-server에 커스텀 폰트를 적용하는 방법을 알아보자.
커스텀 폰트는 웹폰트를 사용하는 방식으로 적용 할 것이다.
보통 code-server는 가상머신에 올려서 사용하는 사람이 많을 것이므로, 우분투를 기준으로 설명하겠다.

  1. workbench.html을 잘 찾아서 <head>태그 안에 아래 코드를 추가한다.
<style>
	@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
</style>

다른 폰트를 사용하고 싶으면 적당히 다른 폰트의 url을 사용하면 되겠다.

workbench.html은 4.1.x 버전에서는/usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html, 4.2.x 버전에서는 /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html에 있다.

따라서 이를 bash 코드로 자동화 할 수도 있다.

  • 4.1.x 버전
sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html
  • 4.2.x 버전
sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html

하지만 code-server는 업데이트 할 때 마다, 폴더랑 파일들의 위치가 다 바뀌어버린다.
따라서 버전 업 할때마다 그때그때 파일을 찾기 힘들 것 같으면 아래 명령어를 사용 해 보면 된다.

cd /usr/lib/code-server #code-server folder 위치

find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"

단, workbench.html의 파일 이름이 바뀌어버린다면 작동하지 않을 수도 있겠다.

  1. 그 다음, CSP를 업데이트 해 준다.

아래 코드를 실행 해 주면 된다.

cd /usr/lib/code-server

grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"

  1. code-server를 재실행 해준다.

  2. vscode 설정에 들어가서, 폰트를 설정 해 준다.
    'Nanum Gothic Coding', monospace

  3. 끝!

이상까지의 과정을 한 파일로 만들면 아래와 같겠다.

cd /usr/lib/code-server #code-server folder 위치

find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"

grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"

# 이후 code-server 재실행
# 이후 설정의 글꼴 부분에 'Nanum Gothic Coding', monospace 추가
[SQLP] SQLP 44회 실기 풀이
취준 회고록

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage