[블로그]티스토리 블로그에 Highligh.js 사용하기(블로그 코드 색 변경)

Notice

Recent Posts

Recent Comments

Link

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tags more

Archives

Today

Total

관리 메뉴

PostIT

[블로그]티스토리 블로그에 Highligh.js 사용하기(블로그 코드 색 변경) 본문

카테고리 없음

[블로그]티스토리 블로그에 Highligh.js 사용하기(블로그 코드 색 변경)

shun10114 2016. 6. 14. 13:31

안녕하세요.

이번에는 코드 블로그를 적용하기 위해

블로그에 코드 사용을 원활히 하는 방법을 알아봤습니다.

좋은 정보도 많지만, 직접 한번 하면서 필요한 것만 적어볼까 합니다.

먼저, 많은 라이브러리 중에 전 highlight.js를 사용하기로 했습니다.

주소 : https://highlightjs.org/

홈페이지 되면 위에처럼(요약) 보일텐데요,

Get version을 누르면 다운로드 페이지로 넘어갑니다.

이렇게 CDN을 통해 인터넷으로 불러올 수 있지만,

CDN을 적용하면 load되는데 시간이 걸린다고 합니다.

그래서 가급적이면 다운받아서 사용할 것을 추천드립니다.

사이트에 들어가면 위처럼 기본 사용언어는 다 체크가 되어있습니다.

그 외에도 블로그에 표현하고 싶은 언어는 체크해서 다운로드 받으면 되겠습니다.

다운로드 받는 위치는!!

더 밑에 내려가면 Node.js 항목 사이에 다운로드 버튼이 있습니다.

다운로드 눌러서 버튼을 받으시면 되겠습니다.

압축을 풀면 위와같이 나오는데

highlight.pack.js와

styles 폴더에 나와있는 마음에 드는 CSS파일을

티스토리 html/css편집 파일 업로드에 넣으면 되겠습니다.

https://highlightjs.org/static/demo/

이 사이트를 들어가면 CSS의 디자인을 볼 수 있습니다.

여기서 마음에 드는 CSS를 넣으시면 됩니다.

전 참고로 hybrid.css를 넣었습니다.

<link rel="stylesheet" href="./images/hybrid.css">
<script src="./images/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

위 코드 위치는 <head></head>사이에 넣어주시면 되겠습니다.

그리고, 저는 참고로 hybrid.css를 넣은것이고 기본으로는 default.css가 들어가있습니다.

나머지는 위와 같이 입력해주시면 되겠습니다.

위처럼 넣었으면 이제 넣는 방법에 대해서 알려드리겠습니다.

사용방법!!

<pre>

<code class="html"> //html 부분에 원하는 코드를 넣습니다. 아까 체크박스로 보이던 것이 호환가능 언어들입니다.

내용 //블로그에 기재 할 코드를 넣어주면 되겠습니다.

</code>

</pre>

2. 밑에 제이쿼리를 넣어줍니다. <head>사이에 넣어줍니다. 참조(http://gyuha.tistory.com/456)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
/* jQuery 부분 */
jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
    jQuery("blockquote").each( function() { //blokquote가 사용한 태그
        if (jQuery(this).attr('class'))
        // 그중 클래스명 있는 것만 찾기
        {
            var temp = jQuery(this).html(); // 내용 복사
            temp = temp.replace(/\n/gi, "");
            temp = temp.replace(/<BR>/gi, "\n");
            temp = temp.replace(/<BR \/>/gi, "\n");
            temp = '<pre><code class="'+ jQuery(this).attr('class') + '">'+temp+'<\/code><\/pre>'
            jQuery(this).after(temp);   // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
            jQuery(this).remove();         // 기존의 인용태그 삭제
        }
    });
    hljs.initHighlightingOnLoad();
});
</script>