close

在許久之前,成經介紹過 Code Formating... 給大家過,不過覺得這樣的呈現還是不夠亮麗,之前一直就覺得應該可以把 SyntaxHighlighter 整合到 Pixnet 才對,今天終於發現  SyntaxHighlighter 在2月的時候推出了 2.0 版本,因此心想還是來整合看看吧…

由於 pixnet 無法上傳 Javascript 檔案以及 css 檔案,因此需要將本來應該要放在 <head> 底下的程式碼放到其他地方去了,怎麼設定呢?

請到pixnet的管理後台 → 部落格管理的 側邊欄位設定 → 頁尾描述 (也可以放在其他地方,只要你喜歡就可以了) → 設定 → 請將下面的程式碼貼上即可

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
	SyntaxHighlighter.all();
</script>

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css" id="shTheme"/>

 

由於預設值是使用 <pre>  來當做要 Highlight 的對象,由於測試了幾次後,因此要呈現程式碼的編碼方式的高亮度呈現,請切換到原始碼模式將下面的程式打上,並且標示其 calss 為class="brush: csharp" ,brush 後面的內容請依照您要的格式變更,可參考下面的列表。

Brush name Brush aliases File name
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

 

最後,就可以看到你想要的效果了。

如下:

 

using System;
using System.Text.RegularExpressions;

namespace SharpVectors.Dom.Css
{
	/// 
	/// The CSSFontFaceRule interface represents a @font-face rule in a CSS style sheet. The @font-face rule is used to hold a set of font descriptions.
	/// 
	/// niklas@protocol7.com
	/// 80
	public class CssFontFaceRule : CssRule, ICssFontFaceRule
	{
		#region Static members
		private static Regex regex = new Regex(@"^@font-face");
		
		/// 
		/// Parses a string containging CSS and creates a CssFontFaceRule instance if found as the first content
		/// 
		internal static CssRule Parse(ref string css, object parent, bool readOnly, string[] replacedStrings, CssStyleSheetType origin)
		{
			Match match = regex.Match(css);
			if(match.Success)
			{
				CssFontFaceRule rule = new CssFontFaceRule(match, parent, readOnly, replacedStrings, origin);
				css = css.Substring(match.Length);

				rule.style = new CssStyleDeclaration(ref css, rule, true, origin);

				return rule;
			}
			else
			{
				// didn't match => do nothing
				return null;
			}
		}
		#endregion

		#region Constructors
		/// 
		/// The constructor for CssFontFaceRule
		/// 
		/// The Regex match that found the charset rule
		/// The parent rule or parent stylesheet
		/// True if this instance is readonly
		/// An array of strings that have been replaced in the string used for matching. These needs to be put back use the DereplaceStrings method
		/// The type of CssStyleSheet
		internal CssFontFaceRule(Match match, object parent, bool readOnly, string[] replacedStrings, CssStyleSheetType origin) : base(parent, true, replacedStrings, origin)
		{
			// always read-only
			
		}
		#endregion

		#region Implementation of ICssFontFaceRule
		private CssStyleDeclaration style;
		/// 
		/// The declaration-block of this rule.
		/// 
		public ICssStyleDeclaration Style
		{
			get
			{
				return style;
			}
		}
		#endregion

		#region Implementation of ICssRule
		/// 
		/// The type of the rule. The expectation is that binding-specific casting methods can be used to cast down from an instance of the CSSRule interface to the specific derived interface implied by the type.
		/// 
		public override CssRuleType Type
		{
			get
			{
				return CssRuleType.FontFaceRule;
			}
		}
		#endregion
	}
}

 


arrow
arrow
    全站熱搜

    王圓外 發表在 痞客邦 留言(6) 人氣()