티스토리에 소스코드 넣기 - SyntaxHighlighter 블로그 사용,설정,활용

개발자의 글에는 소스 코드는 거의 필수적으로 들어간다.

소스 코드 관련 글에서 소스코드의 가독성은 정말 중요하다.

소스 코드를 스크린샷으로 찍으면 예쁘지만, 블로그를 찾는 사람들에게 이미지로된 소스코드는 사용하기 불편하다 .

가독성이 떨어지는 소스코드

 Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
                .setSmallIcon(R.mipmap.ic_launcher).setLargeIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher) )
                .setContentTitle("Title : "+title)
                .setContentText("내용 : "+msg) //
                .setAutoCancel(true)
                .setSound(defaultSoundUri).setLights(000000255,500,2000)
                .setContentIntent(pendingIntent)
                //확대스타일
                .setStyle(new NotificationCompat.BigTextStyle()
                        .bigText(msg + "\n" +message.toString()))
                .addAction (R.mipmap.ic_test1,
                        getString(R.string.graph), piDismiss)
                .addAction (R.mipmap.ic_test2,
                        getString(R.string.flash), piSnooze);

그나마 괘찮은 (툴에서 소스코드 소스그대로 붙여넣기)

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
PendingIntent.FLAG_ONE_SHOT);

Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
.setSmallIcon(R.mipmap.ic_launcher).setLargeIcon(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher) )
.setContentTitle("Title : "+title)
.setContentText("내용 : "+msg) //
.setAutoCancel(true)

스크립캡처 이미지로 올리는 소스코드 ( 사용자입장에서 불편)

SyntaxHighlighter라는 Code syntax HighLihter 를 이용한 소스코드

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
    @Override
    public IBinder onBind(Intent intent) {
        // TODO: Return the communication channel to the service.
        throw new UnsupportedOperationException("Not yet implemented");
    }

    //onstart
    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        //return super.onStartCommand(intent, flags, startId);
        if(intent != null){
            String name = intent.getStringExtra("name");
            int count = intent.getIntExtra("count",0);
            Log.i(TAG,startId+" : "+ name +count );
        }
        return Service.START_NOT_STICKY;
    }

SyntaxHighlighter라는 Code syntax HighLihter 를 이용한 소스코드 사용하는방법!

1. Tool 다운받기

먼저 SyntaxHighlighter의 홈페이지에 접속합니다!

http://alexgorbatchev.com/SyntaxHighlighter/

http://alexgorbatchev.com/SyntaxHighlighter/download

바로 다운로드 받기

http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

2. 티스토리 설정

티스토리 관리 페이지로 가서  [HTML/CSS편집] 이동한다.

오른쪽에서 파일업로드 탭을 클릭하고 ( 1 )

하단에 추가 버튼을 누른다. ( 2 )

다운받은 압축파일을 푼후, Scipts 폴더의  *.js 파일을 모두 선택합니다 ( 3 )

다운받은 압축파일의 styles 파일의 *.css 파일을 모두 선택합니다 ( 4 )

해당 파일들을 추가한후, HTML 탭으로 이동한후,

</Header> 바로 위에 아래 코드를 붙여넣습니다.

3. 소스코드 넣기 사용법

1. 테마 변경하기

HTML탭에서 추가한 소스코드에서 형광색부분의 이름에 따라 ( 파일업로드했던 이름) 을 바꿔주면 테마가 바뀝니다.

2. 소스 코드 넣기

우선 아래의 사진의 오른쪽 형광팬의 HTML 체크박스를 누른후,

ex>1

<pre name="code" class="brush:java">String title = data.get("title");
String msg = data.get("message");
</pre>

ex>2
<textarea name="code" class="brush:java;">

void main
{
   cout &lt;&lt; "test"
}
</textarea>

ex>3
<pre class="brush:java">
소스코드
String a= "22";

</pre>

예제 코드를 입력한후, 발행하면 게시글이 만들어집니다.

class = "brush:사용언어" 에 따라 변경할수 있습니다.

사용언어는 아래 사진과 같습니다.

이와같이 쉽게  블로그 게시글에 소스코드를  출력할수 있습니다.