.js 파일 한개와 .css 파일 한개만 있으면 highlight.js로 티스토리 블로그에 소스코드를 넣을 수 있습니다.
다만 기본으로 제공하는 수십개의 테마가 있는데 저는 다 마음에 들지가 않더라고요.
그래서 css를 살짝 손봐서 더 예쁘게 나오게 했습니다. 이렇게요 ^^
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"
}
}
자, 그럼 방법을 알려드리겠습니다.
1. https://highlightjs.org/download/로 이동 후, 몇십개의 개발언어 중 원하는 언어에 체크하고 다운로드합니다.
2. https://highlightjs.org/static/demo/로 이동 후, 몇십개의 테마중에서 색상조합이 마음에 드는 테마 이름을 골라둡니다.
3. 다운받은 폴더 내의 style폴더에 들어가서 골라둔 이름으로 된 .css 파일을 엽니다. (메모장이나 편집도구 뭐든지 상관없어요.)
4. 선택사항으로 배경색을 없애고 폰트색상, 폰트크기를 수정하기를 원하신다면, 코드의 다음부분을 찾아서 아래코드를 붙여넣고 저장하세요. (안하셔도 되고 다른 스타일을 더 추가하셔도 됩니다.)
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
/* background: #fff;
*/ color: black;
font-size: calc(1em) !important;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace !important;
}
5. 티스토리 블로그 관리페이지 -> 스킨편집 -> html편집 으로 이동해서 highlight.pack.js 파일과 수정한(혹은 하지않은) .css파일을 업로드 합니다.
6. html편집에서 <head>와 </head> 사이에 다음 코드를 추가하면 끝입니다.
<link rel="stylesheet" href="./images/업로드한 css파일이름.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
7. 블로그 글 작성시 우상단 html을 체크하고 다음과 같이 클래스값에 개발언어 이름을 넣어서 사용하면 됩니다.
(코드 안에서 <은 < 로 쓰고 >는 > 로 써야 html태그로써 기능하지 않고 글에 써집니다.)
<pre><code class="css">some code...
some code...
</code></pre>
<pre><code class="java">some code...
some code...
</code></pre>
이상, 간단하게 highlight.js로 티스토리 블로그 소스코드 하이라이트를 좀 더 예쁘게 넣는 방법을 알아보았습니다.
위의 코드블럭을 글 서식으로 만들어두면 글 작성할때 오른쪽에서 클릭해서 꺼내다 쓸수가 있겠죠??
댓글