도움이 되셨다면 로그인 안해도 되는 '공감' 한번 눌러주세요 ^,~
교육용 웹을 제작중 코드를 이클립스처럼 코드를 보게 해줄 방법이 없을까 많이 고민을 하다가
알게된 기능~
SyntaxHighLighter 티스토리에 적용 시키기!
웹버전을 차후~ 포스팅 할께요 ㅎ
SyntaxHighLighter란?
위와 같은 느낌으로 웹에 표현을 해주는 건데요!
1. SyntaxHighLighter Download
해당 기능을 다운로드부터 받아 볼까요? ^^
http://alexgorbatchev.com/SyntaxHighlighter/download/
해당 사이트에 들어가서 "Click here to download" 를 눌러서 다운해주세요!
다운받은 파일을 압축을 푸시면
위와 같은 폴더중에 "scripts" 폴더와 "styles" 폴더의 내용만 업로드 할꺼예요
scripts 에는 표시할 해당 언어들이 들어가 있고, CSS는 꾸며주는 거겠죠? ^^
scripts 안에서 내가 사용할 언어들만 골라서 넣어도 되요~ ( 전 아무래도 다 필요 할꺼 같아서 다 넣었어요)
이렇게 업로드가 진행이 되고!!!
업로드 된 js와 css를 적용시켜주기!!
파일업로드 옆에 HTML/CSS 탭으로 건너가주세요
그다음에
<head> </head>
헤드 태그 내부에
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
이걸 복사하셔서 넣어 주신뒤에
<body> 태그를 검색하셔서
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
이렇게 넣어 주시면 되요 ^^
이렇게 SyntaxHighLighter 의 설정은 끝! 다음으로!
사용방법!!!!
Syntax Highlighter 를 적용시에는
<pre> 태그나 <textarea> 태그에 넣어서 표현을 할수 있는데요~
대부분이 <textarea> 태그에 넣는걸 선호하시네요~
블로그 글 작성하는 공간에 보면 위와같이 HTML 편집기로 변환할수 있게 할수 있는데
HTML 편집기로 변환하셔서 내용을 넣을 구간에 직접 textarea태그를 넣어 주시고
안에 속성을 아래와 같이 넣어주세요
<textarea name="code" class="brush:사용할 언어;">
여기 textarea 사이에 태그를 끄적끄적!!
</textarea>
실사용 예제
<textarea name="code" class="brush:java;">
public class Average {
public static void main (String[] args) {
if(args.length == 0) {
System.out.println("인자가 없을때");
return;
}
int sum=0;
for (int i=0; i<args.length; i++) {
sum = sum + Integer.parseInt(args[i]); // 인자를 정수로 변환하여 합산
}
System.out.println(sum/args.length); // 평균 출력
}
}
</textarea>
적용 되었을때!!
이상 끄읕;
도움이 되셨다면 로그인 안해도 되는 '공감' 한번 눌러주세요 ^,~
'Humanities > .etc' 카테고리의 다른 글
| 블로그 구글 애드센스 넣기 (수정중) - 상단 하단 (0) | 2014.04.29 |
|---|---|
| O형 혈액형의 출생월별 성격 (0) | 2013.05.29 |
| B형 혈액형의 출생월별 성격 (0) | 2013.05.29 |
| A형 혈액형의 출생월별 성격 (0) | 2013.05.29 |
