본문 바로가기
카테고리 없음

블로그 코드 삽입 SyntaxHighlighter와 그외 방법

by 샷타이거 2009. 8. 20.

블로그 코드 삽입

웹,또는 프로그래밍 관련 포스팅을 하는 블로거에게는 코드삽입 해야 될것이 필수이다.

이 같은 소스를 쉽게 보여주기 위해 사용하는 것

SyntaxHighlighter

가장많이 사용해 왔던것들 이에대한설명은 많고 버전도 여러가지고 설치방법도 찾아보면많다.

일단 추천링크 아래블로그가서 따라하면 된다.

http://babochi.tistory.com/7 , http://babochi.tistory.com/6

http://rookiecj.tistory.com/232

#SyntaxHighlighter{ display:block; color:#000;}

위와같이표현되는것을 볼수있다.

설치에 너무부담있고.. 보기에도 그닥 좋지않아서 다른걸 우연히발견했는데..

다음은 최근 내가 포스팅하면서 쓰는것

highlight

이사이트를 보고할게되었다.드림위버와 같이 사용된모습이 잘보일것이다.
http://www.webdesignerwall.com/tutorials/beautiful-css3-search-form/

원 사이트는 여기이다. http://softwaremaniacs.org/soft/highlight/en/

1. 주소에가서 다운로드클릭 DOWNLOAD

2. 필요한 언어를 선택하라는 문구가 뜰것이다. 체크하고 다운

3. 압축파일을 열면 아래 두파일이보일것이다.pack는 코드압축버전


   4. 둘 중 아무거나 적절한곳에 파일을 올려주고
      티스토리 스킨-> HTML/CSS 편집->html 코드 에서 스크립트로 링크걸어주자

   <script src="파일 올린 주소/highlight.js" type="text/javascript"></script>

   5. 프로그램 언어 선택 업로드
       이젠 원하는 프로그램 코드를 올린다. 대표적으로 쓰이는 HTML, CSS, JAVASCRIPT를 올려보겠다.
       이들파일주소는 languages안에 있다. html-xml.js,css.js.javascript.js 그림참조


그리고 다시 스크립트를걸어준다.중요한것은 languages폴더안에 파일을 올려야한다는것

<script src="파일 올린 주소/languages/원하는언어.js" type="text/javascript"></script>

<script src="파일 올린 주소/languages/html-xml.js" type="text/javascript"></script>
<script src="파일 올린 주소/languages/css.js" type="text/javascript"></script>
<script src="파일 올린 주소/languages/javascript.js" type="text/javascript"></script>

6.적용시키는 스크립트 추가 : 이유불문 그냥 링크시켜줌

 <script type="text/javascript">
     hljs.tabReplace = ' ';
       hljs.initHighlightingOnLoad();
</script>

7. 테마설정

 이젠 테마를선택하자.아래주소가서 클릭해보면 여러테마를 볼 수있다.

http://softwaremaniacs.org/media/soft/highlight/test.html

스타일에보면 여러 css파일이보인다 그 중 원하는 테마를 올려주고 링크시켜주자

<link rel="stylesheet" media="screen" type="text/css" href="파일올린주소/테마이름.css" />

8. 사용방법

<pre>  
 <code class="프로그램언어"> ex<code class="css">

   소스 어쩌고 저쩌고
</code>
</pre>

9. 더자유롭게 꾸미기 업데이트

굳이 저테마말고도 간단하게 꾸며줄수도 있다.
CSS에능숙하다면 티스토리 스킨편집-> css에서 간단히 달아줘도 된다. 개인적으로 쓰는것은 아래와같다.

배경에 격자무늬를하도록 추가시켜줬다. 이처럼 자유롭게 꾸밈이 가능하다.


pre code {
background:transparent url(images/code-bg.gif) repeat scroll 0 0;
border:1px solid #CCCCCC;
clear:both;
color:#333333;
display:block;
line-height:140%;
margin:5px 0 15px;
overflow:auto;
padding:10px;
white-space:pre;
width:470px;
}



업데이트느 다음과 같은경우이다. 현재 CSS3,HTML5 로 넘어가는추세이다. 따라서 코드를 슬때 추가된 section,figure엘리먼트 라던가 CSS3의 text-shadow등은 원하는 색으로 못나오는 경우가 있다.

이때 css,js, html-xml.js 에서 추가해주면된다. 아래그림은 두파일을 열어본 모습,

'새로추가할것' : 1 이런식으로 추가하면된다

html의경우 'article': 1 css의 경우 '-webkit-border-top-left-radius': 1 등을 추가시켰다.



댓글