2013年12月20日 星期五

SyntaxHighlighter設定與調整

Read Code in Blog With Syntax-Highlighter
當初只是為了希望Blog的程式可以看得美美的,
但是現在反而成為部落格讀取的負擔,
而且當初還不是很會用...,
後來詳讀了一些官方文件與Google大神,
發現了一些小細節,
事實上官網也說得很明白了,
還附加範例...小弟在此做個比較常用的紀錄。

Q1:程式當中遇到<、>、&導致SyntaxHighlighter異常
List tester = new List();
Ans:將程式碼<改為&lt;,>改為&gt;,&改為&ampt;。輕鬆轉換器!
List <test> tester = new List <test>();
Q2:SyntaxHighlighter垂直捲軸顯示問題(overflow)
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}
Ans:修改shCore.css中的程式碼片段。
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow-x: auto !important; 
overflow-y: hidden !important;
font-size: 1em !important;
}
Q3:在SyntaxHighlighter中,程式該如何格行換色?
.syntaxhighlighter .line.alt1 {
 background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: white !important;
}
Ans:修改shThemeDefault.css中的程式碼片段。
.syntaxhighlighter .line.alt1 {
 background-color: #EEE !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: white !important;
}
Q4:怎麼使行數的編號不從1開始?
Console.WriteLine("Hi");
Console.WriteLine("Tester");
Ans:修改 pre class="brush:csharp;first-line: 你想要開始的行數;"
Console.WriteLine("Tester");
Q5:怎麼使行數更加顯眼?
Console.WriteLine("Hi");
Console.WriteLine("Tester");
Ans:修改 pre class="brush:csharp;highlight: [數字,數字];"
Console.WriteLine("Hi");
Console.WriteLine("Tester");
Q6:如何隱藏SyntaxHighlighter右上角的綠色問號?
  
Ans:修改版面自訂的HTML
  
Q7:如何加速SyntaxHighlighter載入速度?(有感覺變快喔!實測參考)
  
  
  
  
  
  
  
  
  
  
  
Ans:改用動態載入的方式,修改版面自訂的HTML
  
  
  
  
  
  
  
  
  
  
  
  

沒有留言:

張貼留言