Ads 468x60px

##EasyReadMore##

17 9月, 2017

Blogger 程式碼高亮 SYNTAXHIGHLIGHTER 動態載入

傳統方法把所有的語法都先載入
會影響到網頁的載入速度
因此改用動態載入會比較快
加在 head 裡:
  1. <!--SYNTAXHIGHLIGHTER BEGINS-->  
  2. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>  
  3. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>  
  4. <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>  
  5. <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>  
  6. <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>  
  7. <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>  
  8. <script language='javascript'>  
  9. SyntaxHighlighter.config.bloggerMode=true;  
  10. SyntaxHighlighter.all();  
  11. </script>  
  12. <!--SYNTAXHIGHLIGHTER ENDS-->  
加在 body 裡:
  1. <!--SYNTAXHIGHLIGHTER BEGINS-->  
  2. <style>  
  3. .mysyntax {  
  4.   border: 1px solid #f6b26b; /* 程式碼加邊框 */  
  5.   overflow-y: hidden !important; /* 關畢直立捲動條 */  
  6. }  
  7. .syntaxhighlighter table td.gutter .line, .syntaxhighlighter table td.code .line {  
  8.   padding: 0 10px !important; /*修正行號距離*/  
  9. }  
  10. </style>  
  11. <script type='text/javascript'>  
  12. var baseSyntaxHighlighterScriptsPath = 'http://alexgorbatchev.com/pub/sh/current/scripts/';  
  13. function getSyntaxHighlighterScriptPath(name) {  
  14.   return name.replace('@', baseSyntaxHighlighterScriptsPath);  
  15. }  
  16. SyntaxHighlighter.autoloader(  
  17.  [ 'applescript', getSyntaxHighlighterScriptPath('@shBrushAppleScript.js') ],  
  18.  [ 'actionscript3''as3', getSyntaxHighlighterScriptPath('@shBrushAS3.js') ],  
  19.  [ 'bash''shell', getSyntaxHighlighterScriptPath('@shBrushBash.js') ],  
  20.  [ 'coldfusion''cf', getSyntaxHighlighterScriptPath('@shBrushColdFusion.js') ],  
  21.  [ 'cpp''c', getSyntaxHighlighterScriptPath('@shBrushCpp.js') ],  
  22.  [ 'c#''c-sharp''csharp', getSyntaxHighlighterScriptPath('@shBrushCSharp.js') ],  
  23.  [ 'css', getSyntaxHighlighterScriptPath('@shBrushCss.js') ],  
  24.  [ 'diff''patch''pas', getSyntaxHighlighterScriptPath('@shBrushDiff.js') ],  
  25.  [ 'erl''erlang', getSyntaxHighlighterScriptPath('@shBrushErlang.js') ],  
  26.  [ 'groovy', getSyntaxHighlighterScriptPath('@shBrushGroovy.js') ],  
  27.  [ 'java', getSyntaxHighlighterScriptPath('@shBrushJava.js') ],  
  28.  [ 'jfx''javafx', getSyntaxHighlighterScriptPath('@shBrushJavaFX.js') ],  
  29.  [ 'js''javascript''jscript', getSyntaxHighlighterScriptPath('@shBrushJScript.js') ],  
  30.  [ 'perl''pl', getSyntaxHighlighterScriptPath('@shBrushPerl.js') ],  
  31.  [ 'php', getSyntaxHighlighterScriptPath('@shBrushPhp.js') ],  
  32.  [ 'text''plain', getSyntaxHighlighterScriptPath('@shBrushPlain.js') ],  
  33.  [ 'py''python', getSyntaxHighlighterScriptPath('@shBrushPython.js') ],  
  34.  [ 'ruby''rails''ror''rb', getSyntaxHighlighterScriptPath('@shBrushRuby.js') ],  
  35.  [ 'sass''scss', getSyntaxHighlighterScriptPath('@shBrushSass.js') ],  
  36.  [ 'scala', getSyntaxHighlighterScriptPath('@shBrushScala.js') ],  
  37.  [ 'sql', getSyntaxHighlighterScriptPath('@shBrushSql.js') ],  
  38.  [ 'vb''vbnet', getSyntaxHighlighterScriptPath('@shBrushVb.js') ],  
  39.  [ 'xml''xslt''html''htm', getSyntaxHighlighterScriptPath('@shBrushXml.js') ]  
  40. );  
  41. SyntaxHighlighter.config.bloggerMode=true;  
  42. SyntaxHighlighter.config.space=' '/* 消除Chrome複製時的BUG空白 */  
  43. SyntaxHighlighter.config.stripBrs=false/* 略過Blogger之br標籤 */  
  44. SyntaxHighlighter.defaults['auto-links']=false/* 關畢自動連結 */  
  45. SyntaxHighlighter.defaults['toolbar']=false/* 關畢工具列 */  
  46. SyntaxHighlighter.defaults['class-name']='mysyntax'/* 自定義樣式 */  
  47. SyntaxHighlighter.all();  
  48. </script>  
  49. <!--SYNTAXHIGHLIGHTER ENDS-->  

image
文章內的程式碼部份,必須使用 <pre></pre> 成對標籤圍起來,同時以 class 屬性標明所顯示語言種類,參照表中的縮寫加在 bursh: 後面
如以下顯示 C 程式的語法高亮度:
<pre class="brush: c" >

Reference:

Root's Casual Notes: blogger.com 程式碼高亮設定筆記 - https://goo.gl/VAaKnF

0 意見:

張貼留言

 
Blogger Templates