본문 바로가기

IT

블로그 제대로 시작하기, '하이라이트'

방망이를 깎는 노인처럼,
눈과 손에 착 맞는 코드덩어리를 양산하는 녀석이 있었습니다.
'낮이밤이'의 공격적인 헌신으로,
오픈소스 커뮤니티에서도 제법 명성을 날리던 녀석이었습니다.

어느날 그 녀석이 내게 말했습니다.
"나 이제 그만둔다."

그날 받은 충격으로 이 블로그를 개설합니다.


블로깅 중에 덕지덕지 붙여가며 사용할- '코드'를 읽기 쉽게 표기하려면,
오만가지의 syntax highlighter 중 그럴듯한 녀석을 찾아 적용하면 됩니다.
잠시의 구글링으로 넘쳐나는 syntax highlighter 중에,
붉은색을 전면배경으로 내세운 highlight.js의 센스를 믿어보기로 합니다.

언제나,
피같은 Red는 진리.



목차와 같은 품격을 지닌 마인드맵 한장부터 공개합니다.


 

  1. http://highlightjs.org 사이트에서 "Get version X.X"를 눌러주세요.
    자신이 사용할 언어를 Common과 Other탭에서 체크하기.
    하단의 "Download" 버튼을 눌러 다운로드 받아주세요.


  2. 티스토리 관리페이지 > 꾸미기 > HTML/CSS 편집 > 파일업로드 > 추가
    위의 경로를 통해 다운로드 받은 파일을 업로드하기.
    다운로드 받은 압축파일의 압축을 푼 후,
    root 폴더에 있는 highlight.pack.js와 styles 폴더에 있는 모든 파일을 업로드해야해요.





  3. 티스토리 관리페이지 > 꾸미기 > HTML/CSS 편집 > HTML/CSS 탭 > skin.html
    위의 경로로 진입하여 <head>...</head> 사이에 넣어두세요.
    stylesheet 에는 미리 highlightjs.org의 예시를 참조하여 원하는 css파일을 채워두기

    <LINK rel=stylesheet href="./images/default.css">
    <SCRIPT src="./images/highlight.pack.js"></SCRIPT>
    <SCRIPT>hljs.initHighlightingOnLoad();</SCRIPT>





  4. 본문을 작성하며, 실제 코드를 넣을 시점에 'HTML' 형식으로 변환하고,
    사용할 곳에 다음 태크를 넣기.


    <PRE><CODE CLASS="원하는 언어">코드</CODE></PRE>


  5. 간단하게 Hello, world로 테스트해보면 아래와 같이 나오죠~

    
    #include <stdio.h>
    
    int main(int argc, void **argv)
    {
        printf("Hello, world\n");
        return 0;
    }

 

 

 


끝_