2020. 7. 1. 12:32ㆍ회고/etc
7/1 - 1. 댓글창 width 수정
7/2 - 댓글 페이지 & 관련 게시글 상세 페이지 왼쪽 정렬
%로 하지 않아서 페이지 내 다른 기능이 추가될 때 찌부될지도?..
7/15/20 title_logo 블로그 이름 위치 이동
- "klyhyeon의 개발자 블로그" title logo 절대값 위치 변경완료.
8/25/20 코드 블럭 highlight.js css 적용
코드 블럭 스킨은 다음 제공 플러그인을 사용하고 있었는데 폰트가 너무 못생겨서 바꾸기로 결심했다.
html을 직접 건드려서 적용가능한 highlight.js 라는 사이트를 다들 사용하길래 나도 적용시켜봤다.
아니나 다를까 바로 적용이 안되었다. 티스토리 글쓰기 -> html 모드 -> <pre><code>...codecode</code></pre>로 적용시켜 봐도 안됐다. 사실 태그 거는 건 수동으로 입력 안해도 티스토리 코드블럭 기능이 인식해준다.
안되는 이유는 html 구문 오류 때문이었다. 이상한게 highlight.js 홈페이지와 github에 나와있는 syntax를 합쳐야
인식이 되었다.. 결론은 아래 구문을 티스토리 - 관리 - 스킨 편집 - html - <head></head> 사이에 넣으면 문제없이 작동한다는 것.
highlight.js
highlightjs.org
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/a11y-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>그래도 폰트는 변경이 안된다. 폰트는 따로 css <style> 태그로 입력해줘야 한다.
font.google
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
폰트는 구글폰트.
프로그래밍에서 많이 쓰이는 Fira Code를 적용했다. 쉽진 않았지만 만족스러운 변경 과정이었다.
<!-- 구글 폰트-->
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,300;1,200&display=swap" rel="stylesheet">
<style>
pre, code {
font-family: 'Fira Code', monospace;
font-size: 10pt;
line-height: 1.5;
letter-spacing: 0px;
}
</style>'회고 > etc' 카테고리의 다른 글
| Git - Git bash (0) | 2020.07.16 |
|---|