블로그에 프로그램 소스를 적용시키려고 할때, 지져분할 때가 많다.
조금이나마 깔끔하게 작성하기 위해 외국에서 제공하는 Syntax Highlighter 2.0을 적용해 보기로 한다.

우선 아래 링크에서 zip파일을 다운 받아, 압축을 푼 뒤 스킨 올리기 기능을 이용하여 모든 파일을 올린다.
(적용시키고자 하는 프로그램 언어만 받아 올려도 상관없지만, 여기선 다 올리기로 한다.)

SyntaxHighlighter20_bugpatched.zip


파일을 올렸다면, HTML/CSS 편집에 들어가 아래의 html 소스를 추가한다.
(추가할 소스는 html 페이지의 <head> 안에 넣으면 된다.)
 <head>
    ......(중략)......
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shBrushCpp.js"></script>
    <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
    <script type="text/javascript" src="./images/shBrushDiff.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPlain.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushMsx.js"></script>
    <script type="text/javascript" src="./images/shBrushAvs.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script> 
    <link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
</head>

이렇게 해서 모든 작업은 완료 하였으며 이제는 적용한 화면을 보도록 하자.
적용하는 방법은 그리 어렵지 않다.

프로그램 코드 앞 부분에는 <pre>태그 뒷 부분에는 </pre>로 씌워주면 끝이다.
예시) <pre class="brush:c-sharp; highlight:[3,5];">소스 부분</pre>

brush:c-sharp 는 C#언어를 나타낸 것이며,  highlight 속성은 해당 라인를 강조하겠다는 표시이다.


마지막으로 결과 화면이다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;

namespace LinqToTerraServerProvider
{
    public class QueryableTerraServerData : IOrderedQueryable
    {
        #region Constructors
        /// 
        /// This constructor is called by the client to create the data source.
        /// 
        public QueryableTerraServerData()
        {
            Provider = new TerraServerQueryProvider();
            Expression = Expression.Constant(this);
        }

        /// 
        /// This constructor is called by Provider.CreateQuery().
        /// 
        /// 
        public QueryableTerraServerData(TerraServerQueryProvider provider, Expression expression)
        {
            if (provider == null)
            {
                throw new ArgumentNullException("provider");
            }

            if (expression == null)
            {
                throw new ArgumentNullException("expression");
            }

            if (!typeof(IQueryable).IsAssignableFrom(expression.Type))
            {
                throw new ArgumentOutOfRangeException("expression");
            }

            Provider = provider;
            Expression = expression;
        }
        #endregion

        #region Properties

        public IQueryProvider Provider { get; private set; }
        public Expression Expression { get; private set; }

        public Type ElementType
        {
            get { return typeof(TData); }
        }

        #endregion

        #region Enumerators
        public IEnumerator GetEnumerator()
        {
            return (Provider.Execute>(Expression)).GetEnumerator();
        }

        System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
        {
            return (Provider.Execute(Expression)).GetEnumerator();
        }
        #endregion
    }
}
css 수정으로 자기만의 스타일로 꾸밀수도 있다.
저작자표시 비영리 변경금지

'Misc' 카테고리의 다른 글

플래시 Tag 목록 블로그에 적용하기!!  (0) 2009.07.06
티스토리 타이틀에 물결 플래시 적용하기!!  (0) 2009.07.04
Linkin Park의 "New Divide" (트랜스포머2 OST)  (0) 2009.06.30
Superfly - My Best Of My Life (일드 BOSS 주제곡)  (0) 2009.06.30
소녀 시대 "소원을 말해봐" 뮤직 비디오  (0) 2009.06.30

+ Recent posts

티스토리툴바