수리통계 분석 코딩 실습

코드 블럭 디자인 변경 본문

기타

코드 블럭 디자인 변경

얼려먹는 요구르트 2023. 10. 18. 13:22

코드 블럭 폰트, 코드 배경 색상을 바꿔봅시다

✔ 기본 플러그인을 사용하면 간편하지만 예쁘지 않으므로, 2번 방법 권장

 

1) 기본 플러그인 사용

[관리 페이지] > [플러그인]  > [Syntax Highlight] > [테마 변경]

※ 테마 종류 =  [' Atom One DarkAtom', 'One Light', 'Github', 'Monokai', 'Darcula', 'Visual Studio', Xcode]

2) 블럭 디자인 재설정

※ 플러그인으로 테마 설정이 돼있을 경우 위의 '적용'을 반드시 해제 한 후 아래 따라가기

 

① 스킨 편집 접속

[관리 페이지] > [꾸미기]  > [스킨편집] > [html 편집]

 

▪ HTML <head>아래 아래 코드 추가

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/papercolor-light.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

font load를 위한 코드 추가

② 스킨 편집(CSS)

 

1. [관리 페이지] > [꾸미기]  > [스킨편집] > [html 편집] >[CSS] 

pre > code {
    line-height: 1.5; /* 코드 라인별 높이*/
    font-size: 10px; /* 코드 폰트 크기*/
}
pre {
    background: #eeeeee !important; /* 코드 창 색상*/
    border-radius: 2px; /* 코드 겉부분의 둥글기 정도*/
}

 

 

③ 코드 안 글씨체 수정

 

 [관리 페이지] > [꾸미기]  > [스킨편집] > [html 편집]

 

▪ CSS 아래 아래 코드 추가

font-family:폰트명 

pre > code {
    font-family: 'Fira Code', monospace !important;
    line-height: 1.5;
    font-size: 10px;
}
pre {
    background: #eeeeee !important;
    border-radius: 2px;
}

 ▪ HTML <head>아래 아래 코드 추가

 <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

 

※ 만일 원하는 글씨체 가 있을 시 이곳에서 검색

Browse Fonts - Google Fonts

 

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

ex) Fira Code에 대한 글씨 폰트 변경 

1. 위의 사이트에서 Fira Code 검색

2. 적당한 크기의 폰트 선택

▪ 밑줄 친 부분 copy후 CSS 부분에 'font-family'와 'monospace'파트 변경 

 

 

 

▪ 밑줄 친 부분 copy후 html <head>아래 부분 copy and paste

 

 

 

 

참고: https://dailylifeofdeveloper.tistory.com/361

'기타' 카테고리의 다른 글

[ADP] 제 35회 필기 문제 복기 및 공부 방법  (0) 2025.02.25
[크롤링] statiz 선수별 일자별 데이터 크롤링  (0) 2024.03.30
'기타' Related Articles more