고정 헤더 영역
상세 컨텐츠
본문
728x90
티스토리에서 제공하는 기본 스킨 깔끔하고 좋긴한데 낫 마 스탈😤
코드블럭 테마 설정
highlight.js에서 제공하는 테마 살펴보기 https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
원하는 테마를 고른 후 html <head> 태그 안 마지막에 아래 내용 추가
<!-- 코드블럭 라이브러리 추가 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/{테마명}.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>** 테마 이름은 모두 소문자로, 공백은 -로 바꿔서, 꼭 .min.js 파일로 써야함!
뭐라고 써야하는지 정확한 이름을 알고싶다면 https://github.com/highlightjs/highlight.js/tree/main/src/styles 여기서 확인하기
GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
JavaScript syntax highlighter with language auto-detection and zero dependencies. - GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.
github.com
코드블럭 폰트 설정
나는 D2Coding 폰트 사용할 예정으로 먼저 css에 폰트 import
/* D2Coding */
@import url("//cdn.jsdelivr.net/gh/wan2land/d2coding/d2coding-full.css");코드블럭 부분 태그에 해당 폰트 설정
pre > code {
font-family: "D2coding" !important;
}여기서 !important 는 우선 적용으로 꼭 적어주자
폰트 설정
구글 무료 폰트 https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
눈누 폰트(현재 사용중) https://noonnu.cc/
눈누
상업용 무료한글폰트 사이트
noonnu.cc
원하는 폰트 찾아서 css에 import
@font-face {
font-family: 'GangwonEdu_OTFBoldA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}폰트 적용
/*게시물 글꼴 추가*/
.article p span{
font-family: 'GangwonEdu_OTFBoldA' !important;
}
** 폰트 설정이 겹치면서 코드블럭에도 코드블럭용 폰트가 아닌 게시글 폰트가 이상하게 적용되는 현상 발생 ㅠ
이를 방지를 위해 적용되는 html 요소를 더 정확하게 기입
/*게시물 글꼴 추가*/
.article p span, .article span b, .article table span, .article ul span, .article ol span{
font-family: 'GangwonEdu_OTFBoldA' !important;
}게시물 html 요소 중 그냥 글씨 부분과 볼드체 글씨 부분, 테이블 내 글씨, 리스트형식과 번호 형식 글씨 모두 지정하여 폰트 설정
** 코드블럭 주위에 안이쁘게 회색 박스 생기는 문제
코드블럭 html 요소인 pre 테두리 관련 부분 css 요소 삭제해줌
/*pre padding: 10px; margin: 5px 0; 삭제 */
pre { max-width: 100%; overflow-x: auto; overflow-y: hidden; font: 12px/180% 'Lucida Console'; background-color: #fafafa; border-radius: 3px; }덤으로 행간 간격과 글자 크기를 키워줌
/* font 수정, line-height 추가, padding: 5px; margin: 3px 0; 삭제 */
code { background-color: #fafafa; color: #111; border-radius: 3px; font: 13.5px 'verdana'; display: inline-block; line-height: 130%;}
728x90
'여러가지 > 기타' 카테고리의 다른 글
| 2024 MicroSoft(MS) 서비스 장애로 인한 전산 마비, 원인과 대처 그리고 피해상황 (3) | 2024.07.22 |
|---|---|
| [AWS] AWS SAA-03 요약정리 (1) | 2023.12.08 |
| [AWS] AWS SAA-03 (Solution Architect Associate) 자격증 후기 (1) | 2023.12.08 |
| 모바일에서 외장하드 ipDISK 접속하기 (1) | 2022.05.25 |
| ipTIME 공유기에 외장하드 연결해서 우리집 앨범(ipDISK) 만들기 (3) | 2022.01.10 |
댓글 영역