본문 바로가기

티스토리(Tstory)에 SyntaxHighlight 적용(프로그램 문법 꾸미기)

etc by 낼스 2014. 11. 16.

1. 다운로드 & 압축해제 

   http://alexgorbatchev.com/SyntaxHighlighter/download/

2. 티스토리 관리자 – HTML/CSS 편집 :  SyntaxHighlighter - 파일 업로드

  • 디렉토리를 선택면 안됩니다.

Script, styles 디렉토리의 파일 전체를 한번씩 선택해서 “열기”해주세요.

 

3. html에 SyntaxHighlighter 적용

   티스토리 관리자 – HTML/CSS 편집 – HTML/CSS(탭)

예약: 2예약: 1

  • 복사할 코드

<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>

 

  1. </head>태그를 찾는다.

  2. 위쪽에 코드를 삽입한다.

  3. <body> à <body Onload="dp.SyntaxHighlighter.HighlightAll('code');"> 변경.

 

4. Syntax Highlighter 적용

    http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

   - 티스토리 에디터에서 html을 선택하고 직접 코드를 입력해서 적용합니다.

 <textarea name="code" class="brush:js;">

var a = 1;

alert(a);

</textarea>

 

★ brush: 이후에 사용할 언어를 지정하면된다.

 

※ 사용가능 언어 목록.

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

 

저작자표시 비영리

'etc' 카테고리의 다른 글

sqlite 유틸리티 ( DB Browser for SQLite )  (0) 2014.12.10
이문세  (0) 2014.11.21
구글링을 하는 여러가지 팁입니다.  (0) 2014.05.07
CPU모델명 분석  (0) 2014.05.07
도로명 주소  (0) 2014.05.07

관련글

댓글

티스토리툴바