highlight.js - 티스토리에서 소스 코드 가독성 있게 보여주기
highlight.js 무엇인가요?
highlight.js 는 각종 프로그래밍 언어들의 소스 코드를 가독성 있게 만들어주는 소스 코드 스킨입니다.
아래와 같이 블로그에서 표현할 수 있습니다.
import Foundation
@objc class Person: Entity {
var name: String!
var age: Int!
init(name: String, age: Int) {
/* /* ... */ */
}
// Return a descriptive string for this person
func description(offset: Int = 0) -> String {
return "\(name) is \(age + offset) years old"
}
}
highlight.js 홈페이지 접속
먼저 https://highlightjs.org/ 홈페이지 접속을 합니다. highlight.js에 대해서 간단하게 설명이 되어있습니다.
- 176 languages and 79 styles (176개 언어와 79개 스타일 지원)
- automatic language detection (자동 언어 감지)
- multi-language code highlighting (다중 언어 코드 강조 표시)
- available for node.js (node.js에서 사용 가능)
- works with any markup (마크 업과 함께 동작)
- compatible with any js framework (모든 js 프레임워크와 호환 가능)
highlight.js 다운로드
티스토리에 highlight.js 적용 (HTML)
highlight_js.txt<!-- highlight -->
<link rel="stylesheet" href="./images/zenburn.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
위에 코드 <head> ... </head> 사이에 마지막 부분에 넣어주세요.
zenburn.css 는 테마의 이름이며, 각 테마 확인은 여기서 확인하실 수 있습니다. (https://highlightjs.org/static/demo/)
원하는 테마를 저 부분에 넣어 주시면 됩니다.
티스토리에 highlight.js 적용 (파일업로드)
아래에 추가 버튼을 눌러 아까 다운로드 받은 highlight 파일에서
highlight.pack.js
zenburn.css
위에서 넣었던 zenburn.css 스킨 테마도 업로드 해줍니다.
업로드가 끝났으면 적용이 완료된 것입니다. 이제 한번 사용해볼까요?
티스토리 글쓰기에서 highlight.js 사용
글쓰기 항목으로 이동하여 다음과 같은 코드를 작성하고 오른쪽위에 HTML 버튼을 눌러줍니다.
HTML 버튼을 눌러서 코드 위 아래로
<pre><code>
...
...
소스 코드
...
...
</code></pre>
위 코드를 이용하여 소스코드를 감싸 버립니다. <pre><code> ... </code></pre>
소스를 감싸고 HTML 버튼을 클릭해보면 다음과 같은 형태로 보여집니다.
미리 보기 버튼을 누르면 아래와 같이 나옵니다. 그렇다면 적용이 완료된 것입니다.
그 외의 가독성 높이는 소스 코드 스킨들
'Backup > MacOS' 카테고리의 다른 글
| MacOS, Safari 유용한 단축키 목록 (0) | 2018.01.13 |
|---|---|
| (출처) MacOS 멋진 Terminal 만들기 (0) | 2018.01.01 |
| (출처) Finder 현재 폴더에서 터미널 열기 (0) | 2017.12.18 |
| (출처) 터미널 현재 폴더에서 Finder 열기 (0) | 2017.12.18 |
| karabiner - 맥 OSX에서 윈도우 일반 키보드 키 배열 변경 (0) | 2017.12.16 |