2015年9月3日 星期四

Blogger 上貼程式碼

說要做筆記，但是如果在 Blogger 上不能貼 code 的話，那可怎麼辦呢．

還好谷哥這次又幫了大忙了！不但讓我搜尋到了這個網頁，裡面有詳細的說明，甚至這個 solution 還是谷歌自己提供的呢．它的名字就叫做 code-prettify.

不囉唆，先來看看它的效果：
  1.   
  2.    override func didReceiveMemoryWarning() {
  3.         super.didReceiveMemoryWarning()
  4.         // Dispose of any resources that can be recreated.
  5.     }
  6.  
  7.     // MARK: - Table view data source
  8.  
  9.     override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  10.         // Return the number of rows in the section.
  11.         return self.restaurantNames.count
  12.     }
  13.  
  14.     
  15.     override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  16.         
  17.         let cellIdentifier = "Cell"
  18.         let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath: indexPath) as! CustomTableViewCell
  19.         
  20.         // Configure the cell...
  21.         cell.nameLabel.text = restaurantNames[indexPath.row]
  22.         cell.thumbnailImageView.image = UIImage(named: restaurantImages[indexPath.row])
  23.         cell.locationLabel.text = restaurantLocations[indexPath.row]
  24.         cell.typeLabel.text = restaurantTypes[indexPath.row]
  25.         
  26.         cell.accessoryType = restaurantIsVisited[indexPath.row] ? .Checkmark : .None
  27.  
  28.         // Circular image
  29.         cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2
  30.         cell.thumbnailImageView.clipsToBounds = true
  31.         
  32.         return cell
  33.     }
還真的很漂亮呢．以下是 blogger 的修改方法：



1. 先將 “範本“ 和 ”版面配置“ 設定好，然後點選 ”編輯HTML“



2. 然後在第一個 <\head> 和 <body> 中間插入這一行： (May 23/2016 更新，原先的連結已失效)
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&amp;skin=sons-of-obsidian'/>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sons-of-obsidian"/>

就像這樣:



3. 基本上就是貼上一行這麼簡單！存擋之後，只要將程式碼用下面這組 tag 包起來，就可以在 blogger 中呈現出來了：

<pre class="prettyprint">
your code 
</pre>


4. 如果還想用css加工一下也是可以的，以我的例子，我加了一個自動判別捲軸和最大圖形尺寸：



css碼如下：

  1.  
  2. .post .prettyprint { 
  3.   overflow-x:auto; 
  4.   overflow-y:auto; 
  5.   max-height:400px;
  6. }

沒有這段的話其實也無所謂．如此一來，所有的程式碼都會同時顯示出來，也不會有捲軸．但不會影響閱讀．


張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)