본문 바로가기
일반

웹 사이트 글에 소스코드 하이라이트 표현 비설치형 비교 및 선택

by i.got.it 2014. 10. 3.

 

 

개요

   
 

목적  :  운영중인 웹사이트의 글 내용에 소스코드를 보이게 하려는 경우, 소스코드의 문법에 맞게 색상으로 하이라이트 되어 표현되게 하고싶다.

 

위 목적을 달성하는 방법은 크게 3종류가 있다. - 본 글에서는 3번 웹기반 변환서비스 이용하는것을 다룬다.

 

1. 본인이 사용하는 블로그의 서버에 이미 설치되어있는 것.

2. 자신이 직접 코드 하이라이트 기능을 위하여 설치하는 것.

3. 웹기반으로 코드 문법 하이라이트 변환서비스를 이용하는 것.

 

이 중에서 1과 2는 사이트 운영하는 서버에 의존적이고, 2번의 경우 설치하는 과정을 거쳐야 한다. 싫다. 제외한다.

 

본 글은 3번 방식에 대해서만 조사된 자료이다. 웹기반 서비스도 많아서 어떤 것을 선택할지 비교해봐서 골라야 한다.

 

본 글에서는 웹기반 코드변환 서비스들을 4종을 사용해본 결과 최종적으로 Color Script 를 최종 선택한다.

 

비교방법

- Visual Studio 2010 에서 작성된 C#, C++ 코드를 웹기반 문법하이라이트 처리해서 문제없고 쓸만한 것 고르기.   

 

 

 

 

비교에 사용될 코드 2개. C++, C#

   
 

 2종의 코드를 비교용으로 준비했다.  Visual Studio 에서 C#소스 코드, C++ 소스코드 이다.

 

 

C#소스코드 원본.

C#코드가 Visual Studio 에서 보이는 모습은 아래 그림과 같고, 이 코드를 복사해서 본 글에 복사해서 넣은 것도 같이 보인다.


 

상기 C# 코드를 복사해서 본 글에 넣은 모습. 

 

namespace GDrive
{
    partial class Form1
    {
        /// <summary>
        /// 필수 디자이너 변수입니다.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// 사용 중인 모든 리소스를 정리합니다.
        /// </summary>
        /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

 

 

C++ 소스코드원본.

C++ 코드가 Visual Studio 에서 보이는 모습은 아래 그림과 같고, 이 코드를 복사해서 본 글에 복사해서 넣은 것도 같이 보인다.


 

 

상기 C++코드를 복사해서 본 글에 넣은 모습.

 

#include "stdafx.h"
#include "AutoUpdate.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

int CAutoUpdateApp::ExitInstance()
{

 if(m_DlgA.GetSafeHwnd() != NULL)
 {
  m_DlgA.DestroyWindow();
 }

 // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.

 return CWinApp::ExitInstance();
}


/********************************  외부노출함수들.  ******************************************************/
// 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.
// 인자.
// closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.
extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)
{
 AFX_MANAGE_STATE(::AfxGetStaticModuleState()); // 외부노출함수 첫자리에 기본배치해둬.

 theApp.m_DlgA.CheckForUpdate(closeifnoupdate);

 return 1;//
}

 

 

 

 

 

 

 

 

1. Highlighter

   
 

 URL : http://www.thecomplex.plus.com/highlighter.html

 

 사용법 : 위 사이트에서 글 상자에 소스코드를 기록하고, 프로그래밍 언어 선택하고 Get Html Code 버튼 클릭하면 변환된 html 소스를 보여준다. 'Preview'클릭하면 웹에서 보이는 모습이 나타난다. 자신이 편집 중인 글에 넣을 때는 html 편집모드에서 'html 소스' 를 복사해서 붙여넣기 한다.  Stylesheet 링크를 포함할 것인지 선택하게되어있는데, 나의 경우엔, 링크를 포함시킨 상태의 html 소스를 생성해서 복사해야 문법 하이라이팅이 정상 적용된다.

 

검토.

 다른 곳에서 이 내용을 복사해 가는 경우 문법 하이라이팅 기능 적용안된 단색의 글만 복사된다.

티스토리에선 정상적으로 색상 표현되나, 구글블로그에선 정상표현되지 않음.

 

 

 

 

 

 

C#코드 하이라이팅 결과.

  1. namespace GDrive  
  2. {  
  3.     partial class Form1  
  4.     {  
  5.         /// <summary>  
  6.         /// 필수 디자이너 변수입니다.  
  7.         /// </summary>  
  8.         private System.ComponentModel.IContainer components = null;  
  9.   
  10.         /// <summary>  
  11.         /// 사용 중인 모든 리소스를 정리합니다.  
  12.         /// </summary>  
  13.         /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>  
  14.         protected override void Dispose(bool disposing)  
  15.         {  
  16.             if (disposing && (components != null))  
  17.             {  
  18.                 components.Dispose();  
  19.             }  
  20.             base.Dispose(disposing);  
  21.         }  

 

C++ 코드 하이라이팅 결과.

  1. #include "stdafx.h"  
  2. #include "AutoUpdate.h"  
  3.   
  4. #ifdef _DEBUG  
  5. #define new DEBUG_NEW  
  6. #endif  
  7.   
  8. int CAutoUpdateApp::ExitInstance()  
  9. {  
  10.   
  11.     if(m_DlgA.GetSafeHwnd() != NULL)  
  12.     {  
  13.         m_DlgA.DestroyWindow();  
  14.     }  
  15.   
  16.     // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.  
  17.   
  18.     return CWinApp::ExitInstance();  
  19. }  
  20.   
  21.   
  22. /********************************  외부노출함수들.  ******************************************************/  
  23. // 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.  
  24. // 인자.  
  25. // closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.  
  26. extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)  
  27. {  
  28.     AFX_MANAGE_STATE(::AfxGetStaticModuleState());  // 외부노출함수 첫자리에 기본배치해둬.  
  29.   
  30.     theApp.m_DlgA.CheckForUpdate(closeifnoupdate);  
  31.   
  32.     return 1;//  
  33. }
  35. void function(int test)
  36. {
  38. }  

 

 

 

2.GeSHI - Generic Syntax Highlighter

   
 

 URL : http://qbnz.com/highlighter/index.php 

 

사용법

 코드를 복사하여 Language 선택한후 Highlight 버튼 클릭한다. 새창으로 전환되면서 변환결과 보인다.  보이는 화면을 복사해서 붙여넣기 하면된다. html 소스복사하지 않아도 된다.

 

검토.

웹에서보이는 결과화면을 바로 복사해서 글편집기에 직접 넣을 수 있는 점이 편리하다. 본 방식으로 글 내용에 포함된 코드 하이라이트된 부분은 다른 블로그의 글로 복사했을때도 하이라이팅된 상태가 유지된다. 

 

 

 

 

C# 코드 하이라이팅 결과.

 

 

  1. namespace GDrive
  2. {
  3.     partial class Form1
  4.     {
  5.         /// <summary>
  6.         /// 필수 디자이너 변수입니다.
  7.         /// </summary>
  8.         private System.ComponentModel.IContainer components = null;
  9.  
  10.         /// <summary>
  11.         /// 사용 중인 모든 리소스를 정리합니다.
  12.         /// </summary>
  13.         /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
  14.         protected override void Dispose(bool disposing)
  15.         {
  16.             if (disposing && (components != null))
  17.             {
  18.                 components.Dispose();
  19.             }
  20.             base.Dispose(disposing);
  21.         }
  22.  
  23.  

 

 

C++ 코드 하이라이팅 결과. Language선택 C++ (WinAPI)

 

 
  1. #include "stdafx.h"
  2. #include "AutoUpdate.h"
  3.  
  4. #ifdef _DEBUG
  5. #define new DEBUG_NEW
  6. #endif
  7.  
  8. int CAutoUpdateApp::ExitInstance()
  9. {
  10.  
  11.         if(m_DlgA.GetSafeHwnd() != NULL)
  12.         {
  13.                 m_DlgA.DestroyWindow();
  14.         }
  15.  
  16.         // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.
  17.  
  18.         return CWinApp::ExitInstance();
  19. }
  20.  
  21.  
  22. /******************************  외부노출함수들.  ****************************************/
  23. // 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.
  24. // 인자.
  25. // closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.
  26. extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)
  27. {
  28.         AFX_MANAGE_STATE(::AfxGetStaticModuleState());  // 외부노출함수 첫자리에 기본배치해둬.
  29.  
  30.         theApp.m_DlgA.CheckForUpdate(closeifnoupdate);
  31.  
  32.         return 1;//
  33. }
  34.  

 

 

 

 

3.CodeHTMLer

   
 

 URL : http://puzzleware.net/CodeHtmler/default.aspx

 

 

 사용법

 위 주소에서 코드복사하고 Language, Style, Line number, 기타옵션 선택하고, Htmlify Code,  버튼 클릭 하면 변환된 코드를 복사해서 자신의 글에 복사.

 

검토.

변환 소요시간이 10초쯤 소요됨.

 

 

 

 

C#코드 하이라이팅 결과. 

 

 

  1 namespace GDrive
  2 {
  3     partial class Form1
  4     {
  5         /// <summary>
  6         /// 필수 디자이너 변수입니다.
  7         /// </summary>
  8         private System.ComponentModel.IContainer components = null;
  9
10         /// <summary>
11         /// 사용 중인 모든 리소스를 정리합니다.
12         /// </summary>
13         /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
14         protected override void Dispose(bool disposing)
15         {
16             if (disposing && (components != null))
17             {
18                 components.Dispose();
19             }
20             base.Dispose(disposing);
21         }
22

 

 

C++ 코드 하이라이팅 결과. 

 

 

 

 

  1 #include "stdafx.h"
  2 #include "AutoUpdate.h"
  3
  4 #ifdef _DEBUG   5 #define new DEBUG_NEW
  6 #endif
  7
  8 int CAutoUpdateApp::ExitInstance()
  9 {
10
11 if(m_DlgA.GetSafeHwnd() != NULL)
12 {
13 m_DlgA.DestroyWindow();
14 }
15
16 // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.
17
18 return CWinApp::ExitInstance();
19 }
20
21
22 /**************************  외부노출함수들.  *******************************************/
23 // 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.
24 // 인자.
25 // closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.
26 extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)
27 {
28 AFX_MANAGE_STATE(::AfxGetStaticModuleState()); // 외부노출함수 첫자리에 기본배치해둬.
29
30 theApp.m_DlgA.CheckForUpdate(closeifnoupdate);
31
32 return 1;//
33 }
34
35

 

 

 

 

4.Color Script

   
 

 URL : http://prev.kr/apps/ColorScripter/?run=1

 

 

 사용법

 

 위 주소에서 언어선택하고, 코드 복사해넣고, 복사해서 자신의 글에 붙여넣기.

 

 검토.

 설정부분에서 웹에서 활용을 편하게 하기 위한 설정 들이 있다. 예. 폭조절, 높이 조절, 자동스크롤기능. 

 내 글에서 보이는 하이라이트된 코드를 다른 사이트의 글에 복사해도 변형없이 복사됨.

 코드 상단에 링크가 걸려있는데, 지워도 되는 듯 강제사항은 아닌듯함. 코드 표현된 스타일만 봐도 Color Script 로 만든것을 알 수 있을 정도이고, 굳이 링크 표현하지 않아도 도입한 사람들이 알아서 홍보해줄듯.

 

 

 

 

C#코드 하이라이팅 결과.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
namespace GDrive
{
    partial class Form1
    {
        /// <summary>
        /// 필수 디자이너 변수입니다.
        /// </summary>
        private System.ComponentModel.IContainer components = null;
 
        /// <summary>
        /// 사용 중인 모든 리소스를 정리합니다.
        /// </summary>
        /// <param name="disposing">관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 false입니다.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }
 

 

 

 

C++ 코드 하이라이팅 결과. 

위 사이트 설정에서 코드 표현부 높이 300으로 고정하고 자동으로 스크롤 나오게 설정 해본 것.  코드길이가 긴 경우 유용함.

 

 

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
32
33
34
35
#include "stdafx.h"
#include "AutoUpdate.h"
 
#ifdef _DEBUG
#define new DEBUG_NEW
#endif
 
int CAutoUpdateApp::ExitInstance()
{
 
    if(m_DlgA.GetSafeHwnd() != NULL)
    {
        m_DlgA.DestroyWindow();
    }
 
    // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.
 
    return CWinApp::ExitInstance();
}
 
 
/**************************  외부노출함수들.  *******************************************/
// 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.
// 인자.
// closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.
extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)
{
    AFX_MANAGE_STATE(::AfxGetStaticModuleState());    // 외부노출함수 첫자리에 기본배치해둬.
 
    theApp.m_DlgA.CheckForUpdate(closeifnoupdate);
 
    return 1;//
}
 
 

 

C++ 코드 하이라이팅 결과. 

스크롤 없이 전체 표현해본것.

 

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
32
33
34
35
#include "stdafx.h"
#include "AutoUpdate.h"
 
#ifdef _DEBUG
#define new DEBUG_NEW
#endif
 
int CAutoUpdateApp::ExitInstance()
{
 
    if(m_DlgA.GetSafeHwnd() != NULL)
    {
        m_DlgA.DestroyWindow();
    }
 
    // TODO: 여기에 특수화된 코드를 추가 및/또는 기본 클래스를 호출합니다.
 
    return CWinApp::ExitInstance();
}
 
 
/**************************  외부노출함수들.  *******************************************/
// 응용앱에서 업데이트 체크하고 업뎃진행시켜주는 함수.
// 인자.
// closeifnoupdate : 1 = 업뎃할것없다면 스스로 닫아라는 설정. 0: 업뎃할것없어도 스스로 닫지 않음 사용자가 닫기해야함.
extern "C" __declspec(dllexport) int CheckForUpdate_AutoUpdate(int closeifnoupdate)
{
    AFX_MANAGE_STATE(::AfxGetStaticModuleState());    // 외부노출함수 첫자리에 기본배치해둬.
 
    theApp.m_DlgA.CheckForUpdate(closeifnoupdate);
 
    return 1;//
}
 
 

 

 

 

 

 

결론- 최종선택 Color Script

   

 URL : http://prev.kr/apps/ColorScripter/?run=1

 

 

본 글 처음 작성시에는 비설치형 모든 코드 하이라이트 사이트들 방문하면서 시험해보고 만족스러운 것을 선택할려고 했는데, 위 4번 Color Script 까지 시험해보고, 품질이 만족스러워 추가 조사할 필요성을 못느끼게 되었다. 또한 어떤 사이트에서는 회원가입해야 코드 색상입혀주겠다는 곳도 있었는데, 이런 곳은 검토 대상에서 제외시켰다. 

 

1번 Highlighter 도 표현품질은 좋으나, css 기반이어서 다른 사이트의 블로그에서 등에서 복사해서 붙여넣기 한 경우 코드 하이라이트가 보존되지 않고 또한, css 관리하기 귀찮아서 제외되었다.

 

반면에 Color Script 는 설정부에서 충분한 사용자 편의성이 돋보인다. 사용법에 있어서도 html 편집모드에서 작업하지 않고 위지윅 편집기에서 바로 붙여넣기로 코드 표현되서 편하다. Color Script로 시험해본 곳은 구글 블로거, 티스토리 블로그, 네이버 카페 , 네이버 블로그 4군데였다. 모두 정상 코드 하이라이팅 결과를 보여준다.

 

단, 아쉬운 점은 워드프레스 에서는 Color Script 에서 생성된 코드를 붙여넣기 하면 품질이 만족스럽지 않다. 아래에 상황을 보임.

 

워드프레스에서는 코드 하이라이팅 전용의 플러그인이 강력한 것을 무료로 사용가능하기에 전용 플러그인을 추천한다. -> 워드프레스에서 플러그인으로 코드 하이라이트 기능 구현.

 

 
 

 

워드프레스에서 Color Script 에서의 코드하이라이팅괸것을 편집창에 붙여넣기 한 경우. 모양새는 앞의 것 대비 달라졌지만 여기까지는 볼만하다.



 

그러나, 실제 워드프레스 사이트에서 보이는 모습은 아래다. 문제점 : 번호정렬이 이상해졌다. 번호를 표현하지 않는 경우엔 쓸만하다.



 

 

 

 

본 글이 포함된 통합 정리 글

 

WordPress 활용정보 정리 : http://igotit.tistory.com/23

 

 

 

 

///52

 

 

저작자표시 비영리 변경금지

'일반' 카테고리의 다른 글

Notepad++ 설치, UTF-8 BOM 선택가능, ANSI,UCS, 코드하이라이트 기능 있음.  (0) 2014.10.24
도메인 연결하기, 도메인 포워딩 하기. 카페24 DNS 이용하는 경우.  (0) 2014.10.16
티스토리에 구글드라이브 이미지 조금 쉽게 넣기. 서식이용.  (0) 2014.10.02
Flickr 활용팁  (2) 2014.10.01
NetDrive 설치 활용-구글드라이브를 PC에서 넷(로컬)드라이브로 인식  (0) 2014.09.29

관련글

댓글


 
.

비트코인



암호화폐       외환/나스닥/골드         암호화폐/외환/나스닥/골드
     
현물 |선물 인버스 |선물 USDT       전략매니저(카피트레이딩)         프랍 트레이더 온라인 지원가능. MT4,MT5



티스토리툴바