직업이 프로그래머 인지라..
블로그에 글을 올릴때
소스코드를 올리고 싶을때가 있다.
워드프레스에는 플러그인이 많이 있었는데.
티스토리에서 사용할 수 있는걸 찾다가
찾은게 바로..
SyntaxHighlighter
일단 아래 주소로 들어갑니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
들어가서 아래 빨간색 영역을 클릭해서
다운로드 받습니다.
다운받고 나서
압축을 푼다음 관리창으로 들어간 다음에
아래 순서대로 들어가 다운받은 파일들을 올려 줍니다.
만약 용량이 부족하다면
아래 2개의 폴더만 올려도 되긴 합니다.
(Mac 에서도 마찬가지 입니다.)
올리고 나서
아까 파일을 업로드 탭의 바로 옆에 있는
HTML/CSS
탭을 선택하고 컨트롤+에프 (CTRL + F) 로
</head>
를 찾아서 바로 윗부분에 아래 코드를 복사해 붙혀 넣어줍니다.
그 다음에
다시 컨트롤+에프 (CTRL + F) 로
<body>
를 찾아서 <body> 이 부분을 아래의 코드로 덮어 씌워줍니다.
( <body> 이부분을 아래의 코드로 대체 해야 합니다. )
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
다시 이렇게만 하면 일단 세팅은 완료 됩니다.
간단한 코드사용 방법은 아래의 코드를
알맞게 설정 한다음에 복사합니다.
<textarea name="code" class="'brush: 사용할 언어;">소스코드 내용</textarea>
( Ex )
<textarea name="code" class="'brush: cpp;">
std::cout << "HelloWorld";
</textarea >
그다음 글을 쓸때
아래의 빨간색 영역을 체크해 줍니다.
그러면 글쓰기 모드가 Html 모드로 바뀌는데.
글쓰는 곳에 아까 복사했던 부분을 붙여 넣어 줍니다.
붙여 넣고 미리보기를 하면
아래처럼 소스코드가 적용된 것이 보입니다.
소스코드를 쓸때는 잠깐 Html 모드로 바꿔서 넣어주면 됩니다.
http://alexgorbatchev.com/SyntaxHighlighter/
'Tip' 카테고리의 다른 글
| [Tip] 내 블로그 로딩속도 분석하기 (0) | 2015.04.01 |
|---|---|
| [Tip] 최근 iPhone 디바이스 해상도 (0) | 2015.04.01 |
| [Tip] Mac 에서 확인되지 않은 개발자가 배포 했다고 실행 안될 때 (0) | 2015.03.25 |
| [Tip] Office 깔끔하게 지우는 방법 (0) | 2015.03.25 |
| [Tip] 서버 검증 오류 해결 방법 (0) | 2015.03.25 |