<!-- Relative Sizing -->
<p> Relative Sizing </p>
<p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
소스가 다운로드되었다면 이제 티스토리 코드블럭에 line number 를 적용해 보겠습니다.
관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlightjs-line-numbers.min.js 파일을 업로드 해주세요 (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)
업로드 파일 이름
dist/highlightjs-line-numbers.min.js
highlightjs-line-numbers.min.js 파일 업로드
업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlightjs-line-numbers.min.js 스크립트를 적용 해주면 됩니다.
highlight 소스 삽입 위치는 <head> 와 </head> 사이에 넣습니다.
HTML 스킨 편집
<!-- 코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 highlight 추가 End-->
<!-- 코드 블럭 line number 추가 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
<!-- 코드 블럭 line number 추가 End-->
코드 블럭 Line Number 적용 결과 확인
글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다.
코드블럭삽입
테스트 코드 블럭
#include <iostream>
int main(int argc, char *argv[]) {
/* An annoying "Hello World" example */
for (auto i = 0; i < 0xFFFF; i++)
cout << "Hello, World!" << endl;
char c = '\n';
unordered_map <string, vector<string> > m;
m["key"] = "\\\\"; // this is an error
return -2e3 + 12l;
}
highlight 가 다운로드되었다면 이제 티스토리 코드블럭에 highlight 를 적용하겠습니다.
관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlight.js 파일을 업로드 해주세요 (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)
업로드 파일 이름
1.highlight.js , highlight.min.js
2.styles\테마( styles\atom-one-dark.min.css)
* 데모 환경에서 Atom One Dark 를 선택 하셨다면 적용할 스크립트는 atom-one-dark.min.css 가됩니다.
만약 Base16/Apathy 를 선택 하셨다면 styles\base16\apathy.min.css 스크립트를 업로드 하셔서 사용하시면됩니다.
업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlight 스크립트를 적용 해주면 됩니다.
highlight 소스 삽입 위치는 <head> 와 </head> 사이에 넣습니다.
<!-- 코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">
<script>hljs.initHighlightingOnLoad();</script>
<!-- 코드 블럭 highlight 추가 End-->
atom-one-dark.min 테마 코드 블럭 적용
글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다.
코드블럭삽입
코드블럭 적용후&nbsp;
헉! 이건 내가 원했던 코드 블럭 테마가 아닙니다.
이런 이유는 티스토리에서 기본 제공하는 Synctax Highlight 가 적용 되었기 때문입니다.
