SyntaxHighlighter v3 플러그인 설치

공부 이야기

SyntaxHighlighter v3 플러그인 설치

판다(panda) 2017. 6. 10. 00:00

코드를 올리려고 했는데..

지금까지 제가 올린것 보면..

그냥 이렇게만 올렸었죠..

그런데 다른 블로그 가보면..

이런식으로 되어있는 것들을 많이 보셨을 겁니다..

전 드래그 방지라던지.. 그런걸 걸어두지 않았기에.. 그냥 복사하시면 되는데..

가끔 눈에 안들어와서 놓칠때가 있습니다..

지금까지는 귀찮아서.. 안했는데.. 한번 해두면.. 계속 써먹을 수 있으니까.. 지금 해보려고 합니다..

우선.. 검색해보면.. 가장 많이 쓰고 있는..

우선 기존에 설치 안내 블로그는.. 다운로드가 바로 보였다고 하는데..

지금은 없고;..

오른쪽에.. 다운로드가 있습니다..

눌렀다고 바로 다운되느냐?.. ㄴㄴ;..

깃허브로 넘어가고..

소스를 찾아봐도.. scripts 와 styles 는 안보이고..

밑으로 내려보니.. 이전 버전 다운!..

눌렀는데.. 404.. ㅠㅠ..

혹시나 해서.. 다른곳을 봤더니..

스크립트와 스타일이 있어서.. 일일히 하나씩 다운 받았습니다;..

저것도 없어지면.. SyntaxHighlighter V3은 앞으로 설치를 못하는것이죠;..

제가 받은걸 압축해놨습니다.. scripts.zipstyles.zip

아래 블로그에도.. 해당 파일을 다운 받을 수 있게 올려놓으신게 있네요..

티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정..

지금은 SyntaxHighlighter v4 로.. 다운 받고..

$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install

빌드해서.. 사용할 수 있게 만들었는데..

--brushes=all
--brushes=css
--brushes=css,javascript
--brushes=./my-brush.js
--brushes=/full/path/to/my-brush.js
--brushes=/full/path/to/my-brush.js,css,javascript

--theme=default
--theme=./my-theme.scss
--theme=/full/path/to/my-theme.scss

뭔가 많이 해줘야하해서.. 예전 버전을 사용하기로 했습니다..

다운 받은 파일을 업로드 합니다..

관리자 화면에서 HTML/CSS 편집을 누르고..

파일을 업로드해줍니다..

추가를 눌러서 다운 받은 styles, scripts 를 선택하고 확인!.. 그리고 저장!..

그리고 HTML 부분도 수정을 해줘야 합니다..

수정을 하는데.. 이게 제대로 하고 있는건지.. 알수가 없기 때문에..

미리 코드를 넣어줍니다..

제가 넣을 코드는 C 시작할 때 배우는 hello world~!

#include <stdio.h>

int main(void){

printf(“hello world~!\n”);

return 0;

}

</pre>

넣을건데요..

그냥 넣으면 위에 처럼 나오기 때문에..

HTML 에디터 모드를 클릭하고..

해당 소스를 붙여넣기 했습니다..

#include <stdio.h>

int main(void){

printf(“hello world~!\n”);

return 0;

}

</pre>

아래가 HTML로 붙여넣기한 코드입니다..

#include 
  int main(void){
      printf(“hello world~!\n”);
  return 0;
  }

<pre>는 <stdio.h> 만 넣었음에도 </stdio.h> 가 계속 생겨버리네요;..

아래는 <pre> 가 아닌 <textarea> 를 사용해서 하는 방법을 적어봤습니다..

int main(void){

printf(“hello world~!\n”);

return 0;

}

</textarea>

이제 다시 관리자 화면에서 HTML 을 편집해 줍니다..

해당 스크립트를 <head> </head> 사이에 넣어줍니다..

그리고 <body> 부분에.. Onload="dp.SyntaxHighlighter.HighlightAll('code');" 를 넣어줍니다..

전 기존에 id="tt-body-page" 가 있어서 옆에 추가해줬습니다..

새로고침 과 함께..

기존에 넣어뒀던 화면을 보면.. 화면이 바뀐걸 확인 할 수 있습니다..

사용할 수 있는 목록..

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js