[WinCE 7] Windows Embedded Compact 7 개발(3) - Getting Started

Microsoft의 Windows Embedded Compact 7 관련 내용을 보자.

A. Windows Embedded Compact 7 (이하 WinCE 7 또는 Windows Compact 7) 시작

1. microsoft의 WinCE 7 사이트에 잘 설명이 되어 있다.

  http://msdn.microsoft.com/en-us/library/default.aspx

2. 위의 사이트에 보면, MSDN Library 항목 밑으로 개발에 대한 서브 항목들이 있다.

서브 항목은 아래와 같이 구성이 되어 있다. 하나씩 보면서 필요한 것들 위주로 보자.
[MSDN Library]
|_ [Mobile and Embedded Development]
   |_ [Windows Embedded]
      |_ [Windows Embedded Compact]
         |_ [Windows Embedded Compact 7]
            |_ [What's New]
            |_ [Getting Started]
            |_ [Developer Guides]
            |_ [Code Samples]
            |_ [Reference (Compact 7) Glossary Additional Resources]
            |_ [Troubleshooting Support Release Notes for Windows Embedded Compact 7]

위의 항목 중에 'Getting Started' 를 먼저 보자.
[Getting Started]
|_ [Prerequisties]
|_ [Installation]
   |_ [Update Windows Embedded Compact [FrontMatter]]
|_ [Set Up a Virtual Device]
|_ [Design Your First OS]
|_ [Create an SDK]
|_ [Create an Application]
|_ [Download the OS to the Device]
|_ [Run the Application]
|_ [Debug the Application]
|_ [What's Next]

이제 항목 하나씩 진행해 보자.

B. Getting Stated

0. 여기에서 나오는 것은 ARM과 x86 기반의 디바이스를 기준으로 설명하고 있다.

1. Prerequisties

- WinCE 7을 설치하기 위한 최소 사양에 대한 내용이다.
- 요즘 나오는 노트북이나 데스크탑의 경우엔 거의 최소 사양을 맞출 것으로 보인다.
- 다만 OS에서 Windows 8인 경우에는, Windows 8 Pro 이면 좋겠다
   (Windows 8인 경우엔 지원안되는 기능이 있음).

2. Installation

- WinCE 7을 설치하기인데, 문서의 후반부는 실제 설치시와 약간 다른 것 같다(7~11번 항목들).
- 'Full Installation' 보다는 'Customize Installation'을 하는 것이 좋겠다(문서 내용 참조).
- 문서에 나와있는 것과 같은 component들만 설치하는 것이 좋을 것 같고,
   필요없다면 일본어 문서 component는 빼도 될 듯 하다.

3. Set Up a Virtual Device

- 이 항목은 실제 디바이스가 없는 상황에서, 가상의 디바이스를 잡는 것이다.
- x86의 기반의 가상 디바이스만 만들 수 있다.
- x86이 아닌 다른 실제 디바이스를 갖고 있는 경우에는, 이 과정을 넘어가도 될 듯 하다.

4. Design Your First OS

- 실제 디바이스나 가상 디바이스에서 사용할 OS를 만든다.
- x86기반으로 설명하며, ARM기반으로 만들 경우에는 BSP만 ARM으로 변경해서 만들면 된다.
- 빌드 옵션 등은 별도로 수정하지 않았고, 관련 있는 경우에만 수정하면 될 것 같다.

5. Create an SDK

- 만든 OS를 이용할 수 있도록 SDK를 만든다.
- 만약 Platform Builder안에서 Application을 만든다면 SDK를 사용하지 않겠지만,
   Platform Builder를 쓰지 않으면 SDK를 사용해야 한다.
- 물론 SDK는 앞서 만들었던 OS Design 프로젝트에서 생성해야 한다.
- 관련 설명은 http://msdn.microsoft.com/en-us/library/jj823234.aspx 에서 볼 수 있다.
   : 'Getting Started' 다음 항목인 'Developer Guides' 안의 'Application Development' 항목이다.

6. Create an Application

- 앞서 만들었던 OS Design 프로젝트의 서브프로젝트로 Application을 만든다.
- 예제 코드를 넣어 빌드한다.

7. Download the OS to the Device

- 앞서 만들었던 OS Design을 가상 디바이스에 다운로드 하는 것이다.
- 문서대로 따라하면 가상 디바이스를 띄우는데 그리 어려운 문제는 없다.
- 다만, 주의할 점이 몇가지 있기에 적어 본다.
   : [주의 1] 개발 PC가 Windows 7 Pro라고 가정한다.
      i. 문서대로 진행하면서, 뒷 부분에 보면 run-time image를 다운로드 하기 위해
         'Device Status' 창과 'BOOTME messages'를 보내는 창이 떠 있을 것이다.
      i. 이 때, 다운로드가 진행이 안되면서, 에러를 표시할 것이다.
        <에러 내용>
          * ERROR: BootTransportPb: TFTP timeout occured!
          * ERROR: BootDownloadBin!ImageType: BootTransportRead Failed!
        <관련 사이트 > :  http://social.msdn.microsoft.com/Forums/en-US/34db2cc5-4034-4089-b324-f0a54258f158/virtual-cepc-image-download-error
          * 나와 똑같은 에러가 난 상황에 대하여 논의된 내용들이다.
      i. 해결 방법
          * UDP CRC Checksum을 '사용 안 함' 으로 한다.
          * 위치 : [시작] - [제어판] - [네트워크 및 공유 센터] -
                      [네트워크 상태 및 작업 보기] - [어댑터 설정 변경] -
                      [로컬 영역 연결] 우클릭하여 '속성' 열기 -
                      '연결에 사용할 장치'의 '구성' 버튼 누르기 - '고급' 탭 누르기 -
                      'UDP 체크섬 오프로드(IPv4)' 의 값을 '사용 안 함' 으로 변경
          * 이렇게 수정을 하고, 다시 해보면 정상적으로 다운로드가 진행된다.
   : [주의 2] OS를 ARM 기반으로 만들고, 가상 디바이스에 다운로드 하면
      'Device Status' 창이 닫히면서, 중단된다.
      i. 앞서 만들었던 OS Design은 x86 기반으로 만든 경우에는,
         여기서 다운로드가 되어 가상 디바이스를 실행할 수 있다.
      i. 해본 것은 아니지만, ARM기반으로 OS를 만들어서,
         실제 디바이스에 다운로드하는 것은 될 것으로 본다.

8. Run the Application

- 앞서 만들었던 Application을 가상 디바이스 및 실제 디바이스에서 실행한다.

9. Debug the Application

- 앞서 만들었던 Application을 가상 디바이스 및 실제 디바이스에서 실행하면서 디버깅한다.

C. 다음으로 해 볼 내용

1. 실제 디바이스(ARMv7)용 Application 제작 및 실행

[WinCE 7] Windows Embedded Compact 7 개발(2) - Visual Studio 2008 설치

WinCE 7의 개발을 하기 위해선 Visual Studio 2008 Pro 버전이 필요하다.

검색을 해보니, Visual Studio 2008을 잘 설치할 수 있는 방법에 나온 블로그가 있기에 내용을 연결한다.

A. 외부 블로그의 설명

1. [원문 블로그] Visual Studio 2008 설치오류 없이 설치하는 법 - SP1, 최신 업데이트 적용

http://blog.minjae.kr/m/post/view/id/90

2. [내용] 원문의 내용입니다.

Visual Studio 2008을 설치해서 사용하고자 할때,

딱, VS2008의 최초 배포상태로만 설치해서 사용한다면 별로 문제될것이 없겠지만,

개발을 하면서 서비스팩이나 Windows SDK같은것을 설치하지 않고 사용하는 사람은 없을 것이다.

뭐 추가로 필요한 것이 있으면 언제든지 필요할때마다 설치해서 사용하는 것이 좋겠지만

MS 관련 제품군들이 다 그렇듯이 문제는 이놈들이

레지스트리를 비롯하여 윈도우환경 자체를 너무 많이 건드린다는 것이고,

이 과정에서 지네 MS제품군들간의 충돌 문제로 설치오류가 빈번히 발생한다는 것이다.

실례로,

VS 2008을 설치 후, SP1을 설치하기 전에

윈도우 업데이트를 통해 VS2008 관련 Hotfix를 설치했다면 SP1이 설치에 실패 하는 경우가 허다하게 발생한다.

그리고, SP1 설치전 윈도우 SDK를 설치해도 역시나 SP1이 설치되지 않는 경우가 많다.

전자의 경우 Visual Studio 2008 Service Pack Preparation Tool 이라는 것을 설치하면

SP1 설치에 문제가 되는 Hotfix 들을 알아서 제거해 줘서 SP1을 설치할 수 있지만,

후자의 경우에는 인터넷에 떠도는 레지스트리 수정 방법 같은 것을 적용해도

충돌이 일어난 SDK를 삭제하기 전까지는 계속해서 설치오류가 발생한다.

따라서, 설치오류로 인한 스트레스와 재설치 등으로 인한 시간낭비를 줄이기 위해서는

Visual Studio 2008을 다음 순서로 설치하는 것이 좋다.

물론 운이 좋다면 순서 상관없이 막 설치해도 오류가 안나는 경우도 있지만

지금까지의 경험을 바탕으로 아래 순서로 설치하는 것이 설치오류를 피하는 가장 좋은 방법이라 생각된다.

앞으로는 Visual Studio 2008 설치오류로 스트레스 받는 사람이 줄어들기를 바란다.

1. Microsoft Visual Studio 2008 설치.
2. Microsoft Visual Studio 2008 서비스 팩1 설치.
3. VS 2008 SP1 Intellisense Locale 버그 패치 설치 (필자같이 영어 약한 사람은 필수.)
4. MSDN Library for Visual Studio 2008 SP1 설치.
5. Windows SDK for Windows Server 2008 and .NET Framework 3.5 설치
   (이과정에서 필요하다면 DirectX SDK같은 필요한 추가 SDK설치)
6. Microsoft Visual Studio International Pack 1.0 SR1 설치 (만약 필요하다면)
7. Microsoft Visual Studio International Feature Pack 2.0 설치 (만약 필요하다면)
8. Microsoft Windows Update를 통한 Hotfix 설치

B. 적용한 내용

1. 설치한 순서

  - Microsoft Visual Studio 2008 설치
  - Microsoft Visual Studio 2008 SP 1 설치

위의 내용에서 일단 1번과 2번만 했다. 이후 것들은 아직 설치를 하지 않았는데, 필요하면 설치를 해야겠다.

2. 추가 설치 (디버깅용 패치)

[내용]

When debugging Windows Embedded Compact 7 application using the Visual Studio 2008 for Smart Devices debugger, a user might not be able to use the single step function. This update addresses this issue.

  - Microsoft Visual Studio 2008 update
     http://www.microsoft.com/en-us/download/details.aspx?id=11935

  - 참조 블로그
     에릭님의 블로그 : http://blog.naver.com/PostView.nhn?blogId=mmxtechn&logNo=140180114869

[WinCE 7] Windows Embedded Compact 7 개발 (1) - 개발 PC(Win8)와 실제 디바이스 연결

Windows Embedded Compact 7 (이하 WinCE 7)단말에 개발을 할 일이 생겼다.
개발용 PC와 실제 디바이스를 연결해보려 한다.

A. Windows 8과 Windows Embedded Compact 7 연결

Windows 8에 WinCE 7단말을 연결하였더니, usb로 연결이 안된다. usb 드라이버를 못 찾는 것 같아서 여기 저기 찾아보았다. Activesync 라는 것을 써서 Windows PC와 모바일 단말(WinCE 7)을 연결하는 것으로 보인다(ActiveSync를 사용해 본 적이 없으니 처음부터 삽질을 하게 되었다).

1. Windows Mobile Device Center 확인

Windows 8에는 Windows Mobile Device Center 라는 것이 있다(이것을 이용하여 PC와 모바일 단말(WinCE 7)을 연결한다).
제어판을 들어가면(Windows 키 + X 버튼), 큰아이콘 기준으로 보면 찾기 쉽다.

범주 기준으로 본다면, '시스템 및 보안' -> '하드웨어 및 소리' 로 들어가면 중간쯤에 있다.

2. Windows Mobile Device Center 다운로드 및 설치

Windows Mobile Device Center 를 실행해보자. 실행이 안된다. 뭔가 문제가 있는 것이겠지.
그래서 Windows 8에서 WinCE 7 단말과 연결이 안된 것으로 보인다.
Windows Mobile Device Center 드라이버를 찾아보자.

Windows Mobile Device Center 관련 support page : http://support.microsoft.com/kb/931937/ko
드라이버 다운로드는 아래 사이트에서 받으면 된다.
 - 64비트 버전 : http://www.microsoft.com/en-us/download/details.aspx?id=3182
 - 32비트 버전 : http://www.microsoft.com/en-us/download/details.aspx?id=14

다운로드 받을려면 GenuineCheck.exe파일을 받으라고 나온다. 유효성 검사를 하는 듯 하다.

다운 받아서 실행하면 코드 값이 나오는 것을 입력하면 다운로드를 할 수 있다.

Windows Mobile Device Center 드라이버를 설치 또는 업데이트를 한다.

3. WinCE 7 단말의 연결 확인

이후에 Windows Mobile Device Center를 실행하면, 장치와 연결되어 있다고 나온다.

윈도우 탐색기에서 보면, '휴대용 장치' 항목에 WinCE 7 장치가 연결되어 있는 것을 볼 수 있다.(이미지 첨부 - 탐색기)

추가 : 위의 내용은 크롬 브라우져로 진행한 것이다. IE를 쓰면 약간 다른 방식으로 진행된다.
크롬에서는 GenuineCheck.exe 파일를 다운 받아 실행하여, 코드 값을 생성하여 사용했는데, IE에서는 뭔가 설치되는 느낌이었다.
크롬에서는 파일을 다운받을 때, 위의 파일을 계속 받으라고 나오는데, IE에서는 한번 설치(?)하면 이후에 나오지 않았다.

B. 다음에 해볼 내용

  1. Microsoft 사이트를 들어가서, WinCE 7 개발에 대한 전반적인 내용을 진행해 보자.

[Android] Android NDK를 이용한 예제 작성

* 지난 번에 Android NDK의 빌드 환경을 설정했다. 그 때에는 빌드 환경을 설정하고, Android에서 제공하는 예제를 실행해 보는 것으로 끝났었다. 이제 Android NDK로 빌드하는 예제를 만들어 보고자 한다.

* Android NDK 예제를 찾다 보니, 잘 설명된 blog가 있어서, 그대로 따라하면서 Project를 생성해 본다.

1. 개발 환경

 * 개발 환경에 대해서는 지난 번 글([Android] Android NDK 빌드 환경 꾸미기)에서 했던 내용이다.

1-1. cygwin

Windows의 경우, cygwin 설치가 되어 있어야 한다. command창에서 javah나 ndk-build 명령을 실행한다.

2. Eclipse : Android Project 생성

 * Eclipse workspace에 새로운 프로젝트를 생성하자[File -> New -> Android Application Project].

 * Next를 클릭하여 다음으로 진행한다.
 * 프로젝트 정보
   - Application Name : NDKTest
   - Package Name : com.shnoh.ndktest
   - Activity Name : NDKTestMainActivity

package com.shnoh.ndktest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class NDKTestMainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ndktest_main);
    }
    
}

2-1. Layout 구성

 * 단말 화면에 보여질 Layout을 구성한다.
   - 파일 위치 : NDKTest\res\layout\activity_ndktest_main.xml
 * Button 하나와 TextView 하나를 추가한다.

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context=".NDKTestMainActivity" > <Button android:id="@+id/callBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Call JNI" /> <TextView android:id="@+id/textVal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15pt" /> </LinearLayout>

2-2. Activity 구현

 * Button과 TextView의 View ID를 가져온다.
 * Button을 눌러 JNI 함수를 호출하는 부분을 추가한다.
 * Native 함수를 호출할 class 이름을 NativeCall 이라고 만든다.

package com.shnoh.ndktest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class NDKTestMainActivity extends Activity {

 private Button mBtn;
 private TextView mTextView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ndktest_main);
        
        mBtn = (Button) findViewById(R.id.callBtn);
        mTextView = (TextView) findViewById(R.id.textVal);
        
        mBtn.setOnClickListener(new OnClickListener() {
   
            @Override
            public void onClick(View arg0) {
                // TODO Auto-generated method stub
                NativeCall nativeCall = new NativeCall();
                int ret = nativeCall.add(10,20);
                String retStr = nativeCall.stringFromJNI();
                mTextView.setText(retStr);
            }
        });
    }   
}

2-3. JNI를 위한 class 생성

 * 앞 단계에서 이름 지은 NativeCall class를 생성한다.
   - 파일 위치 : NDKTest\src\com.shnoh.ndktest\NativeCall.java
 * 소스 내용
   - native 키워드 : javah 가 헤더(header) 파일을 생성할 때 참조하는 키워드임.
   - 구현부는 없음.
   - static 부분 : class 객체가 생성될 때(new 될 때) 호출됨.
   - System.loadLibrary("my_lib") : ndk-build로 생성된 lib 이름("my_lib").
   - Library 파일 명 : libmy_lib.so

package com.shnoh.ndktest;

public class NativeCall {

    static {
     System.loadLibrary("my_lib");
    }
    
    public native int add(int i, int j);

    public native String stringFromJNI();
 
}

2-4. javah 실행 : Native 소스를 위한 header 파일 생성

 * Eclipse의 NDKTest 프로젝트를 빌드를 하여, NativeCall.class 파일을 만든다.
 * Native 소스를 위한 header 파일 생성하기 위해 command창을 열어 javah 를 실행한다.
 * javah 의 실행 위치 및 command
   - 프로젝트 root 폴더에서 실행 :
     i. 명령어 : NDKTest>javah -classpath bin/classes com.shnoh.ndktest.NativeCall

     i. 결과 화면

   - 프로젝트 bin 폴더에서 실행 :
     i. NDKTest\bin>javah -classpath classes com.shnoh.ndktest.NativeCall

     i. 결과 화면

   - 한번만 해도 될 것을 테스트성으로 각기 다른 폴더에서 javah를 실행함.

 * 이제 프로젝트 루트 폴더에 /jni 폴더를 만들어, 위에서 만든 헤더 파일을 이동한다.

   - header 파일 내용

/* DO NOT EDIT THIS FILE - it is machine generated */
#include 
/* Header for class com_shnoh_ndktest_NativeCall */

#ifndef _Included_com_shnoh_ndktest_NativeCall
#define _Included_com_shnoh_ndktest_NativeCall
#ifdef __cplusplus
extern "C" {
#endif
/*
 * Class:     com_shnoh_ndktest_NativeCall
 * Method:    add
 * Signature: (II)I
 */
JNIEXPORT jint JNICALL Java_com_shnoh_ndktest_NativeCall_add
  (JNIEnv *, jobject, jint, jint);

/*
 * Class:     com_shnoh_ndktest_NativeCall
 * Method:    stringFromJNI
 * Signature: ()Ljava/lang/String;
 */
JNIEXPORT jstring JNICALL Java_com_shnoh_ndktest_NativeCall_stringFromJNI
  (JNIEnv *, jobject);

#ifdef __cplusplus
}
#endif
#endif

2-5. Native 소스 구현

 * jni 폴더에 my_lib.c 파일을 만들어, 위에서 선언한 함수들을 구현한다. 2개의 함수이다.
   - String을 return 해주는 함수
   - 2개의 정수를 입력 받아 합을 return 해주는 함수
 * my_lib.c 파일 내용

#include "com_shnoh_ndktest_NativeCall.h"

JNIEXPORT jstring JNICALL Java_com_shnoh_ndktest_NativeCall_stringFromJNI(JNIEnv *env, jobject obj)
{
    return (*env)->NewStringUTF(env, "Hello JNI!!!!!");
}

JNIEXPORT jint JNICALL Java_com_shnoh_ndktest_NativeCall_add(JNIEnv *env, jobject obj, jint i, jint j)
{
    return i + j;
}

2-6. Android.mk 파일 작성

 * 지난 번에 설치한 Android NDK의 Sample 폴더에 보면, hello-jni 폴더가 있다. 이 프로젝트의 Android.mk 파일을 가져와서 수정을 하자.
 * 수정된 부분은 LOCAL_MODULE 과 LOCAL_SRC_FILES 항목이다.
   - Android.mk 파일 내용

# Copyright (C) 2009 The Android Open Source Project
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#      http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
LOCAL_PATH := $(call my-dir)

include $(CLEAR_VARS)

LOCAL_MODULE    := my_lib
LOCAL_SRC_FILES := my_lib.c

include $(BUILD_SHARED_LIBRARY)

3. ndk-build : command 창 

 * 프로젝트의 root 폴더 또는 /jni 폴더에서 "ndk-build" 라는 명령을 실행한다.
   - 프로젝트 root 폴더에서 실행
     i. 명령어 : NDKTest>ndk-build

     i. 결과 화면

 * 빌드가 수행되고 나면, libs/armeabi 폴더에 "libmy_lib.so" 파일이 생성된다.

4. 실행 및 설치 : apk 빌드 및 설치

 * Eclipse 프로젝트에서 빌드 후 apk를 설치한다.

5. 실행 화면

 * apk를 실행하면 아래와 같은 화면을 볼 수 있다.

 * "Call JNI" Button을 누르면, "Hello JNI!!!!!" 라는 String이 보인다.

 * 2개의 정수를 더한 값을 return하는 것은 연결되어 있지 않다.

6. 샘플 소스

 * 위에서 사용한 샘플 소스이다.
   - https://snoh@bitbucket.org/snoh/androidndk
   - Mercurial command : hg clone https://snoh@bitbucket.org/snoh/androidndk

7. 출처 및 참고 사이트

7-1. 안드로이드 공식 사이트

 * Getting Started with the NDK
   -  http://developer.android.com/tools/sdk/ndk/index.html#GetStarted

7-2. 개인 블로그

 * Memories collected..."추억수집" : NDK를 이용한 안드로이드 App 기본예제
   - http://viiiin.tistory.com/12

 * 박상현님의 블로그 : javah 사용법
   - http://blog.naver.com/PostList.nhn?blogId=multisunchon&categoryNo=26&from=postList

[정보] 구글 블로그(Blogspot)에 Syntax Highlighter 적용하기

구글 블로그에 소스 코드를 올리면, 그냥 Text 형식으로 된다. 소스에 컬러를 주고 예쁘게 꾸며 주고 싶은데 잘 안되어, 이미지로 캡쳐를 해서 올리곤 했다. 다른 블로그에는 예쁘게 잘 나오는 것을 보아 방법이 있을텐데....

역시 찾아보니 답이 있다.

어떤 이들은 SyntaxHighlighter_1.5.1 버전의 파일을 다운 받아, 파일을 업로드 하여 연결하여 쓰기도 하는 것 같다. 티스토리의 경우가 잘 되는 것으로 보이는데, 구글 블로그는 잘 안되어서 이상하긴 하다.

다른 방법을 찾아보니, 또 다른 블로그를 발견!

그대로 따라하니, 잘 된다.

1. 내 블로그의 템플릿 화면으로 들어간다.
  * 사용중인 디자인의 HTML 편집을 선택한다.
2. SyntaxHighlighter.css 파일의 내용을 추가한다.
  * 추가 위치는 <b:skin></b:skin> 사이에 하면 된다.
  * 아래는 SyntaxHighlighter.css 파일의 내용이다.

.dp-highlighter { font-family: "Consolas", "Courier New", Courier, mono, serif; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; } .dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; } .dp-highlighter .bar { padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; } .dp-highlighter ol { list-style: decimal; /* for ie */ background-color: #fff; margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */ list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; } .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; } .dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; } .dp-highlighter .columns div { padding-bottom: 5px; } .dp-highlighter ol li.alt { background-color: #FFF; color: inherit; } .dp-highlighter ol li span { color: black; background-color: inherit; } /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol { margin: 0px; } .dp-highlighter.collapsed ol li { display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing { border: none; } .dp-highlighter.printing .tools { display: none !important; } .dp-highlighter.printing li { display: list-item !important; } /* Styles for the tools */ .dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools { border-left: 0; } .dp-highlighter.collapsed .tools { border-bottom: 0; } .dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; }  
3. Javascript 파일들을 가져오기 위해 아래 코드를 추가한다.
  * 추가 위치는 <head></head> 사이에 하면 된다.
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>
4. 그 다음 아래 코드들을 추가한다.
  * 추가 위치는 <body></body> 사이에 하면 된다.
<script type="text/javascript"> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>
5. SyntaxHighlighter 적용을 위한 작업은 다 되었다.
  * 글쓰기를 할 때, HTML 화면에서 pre 태그나 textarea 태그를 이용하여 소스 코드를 올리면 된다.

<예제>

<br />
void main() {
}

6. 참조사이트
  * anshNote 블로그 : http://anshnote.blogspot.kr/2011/07/syntax-highlighter-blogger.html