블로그 코드 삽입
웹,또는 프로그래밍 관련 포스팅을 하는 블로거에게는 코드삽입 해야 될것이 필수이다.
이 같은 소스를 쉽게 보여주기 위해 사용하는 것
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/
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 등을 추가시켰다.
댓글