구글에서 개발관련 검색을 하면 소스코드를 볼 수 있는데요. 그 중에서 소스코드가 가독성이 높게 표시되는 경우를 확인 할 수 있습니다. 저도 어떻게 하면 저렇게 보일까 검색을 해보니 syntaxhighlighter라는 플러그인이었습니다. 그래서 저도 한번 적용해 보기로 했습니다. 여러 블로그에 링크된 다운로드 페이지의 경우 개발자 홈페이지에 있는 다운로드 링크가 걸려 있는데요. 링크가 연결이 안되더라구요. 개발자 홈페이지에서는 새로운 다운로드 페이지로 연결해 줍니다. 여기에서 다운로드 받을 수 있는 것이 syntaxhighlighter v4 입니다. 근데 여러 블로그에 올려진 내용은 syntaxhighlighter v3 기준이라서요. 잘모르겠지만 syntaxhighlighter v4은 내부 파일들도 다른뿐만 아니라 사용법도 달라진거 같아요. 저도 다른 블로그처럼 syntaxhighlighter v3 버전으로 해볼려고 합니다. 먼저 다운로드 받을 파일은 여기 있습니다.

syntaxhighlighter_3.0.83.zip
다운로드

프로젝트 URL

https://github.com/syntaxhighlighter/syntaxhighlighter/releases

 

Releases · syntaxhighlighter/syntaxhighlighter

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. - syntaxhighlighter/syntaxhighlighter

github.com

 

플러그인 업로드

 

 

 

1. 압축파일의 압축을 풀면 scripts, styles 폴더가 있는지 확인합니다.

2. 티스토리 관리 화면에서 좌측에 [꾸미기]->[HTML/CSS 편집]를 클릭 합니다.

3. 우측 상단에 파일 업로드 항목을 클릭 합니다.

4. 우측 하단에 추가 버튼을 클릭합니다.

  추가 버튼을 누르면 파일 선택창이 뜨는데요.  그 화면에서 scripts, styles 폴더에 있는 모든 파일을 선택해서 업로드하면 플러그인 업로드가 완료됩니다. 참고로 파일들을 다중으로 선택해서 추가 가능합니다.

 

플러그인 적용하기

 

 

1. 티스토리 관리 화면에서 좌측에 [꾸미기]->[HTML/CSS 편집]를 클릭 합니다.

2. 우측 상단에 HTML 항목을 클릭 합니다.

3. 아래 소스코드에서 아래와 같이 수정해 줍니다.

(HTML에대해서 잘 모르신다면 다른 소스가 수정되지 않도록 조심하세요.)

</head>바로 위에 아래 소스를 추가하세요.

</head>의 위치는 Ctrl + F 로 찾으시면 됩니다.

 

 

<span style="font-family: Tahoma;">  
<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> 
</span>

 

<body>를 아래와 같이 변경해 주세요. 저 같은 경우 </head>바로 아래 있었습니다.

<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">

 

4. 마지막으로 저장 버튼을 누르시면 됩니다. 

 

 

플러그인 사용하기

 

 

플러그인은 글을 작성하실 때 사용하실 수 있는데요. 소스코드를 입력하시고 HTML모드로 변경하신 다음에 해당 소스코드 가장 처음에

 

<pre name="code" class="brush:xml;">

 

를 추가하시고 마지막에는

 

</pre>

 

를 추가하시면 적용됩니다. 그리고 brush: 옆에는 적용할 언어를 입력하시면됩니다.

 

PC 및 모바일 모두 적용하기 위해서는 textarea가 아닌 pre를 사용해야합니다.

티스토리 복사하면 자동으로 <pre>항목이 변경되므로 "<pre name="code" class="brush:xml;">"

와 동일한지 확인이 필요합니다. 또한 <pre>항목 내부에 <code>,</code>항목이 추가되므로

"HTML"모드에서 <code>,</code>항목을 삭제해야 정상적으로 동작합니다.

 

언어 관련 참조 주소

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

 

 

 

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

 

 

[ 주의사항 ( 프로그램 사용 규약) ]

※ 이 프로그램을 다운로드, 실행, 설치하는 행위는 프로그램 사용 규약에 동의함을 의미합니다.

※ 이 프로그램을 사용함으로써 발생하는 모든 문제의 책임은 사용자에게 있습니다.

 

저작자표시 비영리 변경금지

'소프트웨어 > 자료' 카테고리의 다른 글

복권 번호  (0) 2022.06.12
ASCII(아스키)  (0) 2021.08.25
[윈도우SDK] Microsoft Visual C++ 2015 재배포 가능 패키지  (0) 2021.01.10
[윈도우 패치] KB2813430  (0) 2021.01.10

+ Recent posts

티스토리툴바