ThisPlex IT

티스토리 코드 줄 넣기 [SyntaxHighlighter 설치] 본문

HTML CSS

티스토리 코드 줄 넣기 [SyntaxHighlighter 설치]

김춘삼이 2016. 1. 26. 21:35
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

티스토리 코드 줄 넣기

[SyntaxHighlighter 설치하기]

티스토리에서 ▼ 아래와 같은 코드박스를 사용하는 방법에 대해서 알아보도록 할게요!



다운로드 링크 : http://alexgorbatchev.com/SyntaxHighlighter/download/


▼ 먼저 위 링크를 통해 홈페이지로 접속 한 뒤에 SyntaxHighlighter를 다운받습니다.


▼ 다운받은 파일의 압축을 푸시면 다음과 같은 파일들이 나오는데, 우리가 사용할 파일은 Script와 Style 안에 들어 있는 파일입니다.



▼ Tistory 관리 페이지로 접속한 후, "HTML/CSS편집"을 선택합니다.


▼ 우측상단에서 파일 업로드를 선택한 뒤, 하단의 추가버튼을 눌러 Script와 Style 폴더 안의 파일들을 업로드합니다.


▼ HTML 편집으로 들어와 Ctrl+F를 눌러 </head>를 검색합니다.


▼ </head>바로 위에 다음 내용을 붙여넣기 합니다.


▼ 이번에는 Ctrl+F를 눌러 body를 검색합니다.


▼ id="tt-body-page" 옆에 다음 내용을 붙여넣기 합니다.

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

올바르게 붙여넣은 경우.

반드시 저장버튼을 눌러주세요!!!!




사용방법

▼ 글쓰기에서 외부컨텐츠를 선택 후 아래 코드사이에 입력하시면 됩니다!!


다음코드를 복사 붙여넣기 하세요^^ 언어는 아래 Brush aliases를 참조하세요!


▼ 프로그래밍 언어별 옵션은 참조바랍니다.

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

공유하기 링크
Comments