[Tistory] Blog Design Custom Log (2024-01-23)
1. Used Skin
Berry Skin v4
2. HTML Modify Log
1) Import Theme for code blocks
<head>
...
<!-- rizingblare 코드블럭 테마 변경 start -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- rizingblare 코드블럭 테마 변경 end -->
...GitHub Dark Dimmed (출처 : highlight.js)
2) Import Font for code blocks
...
<!-- rizingblare 코드블럭 폰트 변경 start -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
<!-- rizingblare 코드블럭 폰트 변경 end -->
...Nanum Gothic (출처 : Google Fonts)
3. CSS Modify Log
1) <code> 스타일 수정
...
.article .contents_style pre code {
word-break: break-all;
overflow-y: auto;
padding: var(--space-md);
box-sizing: border-box;
/* rizingblare */
width: var(--my-width, 80%);
margin: 0 auto;
font-family: 'Nanum Gothic', sans-serif;
font-size: 0.8em;
line-height: 150%;
}
...- <code>태그의 style 속성값에서 --my-width 변수값이 전달되지 않으면
width의 기본값을 양옆 여백이 포함된 80%으로 설정 (텍스트 가운데 정렬 시에 적합)
ex) <code style="--my-width: 100%;"> ...
- margin: 0 auto : 가운데 정렬
- font-family : 'Nanum Gothic', sans-serif : 나눔 고딕 폰트 적용
- font-size: 0.8em : 글자 크기 조정
- line-height: 150% : 줄 간격 조정
2) <blockquote> style2 수정
...
.article .contents_style blockquote[data-ke-style=style2]:before {
display: inline-block;
font-weight: bold;
/* content: "⚠️ WARN";*/
margin-right: var(--space-md);
font-family: "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Helvetica, sans-serif;
/* rizingblare */
content:"⚠️ " var(--quote-text, "WARN");
}
...
- content의 기본값 ⚠️ WARN을 삭제
- blockquote 태그의 style 속성의 --quote-text 변수로부터 전달받은 값을 동적으로 할당하거나
ex) <blockquote style="--quote-text: '';" data-ke-style="style2"><b>프로그래밍 요구사항</b>...
- 변수가 전달되지 않을 경우 ⚠️ WARN으로 설정되도록 수정
3) <blockquote> style3 수정
...
.article .contents_style blockquote[data-ke-style=style3]:before {
display: inline-block;
font-weight: bold;
/* content: "💡 INFO";*/
margin-right: var(--space-md);
font-family: "Noto Sans KR", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, "돋움", Helvetica, sans-serif;
/* rizingblare */
content:"💡 " var(--quote-text, "INFO");
}
...- content의 기본값 💡 INFO을 삭제
- blockquote 태그의 style 속성의 --quote-text 변수로부터 전달받은 값을 동적으로 할당하거나
ex) <blockquote style="--quote-text: '';" data-ke-style="style3">...
- --quote-text 변수가 전달되지 않으면 기본값 💡 INFO이 설정되도록 수정
4. 참고 :
https://jinyh.tistory.com/10 (티스토리 코드블럭(codeblock) 커스터마이징 디자인)
https://coding-zzang.tistory.com/11 ([티스토리/tistory] 코드블럭 테마, 폰트, 줄간격 변경, 회색 테두리)
https://habitus92.tistory.com/9([티스토리]코드블럭 테마 및 폰트변경 완벽가이드)