덧글수1
원래는 tohtml.com 이라는 곳에서 syntax Highlight 기능을 이용했는데, 사이트 이름처럼 코드를 바로 강조된 HTML로 바꿔주기 때문에 유용하다고 생각했다.
그런데 가만히 보니 actionscript 2.0 기준으로 강조가 되는 부분들이 보였다. 지금은 쓰이지 않는 좌표인 _x, _y 등 언더바를 사용할 때 유난히 민감하게 반응하는 것을 보며, 다른 것으로 바꿔야겠다고 생각했는데, 이것이 고생의 시작이었다.
처음에 본 것은 구글 코드 하이라이터였다. 깔끔하고 예쁘고 스킨도 다섯 가지를 지원하고 있어서 써보려고 했지만, 어쩐지 잘 되지 않았다. 조금 삽질하다가 이유를 알아냈다. 구글 코드 하이라이터는 자바스크립트를 이용한다. 이글루스에서는 자바스크립트를 쓸 수 없다. 기능이 막혀 있다...
물론 방법이 없는 것은 아니다. 어느 선구자가 방법을 찾아냈는데, 아래의 참고링크 1에서 확인할 수 있다.
하지만 이 방법을 쓰려면 매번 자바스크립트를 입력해야 하나? 용량의 낭비다. 아니면 웹에 있는 자바스크립트 파일의 링크를 가져와서 읽어들인다고 해도, 그 링크가 사라지면 어떡하지? 좀 더 가볍고 견고한 방법이 필요했다.
Notepad++ 에서는 NppExport 라는 기능을 지원하는데, 이것은 이미 Notepad++ 편집기에서 강조되어 있는 코드를 웹페이지에서도 똑같이 보이게 하도록 HTML로 뽑아주는 기능이다.
이렇게 보이는 것을 HTML로 똑같이 뽑아준다. 아래 글에서 확인 가능
물론 이것도 바로 되지는 않았고 약간의 노력을 필요로 했다. 일단 Haxe라는 언어는 actionscript에서 파생된 언어이기 때문에, 노트패드++ 디렉토리의 langs.model.xml 에서 해당 부분의 as 를 지워줘야 한다. 그러고도 되지 않아서 언어 - F - Flash actionscript를 체크해서 위와 같은 화면이 나왔던 것이다.
아직 끝나지 않았다. 이글루스에서는 CSS는 편집할 수 있는데, 위에서 말한 NppExport 로 뽑힌 부분은 CSS 부분과 HTML 부분으로 나눠져 있기 때문에, 그냥 HTML만 갖다 붙이면 제대로 나오지 않는다(망할). 그래서 CSS 부분을 스킨 편집 기능을 통해 넣어주어야 제대로 된다. 참고링크 2에서 스킨 편집 방법을 설명하고 있는데, 이 와인 스킨을 쓸 때는 span 태그를 이미 사용하고 있어서, 그것에 관한 수정이 필요했다.
수정한 CSS 코드는 다음과 같다.
문제는 span 안에 있는 설정이 와인 스킨 안의 span 태그에도 같이 적용된다는 것이었다. 그래서 span을 비우고 대신 그 설정을 다른 sc0, sc5 등에 넣었다. color가 겹치는데 당연히 자녀 속성(sc0, sc5)이 span보다 우선하므로 color 값이 있는 경우에는 그 값을 그대로 보존해 주었다.
이런 과정을 거쳐서 syntax highlighter를 대충이나마 블로그에 적용할 수 있었다.
참고 링크
-------
1. 이글루스에서 금단의 기술인 자바스크립트를 사용하는 방법
2. 사실상 이 글의 어머니 격인 글
최근 덧글