1 Results for 'SyntaxHighlighter'

  1. 2008.11.03 SyntaxHighlighter, 예쁜 코드를 달아봅시다. (1)

오늘도 구글신과 오픈소스의 성인들에게 감사하는 마음으로, 살짝 경건하게 SyntaxHighlighter를 달아봅시다.

티스토리가 가장 마음에 드는 건 역시 블로그 페이지의 구성을 <!DOCTYPE…부터 시작해서 모든 코드를 내가 마음대로 손댈 수 있고 <script>나 <object> 등에 대한 제한도 없다는 거죠. 그래서 이래저래 위젯이나 스크립틀릿도 마음대로 달 수 있고요.

여튼, 전에 잠깐 달았다가 스킨 바꾸면서 까먹고 있었던 SyntaxHighlighter를 다시 달았어요. 티스토리뿐만 아니라 <head>태그에 접근이 가능한 모든 블로그에서 사용할 수 있는 방법이니 필요하신 분은 한 번 따라해 보아요.

참고로 SyntaxHighlighter는 간단하게 말해서 HTML의 <pre>나 <textarea>에 삽입된 코드에 색상을 입혀주는 스크립틀릿인데요, C# 하일라이팅에는 가장 적합하고 기능도 강력하죠. 처음엔 독립 프로젝트로 시작했다가 지금은 구글 코드 프로젝트로 이사했네요.

1. 코드 다운로드

SyntaxHighligter 프로젝트 홈으로 가서 Downloads에서 최신 파일을 받아 적당한 위치에 압축을 해제합니다.

 

이런 구조로 되어 있을 거에요.

Scripts에는 필요한 각종 스크립트가 주석이 제거되고 최소화된 버전으로 있고, 클립보드 복사에 필요한 swf 애플리케이션이 있으며, Styles에는 필요한 스타일이, 마지막으로 Uncompressed에는 주석이 온전하게 달린 스크립트가 있어요.

2. 코드 업로드

SyntaxHighlighter는 상당히 많은 양의 코드로 구성되어 있어서 그냥 <script>블럭으로 붙여넣기에는 비효율적이에요. 가급적 웹서버에 업로드 해놓고 쓰는 걸 권장해요.

웹서버에 적당한 폴더를 만들고 필요한 파일을 업로드 해야 하는데요, 필수와 옵션을 구분해보자면…

필수

  • Scripts/shCore.js
    코어 스크립트
  • Styles/SyntaxHighlighter.css CSS
    스타일

선택

  • Scripts/shBrush#####.js
    하일라이팅을 할 언어의 브러쉬(사용할 것만 넣는게 낫겠죠)
  • Scripts/clipboard.swf
    클립보드에 복사할 때 필요한 플래시 애플리케이션

이 파일들을 웹 서버에 적당히 업로드 해둡니다.

3. 블로그 스킨 수정(혹은 HTML 디자인 수정)

티스토리를 기준으로 설명하자면…

  1. 관리자 메뉴에서 [스킨]->[HTML/CSS 편집]에 들어갑니다.
  2. <head>블럭 사이에 다음의 코드를 삽입합니다. js파일은 여러 개가 될 수 있겠죠?
    <link rel="stylesheet" type="text/css" href="http://자신의 웹 서버에 올린 css 파일의 URL" />
    <script type="text/javascript" src="http://자신의 웹 서버에 올린 필요한 js 파일의 URL" />
  3. <body>블럭이 닫히기 전(</body>의 앞)에 다음의 스크립트 블럭을 삽입합니다.
    <script type="text/javascript">
    dp.SyntaxHighlighter.ClipboardSwf = "웹 서버에 업로드한 clipboard.swf 파일의 URL";
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  4. 저장 끝.

 

4. 블로그에서 SyntaxHighlighter 사용하기

코드를 사용하고자 하는 곳에 다음과 같은 HTML 코드를 넣으면 됩니다.
예를 들어 C#을 보자면…

<pre name="code" class="c#:firstline[1]">
여기에 코드를 있는 그대로 삽입
</pre>
class에는 몇 가지 옵션이 들어갈 수 있는데요,
자세한 옵션은 http://code.google.com/p/syntaxhighlighter/wiki/Configuration 여기를 참고하세요.
5. 테스트!
잘 되나요?
C# 예제
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;

namespace DesignPropertiesSample
{
    public partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            InitializeComponent();
            TextBlock tb = new TextBlock();

            if (DesignerProperties.GetIsInDesignMode(this) == true)
            {
                // Design-time
                LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
                tb.Text = "in Design";
            }
            else
            {
                // Run-time
                LayoutRoot.Background = new SolidColorBrush(Colors.Green);
                tb.Text = "in Runtime";
            }

            LayoutRoot.Children.Add(tb);
        }
    }
}

XAML(XML) 예제(헉... XAML은 잘 안되는군요 -_-)

  
    
    
  

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo


티스토리 툴바