티스토리 소스 코드 포스팅 syntaxhighlighter

잡동사니/블로그 2014. 1. 27. 21:22

프로그램이나 홈페이지관련 포스팅을 하다보면 소스코드를 이쁘게 포스팅을 해야겠다는 생각이 많이 듭니다.

이번에 저도 포스팅을 하면서 소스코드에대한 포스팅을 해볼까해서 찾아봤는데.. 좋은 방법이 있어서 소개합니다.

SyntaxHighlighter라는 곳에서 라이선스프리로 제공을 하고 있습니다. 이 SyntaxHighlighter를 이용하는 방법을 설명하도록 하겠습니다.

제가 티스토리를 운영하기 때문에 티스토리기준으로 설명을 하겠으나 다른 곳에서도 충분히 활용이 가능합니다.





개략적인 순서는 아래와 같습니다.

  1. SyntaxHighlighter에서 관련 소스 다운로드 및 압축풀기
  2. 티스토리 서버에 올리기
  3. 티스토리의 "HTML/CSS 편집"메뉴에 적용하기
  4. 글쓰기 시 소스코드 출력하기
  5. SyntaxHighlighter의 사용설명서




그럼 먼저 다운로드 받는것 부터 설명들어갑니다.

1. SyntaxHighlighter에서 관련 소스 다운로드 및 압축풀기


소스를 제공해 주는 사이트에 접속을 해서 다운로를 받습니다.

처음에 어디에서 다운을 받나 무지 찾았었는데 오른쪽에 보니 "download"라는 메뉴가 있더군요


다운로드 메뉴를 누르면 아래의 화면이 나옵니다. http://alexgorbatchev.com/SyntaxHighlighter/download



다운로드 후 압축을 해제하면 여러가지 파일과 폴더가 나오는데 그중에 "scripts"와 "styles"의 폴더가 가장 중요하며 그 안에 있는 파일들을 티스토리에 업로드를 해야 합니다.

 


2. 티스토리 서버에 올리기


이번엔 티스토리 서버에 올려야 합니다.

모든 파일을 올리면 좋지만 너무 많이 올리고 적용을 하면 트래픽이 많이걸려 사이트 로딩이 늦어질 수 있으니 꼭 필요한것만 선택해서 올리는것이 바람직할 것 같습니다.

먼저 scripts폴더를 보면..


빨간선택상자의 shCore.js는 꼭 올려야 하구요. 나머지 파일들 중에 파일명 끝에 있는 이름(노란색표시)을 보면 해당 프로그램 언어의 명칭이 나와 있습니다. 보시고 필요한 것만 골라서 서버에 올리시면 됩니다.


이번엔 styles폴더를 보면...


빨간표시의 파일은 기본으로 올려야 합니다. 그리고 나머지파일들은 테마 파일입니다. 맘에 드는것으로 하나만 선택하시면 됩니다.

보관해 놨다가 기분이 바뀔때마다 소스코드에서 테마를 바꾸셔도 되구요


티스토리의 업로드는 아래와 같이 "HTML/CSS 편집"메뉴에서 하시면 됩니다.

"HTML/CSS 편집"메뉴의 파일업로드에서 "추가"버튼을 누른 후 아까 선택해 두셨던 파일들을 올리면 됩니다.

올려진 파일은 모두 images폴더로 들어갑니다.



3. 티스토리의 "HTML/CSS 편집"메뉴에 적용하기


이제는 올려진 파일들을 skin.html과 style.css에 적용을 해야 합니다.

먼저 아래의 코드를 <HEAD> ........ </HEAD>사이에 복사해서 넣습니다.

만약 나오지 않는다면 경로를 상대경로(./image)에서 절대 경로로 바꾸면 나올 수도 있습니다.

예를 들면..

./images/shCore.js 를 http://cfs.tistory.com/custom/blog/8/80326/skin/images/shCore.js

이런식으로 바꾸어 보시면 됩니다


그리고 다음의 코드는.. 태그의 바로 위와 마지막에 적용을 하면 됩니다.

?
1
<pre class="brush: html"></pre>


4. 글쓰기 시 소스코드 출력하기


이제 기본 세팅은 완료되었습니다.

이제 티스토리의 글쓰기 시 소스코드가 나오게 표시하는 방법을 설명하도록 하겠습니다.


티스토리의 글쓰기 화면에서 1번 "HTML"를 선택해서 html입력모드로 전환합니다.

그리고 2번과 같이 소스를 입력하는데 입력하는 소스를 <pre>태그로 둘러싸고 class는 brush:프로그램명 을 쓰면 됩니다.


?
1
2
3
4
5
<pre class="brush: html">
       function test() { 
         alert("SyntaxHighlighter를 티스토리에 적용하세욥");
       }   
</pre>


출처: http://jos39.tistory.com/88

저작자표시

'잡동사니 > 블로그' 카테고리의 다른 글

티스토리 블로그 네이버 검색 등록  (0) 2014.01.28
티스토리 서식 테스트 샘플  (0) 2014.01.27
티스토리 자동 서식 활용하기  (0) 2014.01.27
티스토리 카테고리 분석  (0) 2014.01.27
티스토리 가입 방법, 초대장 받기  (0) 2014.01.27
AND

티스토리 자동 서식 활용하기

잡동사니/블로그 2014. 1. 27. 21:16

티스토리 기능 중 요긴하게 쓰이는 기능이 있다면, 바로 서식 기능이 아닐까? 라는 생각을 해보게 됩니다. 지금은 플러그인을 통해 구글 애드센스 광고가 지원이 되지만 이전만 하더라도 포스팅 마다 광고를 삽입하는 노가다(?)를 해야 했었는데, 이때 서식 기능을 잘 활용했던 기억이 납니다.

 

서식 활용하기

 

티스토리 서식을 사용하기 위해서는 서식을 만들어야 합니다. 글쓰기 모드에서 우측 상단을 보면 4개의 항목 중 서식 항목을 체크 합니다.

 

 

 

임의로 티스토리 서식 1이라고 작성하여 서식에 활용될 문구를 만들어 보았습니다. 다시 말씀드리지만, 우측 항목이 서식에 체크 되어 있어야 합니다.

 

 

 

서식이 완료 되었다면, 저장을 통해 서식을 마무리 합니다.

 

 

 

 

글 목록을 통해 살펴보면, 분류가 서식으로 되어 있음을 확인 할 수 있고, 발행 등에 체크 해제가 되어 있음을 알 수 있습니다. 말 그대로 운영자에게만 노출 되는 글입니다.

 

 

 

서식을 만들었다면, 글쓰기 모드에서 우측 하단에 보이는 서식 항목을 클릭합니다.

 

 

 

기본적으로 서식이 있는데, 상단에 방금 만든 티스토리 서식 1이 있습니다. 해당 항목을 클릭 하면 미리 작성된 서식이 본문에 삽입이 됩니다.

 

 

출처: http://gothink.tistory.com/362#.UuZOHzuweHt

저작자표시

'잡동사니 > 블로그' 카테고리의 다른 글

티스토리 서식 테스트 샘플  (0) 2014.01.27
티스토리 소스 코드 포스팅 syntaxhighlighter  (0) 2014.01.27
티스토리 카테고리 분석  (0) 2014.01.27
티스토리 가입 방법, 초대장 받기  (0) 2014.01.27
티스토리 사이드바 카테고리 펼치기  (0) 2014.01.25
AND

티스토리 카테고리 분석

잡동사니/블로그 2014. 1. 27. 15:03


블로그를 시작하면서 주제와 성격을 정하다 보면 카테고리 설정은 필수적은 설정일 것입니다.
또 스킨을 설정하다 보면 카테고리의 모양에도 신경이 쓰이고요.
스킨에 기본적으로 설정된 모양은 이상하게 자신의 스킨과 잘 맞지 않게 보이고 또 수정을 하려 티스토리 가이드를
찾아보아도 별다른 설명들이 안나옵니다.

그럼 그다음은 무엇을 할까요? 검색을 하겠죠. 저 같은 경우 검색을 하여도 딱 이거다 라는 결론을 내기기 힘들어 많은
시간을 소비하였네요. 그래서 전부는 아니지만 어느정도 효율적으로 사용할 수 있는  방법을 몇번에 걸쳐 설명하겠습니다.
일단 카테고리의 표현방법을 알아보기 전에 기본적으로 알아두면 이해하기 쉬운 내용을 설명하겠습니다.


 


위의 그림은 카테고리 설정 그림입니다. 카테고리는 리스트 구조입니다. 그래서 위에 그림 처럼 각각의 영역의 속성을
수정하면 박스 안의 내용이 모두 수정됩니다. 노란색은 녹색과 파란색을 포함 하고 녹색은 파란색을 포함 하고 있듯이
각 요소의 위치 등을 수정할때 그위의 요소의 위치도 같이 생각해야 합니다.

녹색영역의 위치만 수정하고 싶어도 파란색영역의 위치까지 같이 수정되므로 처음부터 잘 생각해야합니다.

각 영역을 CSS 코드로 보면
노랑 : #category ul { }
         #category ul li { }
녹색 : #category ul li ul { }
         #category ul li ul li { }
파랑 : #category ul li ul li ul { }
         #category ul li ul li ul li { }
입니다. 원하는 곳을 수정하고 싶을때 코드를 작성하시면 됩니다.


CSS 부분의 수정으로 아래 그림에 박스 부분의 스타일을 수정할 수 있습니다.


노랑 : 카테고리의 폴더 이미지를 포함하고 있는 셀의 스타일
          .ib { } 를 수정하여 스타일을 정함.
녹색 : 카테고리의 텍스트를 포함하고있는 셀의 스타일
          .branch3 { } 를 수정하여 스타일을 정함.
파랑 : 카테고리옆 갯수를 나타내는 숫자의 스타일
          .c_cnt { } 를 수정하여 스타일을 정함.


치환자를 이용하여 폴더 형식과 리스트 형식의 2가지 표현 방법이 있습니다.
이것은 html 부분을 수정하여 설정할 수 있습니다.

                                                          폴더 형식 (치환자 : [##_category_##])

                                                      리스트 형식 (치환자 : [##_category_list_##])


여기까지 카테고리 스타일을 설정할 때 어느곳을 수정해야 어느곳이 바뀌는가에 대해 알아 보았습니다.
일단 카테고리  스타일에 변화를 주고 싶다면 위에 표시된 곳을 CSS와 HTML에서 찾아보고 조금식 바꿔가며
변하는 모양을 보고 수정하시면 될 것입니다.
만약 위의 항목이 없다면 추가 하시어 수정하시면 원하는 결과를 얻을수 있을것 입니다.

내용 중 잘못된 부분을 알려주세요. 수정하겠습니다.


 

저작자표시

'잡동사니 > 블로그' 카테고리의 다른 글

티스토리 소스 코드 포스팅 syntaxhighlighter  (0) 2014.01.27
티스토리 자동 서식 활용하기  (0) 2014.01.27
티스토리 가입 방법, 초대장 받기  (0) 2014.01.27
티스토리 사이드바 카테고리 펼치기  (0) 2014.01.25
티스토리 다음뷰 자동발행 방법  (0) 2014.01.25
AND

티스토리툴바