OLW x Coding 各程式碼高亮產生器比較

4月 21, 2017

OLW x Coding 各程式碼高亮產生器比較

§ 網路程式碼高亮產生器

§ 外掛程式碼高亮產生器

//Welcome JAVA!!
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Welcome JAVA!!";
        System.out.println(s);
    }
}

這是我使用的外掛，感覺蠻不錯的吧~ 以下是我的使用方法：

<Step1>在部落格的HTML原始碼的<head>中新增下面這段程式碼：(以Blogger來說，要到Blogger後台->主題->編輯HTML)

<!--SYNTAX HIGHLIGHTER BEGINS-->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
  
    <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = "//alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
      SyntaxHighlighter.all();
    </script>
    <!--SYNTAX HIGHLIGHTER ENDS-->

-程式第3行，是去撈樣板，我是用RDark：(SyntaxHighlighter 3.0.83-CSS Themes)

樣板名稱	檔名
Default	shThemeDefault.css
Django	shThemeDjango.css
Eclipse	shThemeEclipse.css
Emacs	shThemeEmacs.css
Fade To Grey	shThemeFadeToGrey.css
Midnight	shThemeMidnight.css
RDark	shThemeRDark.css

-程式5~15行，就是去撈你要使用的程式語言，記得第5行一定要寫在前面，否則會撈不到。(SyntaxHighlighter 3.0.83-Bundled Brushes)

語言	指定縮寫	檔名
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
PHP	php	shBrushPhp.js
Plain Text(一般文字)	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

<Step2>接下來就可以直接在你的文章加入程式：(以OLW來說，點下面的Source，查看HTML的原始碼)

- 我將語言設定為java。記得要跟上面表格中的指定縮寫得一模一樣，否則在開啟網頁時會找不到：

<pre class="brush: java;" name="code">
//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}  
</pre>

//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}

- 也可以加入light: true;，代表要去掉行號。

<pre class="brush: java; light: true;" name="code">
//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}  
</pre>

//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}

- 也可以加入highlight:[3, 5]";，代表第3、5行要強調。

<pre class="brush: java; highlight:[3, 5];"" name="code">
//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}  
</pre>

//Example code
public class MyJavaProgram{
    public static void main(String[] args){
        String s = "Example Code";
        System.out.println(s);
    }
}

**注意：上面為了方便讀，直接把程式碼原文寫出，並沒有經過HTML編譯。因為HTML會用到一些關鍵字如<, >, /等等，因此要將原文經過HTML Entities Encode，才能完整顯示原文。

- Question：如何去掉垂直的Scroll bar？

Answer：在部落格的HTML原始碼的<head>中新增下面這段程式碼就可以了。

<style type='text/css'>
      .syntaxhighlighter table td.code .container {
      position: relative !important;
      padding-bottom: 5px !important;
    }
</style>

● Reference：WFU BLOG-網頁使用程式碼高亮的最佳作法及推薦外掛、SyntaxHighlighter 3.0.83 HTML Entity Encoder/Decoder、Holey Blog-[Blogger]替程式碼上色、NEETHACK!-[Syntax highlighter & Prettify]如何在網誌中加入語法高亮效果?、StackOverflow-How to remove the vertical scrollbar SyntaxHighlighter block?

搜尋此網誌

Mine

OLW x Coding 各程式碼高亮產生器比較

留言

張貼留言