BLOG ARTICLE 소스 | 3 ARTICLE FOUND

  1. 2014.01.28 티스토리 syntaxhighlighter 소스 포스팅시 오류 해결
  2. 2014.01.27 티스토리 서식 테스트 샘플
  3. 2014.01.27 티스토리 소스 코드 포스팅 syntaxhighlighter

티스토리 syntaxhighlighter 소스 포스팅시 오류 해결

잡동사니/블로그 2014. 1. 28. 16:53

티스토리 블로그 포스팅을 하다보면..
어떤 곳에는 잘되다가 어떤곳에서는 깨짐 현상이 발생해서 하이라이터를 적용 할 수 없는 곳이 있습니다. 결국에 원인은 1<10 바로 이놈!! '<' 이였습니다.

 

글쓰기 html 모드에서 <    ->(바꾸자)   &lt; 이렇게 바꾸면 에러는 사라질 것 입니다.

 

 

public static void main(String[] args) {

		for(int i=2; i<10 ; i++){

			for(int j=1 ; j<4; j++){

				System.out.println(i+" * "+j+"="+i*j);

			}

		}

	}

 

 

---------------------- HTML 모드에서 적용해야 합니다. -------------------------
  for(int i=2; i<10 ; i++){    =>   for(int i=2; i&lt;10 ; i++){
 for(int j=1 ; j<4; j++){     =>   for(int j=1 ; j&lt;4; j++){ 
------------------------------------------------------------------------------------

저작자표시

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

티스토리 블로그 네이버 검색 등록  (0) 2014.01.28
티스토리 서식 테스트 샘플  (0) 2014.01.27
티스토리 소스 코드 포스팅 syntaxhighlighter  (0) 2014.01.27
티스토리 자동 서식 활용하기  (0) 2014.01.27
티스토리 카테고리 분석  (0) 2014.01.27
AND

티스토리 서식 테스트 샘플

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

 

소제목

 

1. 타이틀 작성용

 

 

포인트 내용 요약용

 

1. 제목

중요 한 내용 표시 어쩌구 저쩌구

일반 내용 쓰기

 

 

목록 작성용

 

  1. 목록 작성용
  2. 2
  3. 3
  4. 4 

 

 

프로그램 소스 (SyntaxHighlighter)
 

       function test() {  
         alert("SyntaxHighlighter를 티스토리에 적용하세욥");
       }	




 


 


 


 

            



                    

  





  



  





    
        
            저작자표시 
        
    


  




                    


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

  

    

      티스토리 syntaxhighlighter 소스 포스팅시 오류 해결  (0)
      2014.01.28
    

    

      티스토리 블로그 네이버 검색 등록  (0)
      2014.01.28
    

    

      티스토리 소스 코드 포스팅 syntaxhighlighter  (0)
      2014.01.27
    

    

      티스토리 자동 서식 활용하기  (0)
      2014.01.27
    

    

      티스토리 카테고리 분석  (0)
      2014.01.27
    

  






			

			
			

				

					
					
					 AND 
					
					
				

				

			

			
			


	

	


                 
             
                 
	
	

			

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

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

			

				            



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


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


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


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
















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




    

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

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

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

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

  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 
					
					
				

				

			

			
			


	

	


                 
             


			
			


		


		


		
	





  
티스토리툴바