不知道大家有沒有這種機會,但是何老師經常會在網頁文章中分享一些程式碼,由於程式碼不同於一般網頁的排版,所以如果直接寫在文章中會非常地不好看,因此需要有另外的排版方式。在WordPress有一些現成的外掛可以使用,何老師推薦的是這一個:

syntax01

  在WordPress安裝了這個外掛之後,只要在你的文章的任何一個地方,加上[code]以及[/code]這個標籤,然後在這兩個標籤中加入你的程式語言原始碼,如下所示(記得在文字編輯模式下貼上,比較不會有問題):

syntax02

  回到預覽編輯模式看不出來,可是當文章發表呈現在網頁上,就可以呈現是下面這個樣子,非常方便:

main() {
  int x, y;
  x=5, y=10;
  printf("hello, world!!n");
  printf("sum of x+y is %dn", x+y);
}

  但是,如果你使用的不是WordPress網頁,或是不想要安裝這一個外掛,那也沒有關係,有一個網站專門幫網友把現有的程式碼轉成為HTML標準編碼,我們只要把轉換完成後的編碼,放在網頁中(不管是什麼系統,只要能夠接受HTML的地方),然後再存檔就可以了。這個網站叫做Hilite.me,進入這個網站之後,會先看到以下的畫面:

syntax03

  我們只要在畫面左側中貼上程式碼(在這裡我們以C語言做例子),然後選擇使用的程式語言以及色彩模式,再勾選要使用行號(Line Number),最後再按下「Hightlight!」按鈕就可以了。右側就會產生出可以使用的HTML碼,同時下方也會有輸出的樣子,如下所示:

syntax04

  轉換完成之後,我們把HTML複製下來,然後再回到我們的文章中或網頁中,在適當的地方把這些HTML貼上就可以了。下面就是呈現出來的樣子。

1
2
3
4
5
6
main() {
  int x, y;
  x=5, y=10;
  printf("hello, world!!n");
  printf("sum of x+y is %dn", x+y);
}

  這個網站支援的程式語言非常多,大家可以多加運用喔。

syntax05

(1782)

%d 位部落客按了讚: