블로그에 프로그램 소스를 적용시키려고 할때, 지져분할 때가 많다.
조금이나마 깔끔하게 작성하기 위해 외국에서 제공하는 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 |