2022. 10. 12. 12:27ㆍ일상
코드블럭좀 예쁘게 해주려고 온갖 짓을 했지만 적용이 안되더라...
결국은 해결해서 공익 목적으로 글 올림
(이거 바꾸려면 html/css 알아야 하냐? ㄴㄴ 몰라도 된다.)
먼저 가장 중요한거
1. 미리보기 말고 실제 올린 글로 적용 여부 확인하자
적용 후 미리보기가 계속 안바뀌길래 한 삼십분 씨름하다가 실제 글 보니까 바뀌어있었다...
2. 플러그인 사용 중지
블로그 관리 - 플러그인 - 코드 문법 강조 사용 XXXXXXXX
[코드블럭 테마 변경하기]
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
먼저 사이트에 들어가서 마음에 드는 테마를 고른다. Language categories 말고 Themes에서 눌러보면서 고르면 된다.
나는 An Old Hope가 마음에 들었다.
그 후, https://highlightjs.org/로 접속 -> Get version 11.6.0 클릭 (2022-10-12 기준 11.6.0 버전이고, 추후 업데이트 될 수도 있다.)
이제 맨 위를 보면 위와 같이 세 가지 코드가 뜨는데, 셋다 사용해도 무방한 것으로 알고 있다.
나는 cdnjs (첫 번째 항목) 코드를 복사했다.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
코드는 위와 같다
이제 블로그 관리 - 스킨 편집 - html 편집
들어가면 굉장히 어지러운데, 왼쪽은 html 편집이 적용된 블로그를 미리볼 수 있는 칸, 오른쪽은 html/css 코드다.
우선 나는 아무것도 모르니까 절대 다른 것들은 지우지 않고,
복사한 코드를
요 <head> 아래쪽, </head> 위쪽에 붙여넣기 해준다.
<head> 와 </head> 사이면 된다.
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
빨간 네모처럼 들여쓰기가 되었는지 꼭 확인!!!!!!!
마음에 드는 테마를 정했으면, 이제 default를 바꿔줄 차례다.
default 대신 테마 이름을 소문자, 띄어쓰기는 - (짝대기)로, 예를 들면 Atom One Dark 는 atom-one-dark로 슬쩍 바꿔서 default 지우고 적어준다.
단, Base16이 써있는 테마들은 default를 base16/atelier-cave 이런 식으로 base16/ 을 꼭 적어줘야 한다.
이제 적용을 해주고 나와서 원래 썼던 글을 확인해본다.
안되는데요?
<script>hljs.initHighlightingOnLoad();</script>
요 코드를 아까 head 밑에 붙여넣은 두 줄 코드 밑에 붙여넣어준다.
안되는데요?
나는 진짜 안됐다. 그래서 이유를 찾아보니까... 테마 오타난거더라...
테마 오타 확인법은 다음과 같다.
코드가 어지럽긴 한데(이정도는 어지러운거 아니라지만 난 어지럽다)
Follow link(ctrl + click) 바로 아래 뭔가 링크같으면서도 경로같은, 우리가 수정한 default 부분(현재는 내가 고른 테마 이름 적힌 곳)을 ctrl을 누른 채로 클릭해준다.
맞게 적었으면 뭐라 영어로 잔뜩 적힌 해석하기 싫어보이는 영어들이 잔뜩 나오고,
오타가 났다면 404 not found가 뜬다. 그래서 안되는거다.
그래도 안되는데요?
수정 후 적용하고 직접 블로그 다시 들어가서 글 확인 후에도 적용이 안되어있다면... 미안합니다... 전 여기까지...
[코드블럭 글씨체 변경]
내 취향은 알록달록한 테마기 때문에, 글씨는 가독성이 무조건 좋아야 한다.
그래야 블로그 볼 맛도 나고...
각설하고, 글씨체 바꾸는 방법은 다음과 같다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 글씨체 고른다.
2. 아래 코드를 복사한다.
<link href='https://fonts.googleapis.com/css?family=Overpass Mono' rel='stylesheet'>
<style>
pre>code {
font-family: 'Overpass Mono' !important;
font-size: 14px !important;
}
</style>3. 코드를 수정한다.
'Overpass Mono'가 두 군데 있는 것을 확인할 수 있다.
Overpass Mono를 마음에 드는 글씨체 이름으로 수정해준다. 혹시 모르니 대소문자와 띄어쓰기는 동일하게 해주자.
근데 Overpass Mono가 가독성 좋아서 추천한다.
print("Hello, world!")이거는 내 코드블럭 자랑예시다.
'일상' 카테고리의 다른 글
| Gingerity 시작 (0) | 2022.10.05 |
|---|