:D: SyntaxHighlighter

2014년 5월 4일 일요일

블로그 스팟에 SyntaxHighlighter 적용하기 - 2

블로그 스팟에 SyntaxHighlighter를 적용하고 코드를 입력해 보았더니 한가지 문제가 생겼습니다.

코드에 공백을 스페이스가 아닌 탭을 사용했다면 공백 한칸으로 처리 되어 출력이 됩니다.

개인적으로 코드를 짤때 탭을 이용하는지라 해당 소스를 그대로 올리면 가독성이 문제가 생겨서 이리저리 방법을 찾아보았지만

해결 방법을 찾지 못하였습니다.

그래서 결국 C#을 이용해 탭을 공백으로 변경해주는 간단한 프로그램을 하나 만들어 소스의 탭을 공백으로 변경시켜 올리기로 했습니다.

일단 블로그 스팟에 탭을 사용한 코드를 그대로 올리면 어떻게 되는지 먼저 보시죠.

- GUIText[]와 m_Label사이에 탭 1번 사용
- m_Label과 주석 사이에 탭 3번 사용
- float과 m_During 사이에 탭 2번
- m_During과 주석 사이에 탭 1번 사용

중간중간 탭을 사용하였지만 탭 수만큼 공백이 생기면서 정리가 안됩니다.

탭을 스페이스를 이용한 공백으로 변경해서 올려보겠습니다.

이제 가독성이 좋아졌습니다.

탭을 공백으로 변경해주는 프로그램을 만들어 보겠습니다.

먼저, 탭의 원리를 알아보겠습니다.

위 숫자들의 빈 공간은 탭을 사용해 공간을 확보한 부분입니다.

어느 위치에서 탭을 하더라도 지정 된 크기(여기서는 4칸)의 가장 가까운 곳으로 이동하게 됩니다.

1. 폼 제작

폼에 사용 된 위젯은 TextBox 2개와 Button 1개 입니다.
textBoxBefore : 좌측 TextBox
textBoxAfter : 우측 TextBox

2. 코드 입력

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace TabChange
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

private void button1_Click(object sender, EventArgs e)
        {
            // 우측 텍스트박스 초기화
            textBoxAfter.Text = "";

// 좌측 텍스트박스의 내용을 개행을 기준으로 arrText 배열에 라인별 입력
            string[] arrText = textBoxBefore.Text.Split('\n');

for (int i = 0; i < arrText.Length; i++)
            {
                string text = arrText[i];

while (true)
                {
                    // 탭의 위치 검색
                    int pos = text.IndexOf("\t");

// 해당 라인에 탭이 존재하지 않으면 while문을 빠져나온다
                    if (pos == -1)
                    {
                        // 우측 텍스트박스 내용에 수정 된 text를 입력하고 개행을 한다
                        textBoxAfter.Text += text + "\n";
                        break;
                    }
                    else
                    {
                        // 탭을 제거
                        text = text.Remove(pos, 1);

// 제거 된 탭이 차지하고 있는 공백을 계산
                        string space = "";
                        int len = 4 - (pos % 4);
                        for (int j = 0; j < len; j++)
                        {
                            space += " ";
                        }

// 제거한 탭 위치에 공백을 입력
                        text = text.Insert(pos, space);
                    }
                }
            }
        }
    }
}

3. 사용
좌측에 탭이 사용 된 코드를 넣고 버튼을 누르면 우측에 스페이스로 변경 된 코드가 출력 됩니다.

HTML을 이용하면 효과적인 방법이 있을것 같은데요 아시는분은 가르쳐주세요 ㅠㅠ

2014년 4월 29일 화요일

블로그 스팟에 SyntaxHighlighter 적용하기

소스 코드를 보기 좋게 하기위해 SyntaxHighlighter를 설치해 보겠습니다.

1. 구글 블로그 템플릿 수정

템플릿 -> HTML 편집 버튼을 눌러 코드를 수정하겠습니다.

<head>
    .. 생략 ..
    <script>
 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>
        SyntaxHighlighter.all();
    </script>
  </head>

와 head 와 head 사이에 위와 같이 script를 추가해 줍니다.

타 블로그의 경우에는 Syntax Highlighter을 적용하기 위해서 파일을 업로드 해야 하지만

구글 블로그의 경우에는 파일 업로드가 제한적이기 때문에 링크로 대체하였습니다.

저는 제가 사용 할 것 같은 brush 파일과 테마 파일만 링크로 연결했습니다.

그리고 body 부분을 찾아 아래 코드를 입력해 줍니다.

위 코드는 textarea를 사용해서 코드를 입력하기 위한 방법입니다.

코드를 입력할 때는 pre 태그와 textarea 태그를 사용 할 수 있는데요.

pre 태그를 사용 할 경우 꺽쇠( <, > ) 사용 시 코드가 깨지는 현상이 발생합니다.

3. 코드 입력 방법 알아보기

마지막으로 포스팅을 할 때 textarea 태그를 사용해서 코드를 입력하는 방법을 알아보겠습니다.

글쓰기 모드에서 좌측 상단의 HTML 버튼을 누르면 HTML편집창으로 변환됩니다.

여기에 아래와 같은 방법으로 코드를 입력 시킬 수 있습니다.

태그가 중복으로 사용이 안되 꺽쇠를 하나씩 빼고 적었습니다. ㅠㅠ

사용 가능한 언어는 아래 이미지를 참고 하시면 됩니다.

:D

2014년 5월 4일 일요일

블로그 스팟에 SyntaxHighlighter 적용하기 - 2

2014년 4월 29일 화요일

블로그 스팟에 SyntaxHighlighter 적용하기

Post List

블로그 보관함