반응형
티스토리에 개발소스 올릴 때 예쁘게 보여주고 싶나요? 아래와 같이 말이죠.
public class Test {
public static void main(String args[]) {
System.out.println("헬로 여러분~!!");
}
}
우선 티스토리 블로그에 적용시키기 위해서는,
코드 하이라이팅 오픈소스 라이브러리인 Hightlight.js와 CSS를 HTML에 넣는 작업이 필요합니다.
5분안에 가능하니 새 창을 열어 따라해보세요.
설치방법
1. 블로그관리 홈 > 꾸미기 > 스킨 편집
2. 스킨 편집 > html 편집
3. <head></head> 태그 사이에 아래 코드 삽입
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
사용방법
설치가 완료되면, 티스토리 에디터에서 ... 버튼을 클릭 후 코드블럭을 선택하여 작성할 수 있습니다.
1. 티스토리 에디터 창에서 ... 버튼 클릭
2. [코드블럭] 메뉴 클릭
...버튼을 누르면 드랍메뉴가 나오고 < > 코드블럭을 클릭하면 됩니다.
3. 코드블럭 삽입
원하는 언어를 선택하고 코드블럭을 입력 후 완료하시면 됩니다.
HTML, CSS, Javascript, Python, Java, C++ 등 다양한 언어를 지원합니다.
4. 하이라이팅된 코드
반응형
'경제적 자유 > Tistory' 카테고리의 다른 글
| 애드센스 광고 수입 올리기 (0) | 2021.05.06 |
|---|
