게시판홈 / 웹개발 / 티스토리에서 codepress (syntax highlight) 사용하는 방법새글쓰기 답글쓰기

저자 티스토리에서 codepress (syntax highlight) 사용하는 방법
Anonymous (0)
비회원
  게시일: 2008-05-20 19:30||
티스토리에 오토잇과 관련된 포스트를 가끔 올리는데요.
구문강조 기능을 표현하고 싶었지만, 구문강조 코드들이 autoit을 지원하지 않아 사용하지 못하고 있었습니다.
그러던 중에 codepress를 이용하면 될 수도 있겠다 싶어 시도를 해보는데 잘 안되서 도움을 청합니다.

일단.
1. 모든 파일을 하나의 폴더 "codepress"로 옯겼습니다.
2. codepress.htm 파일에서 languages와 engines 파일의 경로도 같은 폴더에 있도록 수정하였습니다.
3. 티스토리의 스킨 편집에서 image 폴더에 파일들을 올렸습니다.
4. 스킨 편집에서 <head>와 </head> 사이에
<script src="./images/codepress.js" type="text/javascript"></script>
을 추가하였습니다.
5. 글쓰기에서 <textarea id="myCpWindow" class="codepress autoit readonly-on" style="WIDTH:100%; HEIGHT: 350px"> 내용 </textarea>
로 내용을 작성하였습니다.

컴퓨터에서 test.html 파일을 실행을 하면 잘 나오는데, 티스토리 상에서 실행을 하면 error.png 처럼 구문강조 기능이 나타나지 않습니다. (첨부파일)

어디가 틀렸는지, 어떻게 해야 하는지 도와주십시요.
Anonymous (0)
비회원
  게시일: 2008-05-20 20:57||
꼭 codepress를 사용해야만 되는 것이 아니라면 제가 Google Code에서 만든 Syntax Highlighter를 티스토리에 적용하는 방법을 포스팅한 글을 보셔도 될 것 같습니다.

티스토리에서 Syntax Highlighter 더 쉽게 사용하기
Anonymous (0)
비회원
  게시일: 2008-05-20 21:26||
인용

글쓴이: dis1 날짜: 2008-05-20 19:30

4. 스킨 편집에서 <head>와 </head> 사이에
<script src="./images/codepress.js" type="text/javascript"></script>
을 추가하였습니다.

css의 경로도 지정해야 될 것 같습니다.
codepress.html에서 js의 경로만 지정되어있고, document .write() 함수에서 css의 경로는 따로 지정하지 않기 때문인 것 같습니다.

※ 직접 해보지는 않았지만, 비슷한 경험이 있으니 99%는 그것이 원인일 것입니다.

[ 메시지수정: bluenlive 일시: 2008-05-20 21:28 ]
Anonymous (0)
비회원
  게시일: 2008-05-21 13:01||
인용

글쓴이: bluenlive 날짜: 2008-05-20 20:57
꼭 codepress를 사용해야만 되는 것이 아니라면 제가 Google Code에서 만든 Syntax Highlighter를 티스토리에 적용하는 방법을 포스팅한 글을 보셔도 될 것 같습니다.

syntax highlighter는 알고 있지만, 제가 사용하려는 autoit을 지원하지 않아서요. 제가 syntax 파일을 만들 재주는 더욱 없고요.

인용

글쓴이: bluenlive 날짜: 2008-05-20 21:26
codepress.html에서 js의 경로만 지정되어있고, document .write() 함수에서 css의 경로는 따로 지정하지 않기 때문인 것 같습니다.

document. write('<link type="text/css" href="'+language+'.css?ts='+ts+'" rel="stylesheet" id="cp-lang-style" />');
이 부분이 있던데, 이 걸로 불충분한건가요?
제가 간단한 html정도밖에 몰라서 이게 맞는건지 틀린건지 알수가 없습니다.
Anonymous (0)
비회원
  게시일: 2008-05-21 17:40||
인용

글쓴이: dis1 날짜: 2008-05-21 13:01

document. write('<link type="text/css" href="'+language+'.css?ts='+ts+'" rel="stylesheet" id="cp-lang-style" />');
이 부분이 있던데, 이 걸로 불충분한건가요?


href 이후의 주소에 'images/'를 추가해야 될 것 같습니다.
현재 주로만으로는 images/ 안의 파일을 찾지 못할 것 같군요.
로컬에서 테스트를 하시려면 images 폴더를 하나 만들어서 그 안에 집어넣고 동작시험을 하면 됩니다.
Anonymous (0)
비회원
  게시일: 2008-05-21 18:01||
인용

글쓴이: bluenlive 날짜: 2008-05-21 17:40

href 이후의 주소에 'images/'를 추가해야 될 것 같습니다.
현재 주로만으로는 images/ 안의 파일을 찾지 못할 것 같군요.
로컬에서 테스트를 하시려면 images 폴더를 하나 만들어서 그 안에 집어넣고 동작시험을 하면 됩니다.

제 답이 틀린 것 같습니다.
지금 코드를 찬찬히 읽어봤는데, codepress.html도 images/ 폴더 안에 있기 때문에 원래 해놓은 수정만으로 동작해야 합니다.

덧1. 로컬에서 되는데 티스토리에서 안된다면 (현재 상황을 고려해볼 때) 단순히 캐쉬를 비우지 않아서일 수도 있으니 캐쉬도 비워보시기 바랍니다.

덧2. 로컬에서 images 폴더에 다 밀어넣은 뒤 테스트해보니 이상 없습니다.
Anonymous (0)
비회원
  게시일: 2008-05-21 23:07||
전혀 뜬금없는 소리입니다만...
스크립트를 가~끔 올리신다면, 그리고 에디트플러스 사용하신다면 구문강조된 상태로 내보내는 기능이 있으니 그것을 이용해보시는것도 간단할 것 같습니다. 에이트플러스에서 오토잇 스크립트를 지원하는 사용자파일도 나와있고 말이죠..
저도 아~주~가~끔 사용하는데 편리합니다.
Anonymous (0)
비회원
  게시일: 2008-05-22 17:47||
인용

글쓴이: okto98 날짜: 2008-05-21 23:07
에디트플러스 사용하신다면 구문강조된 상태로 내보내는 기능이 있으니 그것을 이용해보시는것도 간단할 것 같습니다.

"HTML로 내보내기" 기능을 말씀하시는 것 같은데, 저도 다른 편집기에서 비슷한 기능을 사용하다가 좀 더 업그레이드 시켜볼까해서 codepress를 사용하려고 했습니다.

bluenlive님께서 말씀하신 syntax highligter의 다른 스크립트 파일들에서 조금씩 복사해다가 잘 엮으니, autoit syntax파일도 만들어 지는군요.
소 뒷걸음질에 쥐 잡은 격으로 이상하지만 나름대로 쓸만한 파일을 만들었습니다.
두 분 모두 감사드립니다.
Anonymous (0)
비회원
  게시일: 2008-05-23 10:40||
인용

글쓴이: dis1 날짜: 2008-05-22 17:47

bluenlive님께서 말씀하신 syntax highligter의 다른 스크립트 파일들에서 조금씩 복사해다가 잘 엮으니, autoit syntax파일도 만들어 지는군요.

괜찮으시면 autoit의 syntax 파일을 올려주시면 안될까요?
지금은 사용하지 않지만, 혹시나 모를 일이기도 하고, 제 블로그 포스팅 거리도 하나…
Anonymous (0)
비회원
  게시일: 2008-05-23 19:02||
인용

글쓴이: bluenlive 날짜: 2008-05-23 10:40
괜찮으시면 autoit의 syntax 파일을 올려주시면 안될까요?

Autoit syntax script for Google Code Syntax Highlighter
여기에 올려 두었습니다.

[ 메시지수정: dis1 일시: 2008-05-23 19:02 ]
다음글: 링크를 주소창에 직접 입력하는것처럼 만들고 싶습니다. (4)9171Anonymous2008-06-18
이전글: 티스토리 관련 자바스크립트 질문 (1)9252Anonymous2008-04-19

새글쓰기 답글쓰기
이동:

세상사는 이야기

  • 만원대 피젯 스피너를 >
  • 망하는 길을 택한 쿠팡 >
  • 물놀이에 적당한 가성 >
  • 컴퓨터를 IPTV로 2, po >
  • 컴퓨터를 IPTV로 만들 >
  • Warning.or.kr도 우회 >
  • 한국의 100대 부자, 어 >
  • 세상을 바꾼 크롬: 크 >
  • 장난(?)으로 시작한 여 >
  • 탈옥의 필수, QuickDo >


  • RSS 구독 (익명 | 회원 | 강좌 | 포럼)
    (C) 1996 ~ 2017 QAOS.com All rights reserved.