지금까지 여러 블로그에서 코드하이라이팅 플러그인을 찾았었지만 대부분 서버에서 처리하여 html로 색상 입혀 보여주는 수준이었다. 특히 나는 Flex , ActionScript를 주로 다룰것이기 때문에 이부분에서 특화된 기능을 보여주면서 AIR 기반이라 플러그인에 의존적이지 않은 as3 Syntax Hilighter가 제일 괜찮은듯 보였다. 하지만 구글 오픈소스 프로젝트의 google-code-prettify를 기반으로 제작된 SystaxHilighter가 제일 맘에 든다. 티스토리에 적용하기는 약간의 꼼수만 부리면 된다. 티스토리에 소스코드 플러그인이 나오길 간절히 바라며..
invalid-file
티스토리 스킨에 맞춘 code-prettify
- 위의 구글사이트에서 최신버전을 다운받아 적절히 수정하거나 이미 작업된 파일(추천)을 다운받는다
- 다운받은 파일을 풀고 스킨 직접올리기로 업로드 한다.
- 올려져있는 스킨의 skin.html을 에디터로 수정한다.
- <link rel="stylesheet" type="text/css" href="./images/prettify.css" />를 삽입
- <script type="text/javascript" src="./images/prettify.js"></script>를 삽입
- <body onload="prettyPrint()">로 수정
- 이로써 설치는 끝이고, 입력하는 방법을 알아보면,
- 에디터에서 일단 소스코드를 입력하고
- html로 보기 하면 소스의 일부가 특수문자로 바뀐것을 확인
- 소스의 처음과 끝에 <pre class="prettyprint"> ..... </pre>
- 저장후 확인
비록 코드 특화되어 이쁘게 보여주는 특별한 맛은 없지만 엄청 빠르고, 그럭저럭 알아볼 수 있도록 색상 입혀지는 것이 참 맘에든다.
아래는 플러그인으로 입힌 코드들이다.
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
add="traceEvent(event)"
added="traceEvent(event)"
preinitialize="traceEvent(event)"
initialize="traceEvent(event)"
childAdd="traceEvent(event)"
creationComplete="traceEvent(event)"
updateComplete="traceEvent(event)"
applicationComplete="traceEvent(event)">
<mx:Script>
<![CDATA[
private function traceEvent(event:Event):void
{
trace(event.type+"("+ event.eventPhase + ") " + event.currentTarget.name + " " + event.target.name + " " + event.target.parent.name );
}
]]>
</mx:Script>
<mx:Button id="button"
add="traceEvent(event)"
added="traceEvent(event)"
preinitialize="traceEvent(event)"
initialize="traceEvent(event)"
creationComplete="traceEvent(event);"
updateComplete="traceEvent(event)"/>
</mx:Application>
Action Script
package mx.modules
{
import mx.core.LayoutContainer;
[Frame(factoryClass="mx.core.FlexModuleFactory")]
public class Module extends LayoutContainer
{
include "../core/Version.as";
public function Module()
{
super();
}
}
}
반응형