달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
Syntax Highlighter 2.1
코드러너와 연동하기

Syntax Highlighter는 자바스크립트로 만들어진 웹구문강조기입니다. 국내외 많은 블로거들이 사용하고 있는데요, 블로그에 수록된 코드를 실제로 실행해보고 싶을때 대부분 코드를 복사해봐서 자신의 pc에 설치된 컴파일러나 인터프리터로 실행을 해보게 됩니다. 하지만 코드러너와 연동하게 되면 블로그 상에서 코드의 실행이 가능하게 됩니다. 코드를 수정해서 이런저런 테스트를 해보는 것도 가능하구요. 내 블로그를 이용하는 사람들이 신기해할것만 상상해도 뿌듯해지실겁니다. 그럼 이제 연동하는 방법에 대해 자세히 알아볼까요.

*여기서는 SyntaxHighlighter가 이미 설치되어 있다는 가정하에 설명하겠습니다.


준비물 : 1. 코드러너 연동이 패치된 shCore.js파일(아래 링크에서 다운받으세요.)
                SH2.1용 또는 SH1.5.1
            
 2. SH2.1의 경우 shCore.cssrun.png파일을 추가로 다운받습니다.(링크에서 다운로드)
    shCore.css , run.png

스텝 1. 코드러너연동이 패치된 shCore.js 파일을 SyntaxHighlighter가 설치된 곳에 덮어씌운다.
         SH2.1의 경우에는 shCore.css와 run.png파일도 함께 
         업로드 한다.

Case A ) 티스토리
관리자 메뉴에서 스킨 > HTML/CSS편집에서 코드러너용 shCore.js, shCore.css, run.png를 업로드 한다.



Case B ) 기타 웹페이지
SH가 설치된 script폴더에 shCore.js를 업로드하여 덮어쓴다.







스텝 2. 페이지에서 확인한다.
확인할때는 Ctrl + F5를 눌러서 페이지를 새로 로딩한다.

SH가 적용된 페이지로 가서 에디터를 띄워본다.
<>버튼을 눌렀을때 다음과 같이 코드러너 에디터가 뜨면 성공






참쉽죠잉







Posted by 송멘토
|

코드러너FAQ


코드러너가 뭔지 궁금하시죠?
자세히알려드립니다.
Q1 :정확히 무엇을 하는 서비스입니까?
A : 코드러너는 웹상에서 소스를 전달받아 미리 준비해둔 서버에서 컴파일 및 실행을한후 그 결과를 사용자에게 리턴해주는 서비스입니다. 그러므로 사용자는 자신의 PC에 프로그래밍 툴이 설치되어있지 않아도 언제, 어디서든 인터넷에 연결된 웹브라우저만 있으면 프로그래밍을 할수 있습니다.
Q2 :웹브라우저에서 어떻게 실행해야 하나요?
A : 코드러너는 소스코드입력을 위해서 에디터를 제공하고 있습니다. 이 에디터는 단독으로 띄워서 사용할 수도 있으며, 다른 여러가지 툴에 연동되어 사용할 수도 있습니다.
에디터의 주소는 http://www.coderunner.co.kr/run/editor.php 이며 해당주소로 연결할 경우 다음과 같은 모습을 볼수 있습니다.

Q3 : 다른 툴에 연동되어 사용된다는 건 무슨 뜻인가요?
A : 코드러너는 다른 툴 및 서비스와 연동될 때 더욱 큰 효과를 얻을수 있습니다. 예를 들어, 블로그에 소스코드를 수록할때 많이 사용하는 Syntax Highlighter와 같은 플러그인과 연동하면, 특정버튼을 누르면 코드러너 에디터창이 뜨면서 블로그에 수록된 소스코드를 즉시 실행하여 테스트해볼수 있게 됩니다. 그 외에도 코드러너가 사용될수 있는 용도는 다양합니다.
Q4 : Syntax Highlighter와 어떻게 연동되는지 더 자세히 알려주세요.
A : Syntax Highlighter(이하 SH)는 javascript기반의 구문강조 플러그인으로 국내외 많은 블로거들이 사용하고 있습니다. SH를 해당 홈페이지에서 다운로드 받아서 설치한후, 우리 홈페이지에서 제공하는 파일을 덮어 씌우면 코드러너와 연동된 SH를 사용할수 있습니다.

SH를 사용하여 파이썬 소스코드를 블로그에 수록하면 다음과 같은 모습으로 나타납니다.

소스코드 오른쪽에 보이는 메뉴바에서 빨간색으로 표시된 [코드러너 에디터]를 클릭하면 다음과 같이 소스코드와 함께 코드러너 에디터가 팝업됩니다.

에디터 툴바의 녹색버튼을 누르면 프로그램이 수행되며 다음과 같이 출력창이 팝업되어 결과를 보여줍니다.

설치에 대한 자세한 사항은 [Syntax Highlighter와 코드러너 연동하기]를 참고하세요.
Q5 : 다른 설치형 블로그나 네이버 블로그는 안되나요?
A : 설치형 블로그는 기본적으로 사용자가 파일을 업로드할수 있기 때문에 SH를 사용할수 있지만 네이버블로그는 SH의 사용이 불가능합니다.
Q6 : 프로그램이 정확히 어디서 실행되는 겁니까?
A : 수행방식은 다음과 같습니다.
     1. 사용자의 소스코드는 코드러너 실행서버로 전달되어 소스파일로 저장이 됩니다.
         이때 소스파일이름은 사용자의 웹 세션ID가 됩니다.
     2. c언어일 경우 소스를 컴파일 합니다.
     3. 실행을 합니다. 이때 monitor프로그램이 프로그램수행을 감시하며 허용하지 않는 명령어가
         수행될
경우 프로그램 실행을 중단시킵니다.

코드각 수행되는 서버환경은 64bit CentOS 5.3 (x86_64-redhat-linux)입니다. 64bit환경이므로 c, c++ 코딩시 자료형의 크기를 주의해야합니다.
Q7 : 실행이 안되는 명령이 있는데요?
A : 네, 실행시 보안상 위험할수 있는 명령은 제한하고 있습니다. 파일열기와 쓰기, 자식프로세스
     생성등의
명령을 만날경우 수행은 중단되고 사용자 출력창에는 수행할 수 없다는 메시지가
     리턴됩니다.
만일 보안상 문제가 없는 코드가 수행되지 않는다면 알려주시기 바랍니다.
Q8 : 실행시 또다른 제약이 있나요?
A : 실행시 64MB의 메모리 제약이 있으며, 3초 실행시간 제약이 있습니다. 3초 안에 프로그램이
    종료되지
않으면 실행시간초과 메시지가 출력됩니다.
Q9 : 지원하는 언어들은 무엇이 있으며 버전은 어떻게 되나요?
A :지원하는 언어는 c, c++, php, python, perl, ruby로 총 6가지 입니다. 앞으로 더 많은 언어를 지원할 계획을 가지고 있습니다. 사용하길 원하는 언어가 있다면 알려주시기 바랍니다.
각 버전은 다음과 같습니다.
c : gcc 4.1.2
c++ : g++ 4.1.2
php : PHP 5.1.6
python : Python 2.4.3
perl : Perl 5.8.8
ruby : Ruby 1.8.5



Posted by 송멘토
|
각 언어별 데모 테스트
1. 각 소스의 오른쪽에 나타나는 툴바중 첫번째 버튼인 [<>] 를 누르시면 코드러너 에디터가 팝업됩니다.
2. 에디터의 녹색버튼을 누르면 코드가 실행되며 출력창에 결과가 나타납니다.

  1. Python
    # Hello World in Python
    
    print "Hello World"
    
  2. Perl
    # Hello world in perl
    
    print "Hello World!\n";
    
  3. Ruby
    # Hello World in Ruby
    
    puts "Hello World!"
    
  4. Php
    <?php
      // Hello World in PHP
    
      echo 'Hello World!';
    ?>
    
  5. C
    int main() {
    	printf("hello, world");
    	return 0;
    }
    
  6. C++
    #include <iostream.h>
    main() {
        cout << "Hello World!";
        return 0;
    }
    
Posted by 송멘토
|