[Highlight.js] 코드 예쁘게 쓰기

1. 스킨 적용하기

highlight.js

링크를 통해서 보이는 화면에서 Get version을 눌러줍니다.

그러면 이런 코드들이 보이는데 둘 중 하나를 복사합니다.

이제 복사한 코드를 사용하여 highlight.js를 티스토리에 적용합니다.

블로그 관리 - 꾸미기 - 스킨 편집

블로그 관리에서 꾸미기 목록에 있는 스킨 편집을 눌러줍니다.

그리고 html 편집을 눌러줍니다.

그러면 이러한 화면을 볼 수 있는데 위에서 복사한 코드와 아래 한 줄의 코드를 더하여 <script>hljs.initHighlightingOnLoad();</script>까지 아래의 코드를 </head> 앞에 작성해 줍니다. 그러면 바로 위 그림에서 47번줄 부터 49번째 줄까지가 됩니다. 

<link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>




2. 테마 지정하기

Highlight.js 는 다양한 테마를 제공합니다. 현재 Solarized Light로 지정해 놨기 때문에 위의 코드를 복사하였다면 저와 같은 테마이실 겁니다.

테마종류는 이 곳에서 종류별로 볼 수 있고, 마음에 드는 테마 이름을 기억하신 뒤 html 코드에 적용시킬 때는 스타일 정식 명칭 목록에서 확인한 명칭을 동그라미 부분에 넣어주시면 테마가 정상적으로 적용됩니다.

 

 

3. 티스토리에서 사용하기

글쓰기에 들어가면 우측 상단에 기본모드를 누르면 아래의 그림처럼 나오는데 그 중 HTML을 선택합니다.

원하는 위치에 아래와 같이 작성해주면 완성입니다.

<pre>
<code class="html">
여기에 코드 작성
</code>
</pre>

언어별 클래스 이름

 

아래는 c++ 예시입니다.

#include 
#include 
#include 
#include  //memset
using namespace std;
const int MAX = 100 + 2; //출발점, 도착점 포함
int N;
vector graph[MAX]; //이차원 배열
bool visited[MAX];
 
//맨해튼 거리
int distance(pair<int, int> p1, pair<int, int> p2)
{
    return abs(p1.first - p2.first) + abs(p1.second - p2.second);
}
 
//전형적인 DFS
void DFS(int node)
{
    visited[node] = true;
    for (int i = 0; i < graph[node].size(); i++)
    {
        int next = graph[node][i];
        if (visited[next] == false)
            DFS(next);
    }
}
 
int main(void){

}

4. 참고사항

<>가 안 먹거나 Enter 로 구역이 나눠진다든지 예상치 못한 오류가 발생했을때 참고했던 블로그입니다.

참고 블로그