티스토리 작성하는데 ... 예쁜 게시글이었으면 기분이 괜히 좋기 때문에 헤헤✨
코드를 올리면서 하이라이트 테마 적용은 필슈...!! 사실 티스토리 플러그인으로도 쉽게 가능하지만, 하이라이트에서 제공되는 테마가 훨씬 많기 때문에! 하이라이트를 써봅시다. 🐶
우선 아래의 과정을 진행해주세여 💻
스킨 편짐 ->html 편집 -> 코드 삽입
<link rel="stylesheet" href="./style.css" />위의 코드 밑에 아래의 코드를 삽입해주고,
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/solarized-light.min.css">
<body>태그가 시작되기 전에 다음 코드를 삽입해주세요 ㅎㅎ
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
이제 하이라이트 사이트에 가서 원하는 테마를 골라옵니다!!
highlight.js demo
highlightjs.org
저는 갑자기 노랭이가 땡겨서 solarized light를 가져왔어요 ㅎㅎ
하이라이트 페이지에서 많은 테마들 중 하나를 선택하고 대문자-> 소문자, 공백-> "
-"로 바꿔서 가져옵니당
eg) Solarized Light-> solarized-light
그리고 그 이름을!!! 밑에 제가 solarized-light라고 작성한 부분에 넣으시면 됩니다 ㅎㅎ 정말 쉽쥬
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/solarized-light.min.css">
끝!!!...
이라고 하기엔 너무 허접하죠
왜 주변에 회색 바타잉있찌..?!!? 정말 마음에 안드러!!!!라고 하신다면..!
다시 스킨편집 -> html 편집 -> CSS에 가서 cmd-f(찾기)로 "article-view pre" 를 찾습니당
그러면 코드가 아래와 비슷하게 돼 있을꺼에요 ㅎㅎ 그러면 아래 코드를!
.article-view pre {
padding: 20px;
background: rgba(0, 0, 0, 0.03);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}다음과 같이 바꿔줍니다. ! 그러면 회색 테두리가 사라진 답니다 ㅎㅎ!
.article-view pre {
padding: 10px;
background: rgba(0, 0, 0, 0);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}(만약 article-view가 없다면...! fn+f12를 눌러서 mouseover 해보시고 해당 회색 블럭에 어떤 css 가 적용되고 있는지 확인하시고, 해당 css를 수정해주시면 될것 같아요 ㅎㅎ!)
하지만 저는....테두리두 야간 동그랗게 귀엽게 하구싶었어요..헤헤 👍🏻욕심 많은 여자...
코드의 테두리까지 약간 둥그렇게 하구 싶다면!
CSS-> cmd+f로 "code"를 찾습니다
아래와 같이 border-radius 를 기호에 맞게 조절해가시면서 바꿔주시면 끝!!!
code
{
...some code
border-radius:10px;
}
제 귀여운 노랭이 코드블럭이 완성됐네요 ㅎㅎㅎ아우 만족스러워랑>_<🌻
2021/01/26 - 현재 코드 블럭 테마 : Nord(nord.min.css)
'Other 📖 > etc' 카테고리의 다른 글
| [티스토리 웹 폰트 적용] - 노션 mono 폰트 적용하기 (0) | 2020.11.30 |
|---|
댓글