리눅스를 사용하면서 FTP 설정을 해 놓으면 여러모로 편한 점이 있습니다. 저의 경우엔 주로 Windows 환경의 OS를 사용하다가 웹 서버에 어떤 파일을 업로드 하거나 웹 페이지를 변경 할 일이 있으면 FTP를 이용해서 변경을 합니다. 직접 서버에 접속을 해서 변경할 수도 있지만 아무래도 편집기 환경이 윈도우와 다르기 때문에 작업하기가 힘들 수도 있기 때문이죠. 

 이럴 때, FTP 가 사용 가능하면 좋은데, 이번에 우분투를 사용하게 되어 우분투에 FTP를 설정하는 방법을 포스팅 하게 되었습니다. ( 나중에 보고 따라할 수도 있어서 기록 해 놓으려구요 ㅎㅎ )

 일단 저는 우분투에 SSH를 이용한 터미널 작업으로 세팅하도록 하겠습니다. 서버 관리에서 직접 서버 컴퓨터에 가서 모니터 켜고 콘솔 작업을 하는 사람은 많지 않을테니까요 ㅋㅋ 저는 한글 PUTTY를 이용해서 접속을 했습니다. 일반 Putty로 접속을 하니까 우분투의 한글이 깨지더라구요. 세팅하기 귀찮아서 한글 PUTTY로 접속을 하였습니다. 

한글 putty 다운로드


 네 우분투에 FTP를 설치하는 명령어는 매우 간단합니다. 

$ sudo apt-get install vsftpd
$ sudo vi /etc/vsftpd.conf

두 명령어를 입력하시면 FTP 데몬이 설치되고, 설정 페이지가 나옵니다. 
여기서 아래의 세군데의 주석을 해제 하시고, 다음과 같이 세팅을 해줍니다. 
==================== 편집기 ======================
anonymous_enable=NO
local_enable=YES
write_enable=YES
=================================================


$ sudo /etc/init.d/vsftpd restart

그리고 FTP 데몬을 재시작 시켜 주시면 완료!!

 
그럼 직접 따라해 볼까요? PUTTY를 이용해서 여러분의 서버에 접속을 하시면 다음과 같은 화면이 뜹니다. 



이제 첫 번째 명령어를 써 넣습니다. 
첫번째 명령어는 
$ sudo apt-get install vsftpd

였죠? 이 명령어는 vsftpd 라는 데몬을 설치하라는 명령어입니다. 




여기서 한글이 깨져서 나오는 경우가 있는데 그런 경우엔 다음 링크를 참조하시기 바랍니다. 

2010/07/22 - [컴퓨터 공학/OS/Linux/Windows] - putty 한글 깨짐 현상 해결

네 이제 vsftpd 데몬이 설치가 되었구요. 

$ sudo vi /etc/vsftpd.conf

위 명령어를 입력하면 vsftpd 의 설정에 관한 내용들을 볼 수 있습니다. 
굉장히 긴데요. 문장이 #으로 시작하는 것은 주석처리가 된 것으로 설정에 영향을 미치지 않는 부분들입니다. 


설정 내용 중에 잘 보시면 위의 3가지를 볼 수 있습니다. 
각각 다음과 같이 변환을 해 줍니다. 

anonymous_enable=NO
local_enable=YES
write_enable=YES

맨 처음 anonymous_enable 은 YES 에서 NO로 바꿔 주시구요
다음 두개는 맨 앞의 # 을 제거해 주시기만 하면 됩니다. 

VI 에디터 사용법은 다음 링크를 따라가 보시기 바랍니다. 

http://www.cyworld.com/duck_info/3551206


$ sudo /etc/init.d/vsftpd restart

그리고 위 명령어를 입력하여 데몬을 다시 시작합니다. 




이제 FTP 프로그램으로 접속을 해보겠습니다. 
간단하게 알 FTP로 실험을 해보겠습니다. 


접속이 잘 되네요. 
근데 한글은 또 왜 깨지나요 ㅋㅋ 
이제 서버와 여러분의 컴퓨터와의 FTP 설정이 끝났습니다. 그냥 웹 하드처럼 쓰셔도 될 듯 하네요.

출처 : http://plusblog.tistory.com/416

'공부 > 일반' 카테고리의 다른 글

리눅스서버에 APM설정  (0) 2012.09.11
리눅스 일반계정 관리자권한주기  (0) 2012.08.31
리눅스접속  (0) 2012.08.24
티스토리 코드하이라이터 사용2  (0) 2012.08.23
티스토리에 부트스트랩 적용하기  (0) 2012.08.22

http://www.1000dedi.net/rew1/cloud/con_manual_lnx.html

웹 사이트를 돌아다니다보면, 포스트 중에 프로그래밍 코드를 읽기 쉽게 보여주는 뷰어를 제공한다. 바로 Syntax Highlighter를 사용한 것이다. 우리나라에서는 코드 하이라이트라고 더 많이 알려져있다. 코드 하이라이트는 오픈소스 라이센스(L-GPL)를 따르기 때문에 누구나 사용할 수 있다.






1. 코드 하이라이트(Syntax Highlighter) 다운로드

  • 다운로드 : 




2. 코드 하이라이트(Syntax Highlighter) 업로드
  • 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드 될것이다.

  • 코어 필수 파일 : scripts/shCore.js
  • 언어 선택 파일 : scripts/shBrush*.js
    • 사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
  • 스타일 선택 파일 : styles/shCore*.css
    • 스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
  • 테마 선택 파일 : styles/shTheme*.css
    • 테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.





3. 코드 하이라이트(Syntax Highlighter) 설정

  • head 태그 사이 title 위에 아래 태그를 넣는다.
  • 필자는 언어 JS파일을 다섯개 설정하였다. 모든 언어를 설정해둘 수도 있지만, 웹페이지 용량만 커지기 때문에 사용할 언어만 설정하는 것이 좋다.
  • 스타일과 테마는 Default로 설정하였다. 각자 스타일과 테마를 테스트해보며, 원하는 스타일을 찾으면 되겠다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- [RUNPEACEYA] Syntax Highlighter Setting Start -->
<!-- 필수 JS files -->
<script type="text/javascript" src="./images/shCore.js"></script>
  
<!-- 사용할 언어 1개이상 추가 -->
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
 
<!-- 사용할 스타일 택일 추가 -->
<link href="./images/shCoreDefault.css" rel="stylesheet" type="text/css">
 
<!-- 사용할 테마 택일 추가 -->
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript">
//<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
//]]>
</script>
<!-- [RUNPEACEYA] Syntax Highlighter Setting End -->


  • 크롬 브라우저를 위해 css 파일에 다음 구문을 추가한다. 필자는 글씨 크기를 조금 줄였다.
1
2
3
4
div .syntaxhighlighter {
    overflow-y: hidden!important; overflow-x: auto!important;
    font-size:0.9em !important;
}




4. 코드 하이라이트(Syntax Highlighter) 사용하기

  • 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위에 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안쪽에 코드를 입력하면 된다.
1
2
3
4
5
<pre class="brush:브러쉬명">
 
   코드 기입~!
 
</pre>



  • 언어 JS파일과 브러쉬명은 아래와 같다.
언어[브러쉬명]파일명
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
(출처 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)

관리자 페이지에서, 'HTML/CSS 편집' 클릭. <head> </head>사이에 아래 코드 삽입

<link href="http://bobss.dothome.co.kr/bootstrap/css/bootstrap.css" rel="stylesheet">



예시부분
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>
  4. 이런식으로 코드넣기

<div class="bs-docs-example">예시부분 </div> <pre class="prettyprint linenums" style="margin-bottom: 9px;"> <ol class="linenums"> <li class="L0"> <span class="tag">&lt;pre&gt;</span> </li> <li class="L1"> <span class="pln"> &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;</span> </li> <li class="L2"> <span class="tag">&lt;/pre&gt;</span> </li> <li class="L3">이런식으로 코드넣기</li> </ol>

</pre>

예시부분2 
/* 그냥 <pre class="prettyprint"> 로 해주면된다.

<div class="bs-docs-example"> 예시부분2 </div> <pre class="prettyprint"> 라인없이 넣기 </pre>


웹페이지 제작시, 아래 코드를 삽입하면 모바일기기로 접속할 때 인식하여

자동으로 지정한 페이지로 이동하게 할 수 있다.

<script type="text/javascript"> 
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); 
for (var word in mobileKeyWords){ 
    if (navigator.userAgent.match(mobileKeyWords[word]) != null){ 
        location.href = "모바일웹 주소 ex)http://m.naver.com"; 
        break; 
    } 
 }
 </script> 


[윈도우] Git 사용하기 Develop Tip

바로 이전 블로그에서 git 의 기본 맛보기를 해 보았습니다.
그것은 우분투에서 명령으로 사용해본 git 였다면 이번에는 동일한 것을
윈도우에서 진행해 보겠습니다.

우선 윈도우용 git 프로그램인 msysgit 에서 가장 최신(상단)의 exe를 설치합니다.

그 다음의 설치는 두세 가지 정도만 제외하고 모두 디폴트로 설치했습니다.

설치 안내 창에서 "Next"

라이센스에서 다음,

여기도 디폴드로 하고 다음,

여기도 디폴트로 놓고 다음,

그룹도 디폴트로 놓고 다음,

명령창에서도 git 명령을 사용하기 위하여 세번째 항목을 선택하고, 다음,

자체 OpenSSH 보다는 Putty 를 사용하고 있으므로 두번째를 선택하고, 다음

일단은 윈도우와 리눅스 개발이 분리가 되므로 세번째 항목을 선택하고, 다음

자~ 설치가 끝났습니다.
환경 설정은 알아서 넣어주었기 때문에 명령창을 띄웁니다.

제일 먼저 환경 설정을 위하여 git config --globla 명령을 주었는데 위와 같이 오류 발생했습니다.
(지난번 2월달에 받은 버전에서도 오류가 났었는데요, 뭐... 다음과 같이 하여 해결합니다)

자신의 사용자 디렉터리에 있는 .gitconfig 파일을 우선 삭제하고 나서,
글로벌 설정을 넣으니 이상없이 들어가네요.

일단, W:\VS2010 폴더의 내용을 git 에 넣기위하여 작업을 진행하기전,
해당 폴더 안에서 .gitignore 파일의 내용을 다음과 같이 넣어 줍니다.

*.o
*.obj
*.lo
*.la
*.al
.libs
*.so
*.so.[0-9]*
*.a
*.pyc
*.pyo
*.rej
*~
#*#
.#*
.*
.DS_Store
Debug
Release
*.old
*.bak

위와 같이 넣어 주었습니다.


다음으로 글로벌 ignore 에 위의 파일을 지정해 줍니다.

W:\> git config --global core.excludesfile w:\.gitignore


git init
git add .
git commit -m "init"

를 해 줍니다.

w:\> 에 가서 vs2010 대신 저장소 파일만 가진 vs2010.git 를 다음과 같은 명령어로 만듦니다.

git clone --bare vs2010 vs2010.git

Putty를 이용하여 접속을 하므로, 위와 같이 원격 접속되는 프로파일 (위의 그림에서는 git) 을 만들어 잘 SSH 접속이 되는지 확인합니다.
(가능하면 ssh-keygen 혹은 puttygen 등을 이용한 id_rsa.pub 키를 상대편의 .ssh/authorized_keys 에 넣어주어 암호 없이 접속 하도록 해 줍니다)

이제 기존의 소스는 rename 시킵니다. (나중에 같은 것을 보고 삭제할 것입니다)

W:> ren vs2010 vs2010.old

putty 의 scp인 pscp 명령으로 위와 같이 원격 서버에 디렉터리 통째로 복사해 넣었습니다.

이제 원격 서버에 있던 것을 위와 같이 ssh URL로 cloning 시켜줍니다.
(기존에 있었던 vs2010은 old로 rename 시키거나 삭제 후 해 주시기 바랍니다)

여러 Visual Studio 2010 프로젝트를 빌드한 후, git status 를 확인하였습니다.

git commit -m 'first commit'
을 하고 난 후, 
git push
명령을 주었더니 위와 같이 Git 2.x 버전에서는 

git config --global push.default upstream
을 하라고 하는군요.

git push
명령으로 원격 서버에 로컬 저장소에 commit 한 것을 보내고,

git pull
명령으로 원격 서버에 다른 사용자가 push 시킨 결과를 로컬로 가져옵니다.

이상으로 윈도우에서 Git 를 살펴보았습니다.

Visual Studio용 Extension이 있으나 이상하게 명령행이 더 쉽네요.
(탐색기에 tightly-coupled 되어 있습니다)

어떤 분께는 도움이 되셨기를 바랍니다 ^^




 



이클립스에서 파일을 작성하게 되면 기본적으로 MS949로 인코딩하게 되어있다.

하지만 나중을 위해서라면 인코딩을 UTF-8로 설정하고 작업하는 편이 좋다.

설정 방법 
Window -> Preferences -> General -> Workspace



위 그림과 같이 Text file encoding 부분을 UTF-8로 바꾸면 된다.



다들 아시다시피 GET과 POST는 HTTP프로토콜을 이용해서 서버에 무언가를 전달할 때 사용하는 방식입니다. 웹개발자라면 당연히 알고 있어야 하는 사항이고 이걸 모르면 웹개발자체를 할 수가 없습니다. 상당히 기초적인 부분이긴 한데 잘 모르시는 분들도 있고 해서 미루고 미루던 포스팅을 이제야 합니다. ㅎㅎ GET과 POST 얘기를 하니까 예전 생각이 납니다. 예전이라고 해봤자 불과 2년밖에 되지 않았군요. 졸업을 앞두고 어떤 회사에 면접을 봤었는데 거기 이사님이 저에게 GET과 POST의 차이점이 뭐냐고 물었었는데 전 그땐 그게 무슨말인지도 몰랐죠. 떨어진 이유가 아마 그거이지 싶네요.. ㅎㅎㅎ(지금 생각하면 창피하군요)



어쨌든 처음 웹개발을 하게 되면 한번쯤은 생각하게 되는 문제 입니다. GET과 POST는 머가 다를까.... 하는.... 저도 처음엔 이게 상당히 궁금했습니다. 흔히 얘기하는 GET과 POST의 차이는 다음과 같습니다.(배울때 당시 이해하던 수준정도로만 적습니다.)

  • GET은 주소줄에 값이 ?뒤에 쌍으로 이어붙고 POST는 숨겨져서(body안에) 보내진다.
  • GET은 URL에 이어붙기 때문에 길이제한이 있어서 많은양의 데이터는 보내기 어렵고 POST는 많은 양의 보내기에도 적합하다.(역시 용량제한은 있지만)
  • 즉 http://url/bbslist.html?id=5&pagenum=2 같이 하는 것이 GET방식이고 form을 이용해서 submit을 하는 형태가 POST입니다.
처음 배울때 배운건 이정도뿐이었던 것 같습니다. 위 내용은 맞는말이긴 하지만 이로썬 해결안되는 문제가 있습니다. 그건 언제 GET을 쓰고 언제 POST를 써야 하는가에 대한 문제였습니다. 이건 신입일때 꽤 오랫동안 생각하고 있었던 문제이기도 하는데 딱히 가르쳐 주는 곳은 없었습니다. 지금와서 보면 책에 이에 대해 나와있는 책들이 상당히 많이 있습니다만 웹표준에서도 그러하듯이 현업의 개발에서는 "원래의 목적에 맞게 기술을 사용하고 있는가?"에 대해서는 크게 관심이 없고 "어떤 기술이든 기능을 구현할 수 있는가?"에만 관심을 가지는 것이 전반적으로 깔려있기 때문에 이런 부분에 대해서 관심을 가지는 개발자는 빈도수로 봤을때 그리 많지 않은 듯 합니다. 어쨌든 쉽게 말하면 클라이언트에서 서버로 데이터를 전송하려면 GET 아니면 POST밖에 없습니다.(사실 HTTP에는 PUT, DELETE등등 몇가지 더 있지만 그건 이글의 범주에서 벗어나서 언급하지 않습니다. 사실은 잘 몰라서 ㅡ..ㅡ HTTP 1.1 스펙  참조)

id를 넘겨서 게시판의 리스트를 가져온다고 하면 당연히 GET을 쓸 것이고 글을 작성한다고 하면 POST를 작성하는 것이 일반적입니다. 전달해야 될 양이 많을 경우에는 고민없이 POST를 쓰게 되지만 양이 많지 않은 경우에는 GET도 되고 POST도 되기 때문에 고민이 시작됩니다. GET을 써야하나 POST를 써야하나. GET을 쓰면 URL이 깔끔해 지는 효과도 있기 때문에 작은 양을 여러개 전달해야 할 경우에는 POST를 써야하는가 하는 고민을 하게됩니다.(상당히 명백한 차이인듯 하면서 실제로 개발하다보면 고민하게 되는 경우가 좀 있더군요. 저만 그런지 모르겠지만...)


Image by dbking  via Flickr 

여기서 위의 언급한 차이점 외에 GET과 POST의 중요한 개념이 있습니다.

GET은 가져오는 것이고 POST는 수행하는 것입니다


이 개념만 잘 생각하고 있으면 상황에 따라서 어느정도 선택을 할 수 있습니다.(물론 그래도 좀 고민되는 예외상황들은 있게 마련이죠.) 좀 자세히 설명하면
 
GET은 Select적인 성향을 가지고 있습니다. GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태등을 바꾸지 않습니다. 게시판의 리스트라던지 글보기 기능 같은 것이 이에 해당하죠.(방문자의 로그를 남긴다거나 글읽은 횟수를 올려준다거나 하는건 예외입니다.) 반면에 POST는 서버의 값이나 상태를 바꾸기 위해서 사용합니다. 글쓰기를 하면 글의 내용이 디비에 저장이 되고 수정을 하면 디비값이 수정이 되죠. 이럴 경우에 POST를 사용합니다. 



이 얘기를 하면 어느곳에서곤 반드시 예시로 나오는 것이 Google의 Accelerator 사건입니다.(대표적으로 예를 들게 이거밖에 없나봅니다. 항상 거론되는걸 보면...) Accelerator라는 것은 그이름대로 웹서핑의 속도를 향상시킬 목적으로 구글이 발표한 것이었습니다. 어떤 웹사이트에 갔을때 페이지에 있는 URL등을 Accelerator가 미리 모두 클릭해봐서 사용자가 해당 URL로 이동하기 전에 이미지등의 미리 받아놓을 수 있는 것들을 받아놓는 역할을 해서 웹서핑의 체감속도를 높여주는 것이 목적이었습니다. 캐시때문에 한번 방문한 사이트는 더 빨리 뜨는 것을 이용한 것이죠.

구글러들은 위에서 언급한 GET과 POST의 개념을 확실히 이해하고 이를 당연하다고 생각하는 사람들이었을 테니 이것이 문제가 될꺼라고는 전혀 생각지 못한듯 합니다. 하지만 현실은 그렇지 않죠. 실제 많은 개발자들은 GET과 POST를 용도구분없이 혼용해서 사용했고 Delete같은 곳에도 GET방식을 편의대로 이용한 것입니다. Accelerator는 이것을 구분하지 못하니 URL만 보였다 싶으면 냅다 클릭을 해댄 것이고 사용자가 클립한 것이 아닌 Bot이 직접 URL로 접근해버리자 해당 데이터들은 Delete를 수행해버려서 메일이나 게시글이 마구 지워지는 사태가 발생하였습니다. 좋은 의도였는데 상당히 안좋은 결과가 되었죠. 우리가 모두 이걸 지켰다면 훨씬 좋은 웹 환경이 됐을 텐데요.



그리고 가져오는 곳에 GET을 사용해야 하는 이유가 하나 더 있습니다. 얼마전에도 관련해서 포스팅한 적이 있지만 웹의 핵심이라고 할 수 있는 Link문제입니다. 기본적으로 웹에서 모든 리소스는 Link할 수 있는 URL을 가지고 있어야 합니다.(퍼머링크(permalink)1퍼머링크라면 더 좋겠지만 꼭 퍼머링크가 아니라고 하더라도) 그래야 Link를 할 수 있으니까요. 쉽게 말하면 어떤 페이지를 보고 있을때 다른 사람한테 그 주소를 주기 위해서 주소창의 URL을 복사해서 줄 수 있어야 한다는 것입니다. POST를 할 결우에는 값이 내부적으로 전달되기 때문에 URL만 전달할 수 없죠. 글을 저장하는 경우에는 URL을 제공할 필요가 없기 때문에 POST를 해도 상관이 없는 것이고요.

다른 것들에서도 그렇듯이 GET과 POST도 그냥 만들어진 것이 아니기 때문에 스펙에 정의된 용도대로 사용한다면 위에 언급한대로 부가적으로 얻을 수 있는 이익이 많이 있고 전체 웹을 생각해도 올바르다고 생각합니다.
Footnote.
  1. 는 인터넷에서 특정 페이지의 고유한 URL 주소를 뜻한다. 이 주소는 어떤 상황에도 관계없이 항상 동일한 내용을 가지는 페이지로 링크된다는 의미에서, 고유(permanant)한 주소라는 뜻의 permanant link를 줄여 만든 말이다. 한국어로 고유링크, 고유주소 등으로 부르기도 한다. - Wikipedia 발췌 - [Back]


[펌!!] 출처 http://sangs.tk/41


티스토리에  코드 하이라이트 설치하기 [SyntaxHighlighter]

1. 여기에 접속해서 3.0.83 http://alexgorbatchev.com/SyntaxHighlighter/download/ 다운받는다.

티스토리 html/css편집을 눌러 skin에 </body>와 </html> 사이에 아래 소스를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.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/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<link rel="stylesheet" type="text/css" href="./images/shCore.css">
<link rel="stylesheet" type="text/css" href="./images/shThemeRDark.css">
  
<script type="text/javascript">
    SyntaxHighlighter.all();
    dp.SyntaxHighlighter.HighlightAll('code');
</script>


style.css 아무곳에나 아래를 추가한다.

1
div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }


다운받았던 파일을 압축해제후  scripts, style폴더만 파일을 전부 업로드해준다.

사용법은 간단하다

1
2
<pre class="brush:php">코드내용
</pre>


+ Recent posts