Book.Study.Nyo: Blogger Hack

顯示具有 Blogger Hack 標籤的文章。顯示所有文章

2012-01-24

[BH] 幫 Blogger 加上 "SyntaxHighlighter" 的功能

身為一個工程師，想要寫篇文章放到 blog 時，常常會遇到一個問題。
就是每當想要把程式貼到 blog 時，排版會跑掉，不是用等寬字元的方式在排版。

這時候就要用到一個很好用的 HTML tag：<pre>
用 pre tag 把程式包起來之後，程式碼就會以等寬字去排版。

很好，這樣看起來是解決了一個問題，但是還有另一個問題。
blog 上面的程式碼，沒辦法像一些 editor 一樣，依程式碼的語法去改變顏色。

嗯...在 HTML 要換顏色就是需要套用 css，所以我們可以自己動手去改顏色!?

不!
這當然是交給程式去做就好了。

網路上現在很多專門給網頁用的 syntax highlight 的程式
而我目前是用 SyntaxHighlighter 這套程式
並沒有去比較不同版本的好壞，只是很單純的選這一個

SyntaxHighlighter 加進 Blogger 的流程

1.打開你的 Blogger template 原始碼，找到</head>的 tag，並在前面加上 SyntaxHighlighter 的核心程式：

<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- add brushes here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

2.再跟據自己 blogger 上的需要，在  的位置加上對應的語法 js。
在 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 裡有詳細說明支援的程式

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushDiff.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/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

3.完成之後，就可以開始使用 SyntaxHighlighter 了：
一、用 <pre> tag：

<pre class="brush:js">
  alert('hello syntax');
</pre>

用 <pre> tag時，要注意一些 html 的特殊字元要轉成 html 專用的編碼(ex. < 換成 <)

二、用 <script> tag：

<script type="syntaxhighlighter" class="brush:js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

Reference：
SyntaxHighlighter

2010-12-27

[BH] 文章更新時間

blogger 內建只會顯示文章的“發表時間”，卻沒有“更新時間”這個項目
為了做一些區別，“更新時間”這個東西似乎是有必要的
這樣對原本文章做修改才會有所記錄

在網路上找到 abin 大的文章，可以幫自己的文章加上更新時間

將以下 script 加到 <head></head> 裡面

<script type="text/javascript">
//<![CDATA[
<!-- Function used for generating the last update time for each post: showPostUpdateTime() -->
function showPostUpdateTime(json) {
  var updateTime = json.entry.updated.$t;
  var publishTime = json.entry.published.$t;
  if (updateTime.substr(0,10) != publishTime.substr(0,10))
    document.write(' | Updated at '+updateTime.substr(0,10)+' '+updateTime.substr(11,5));
}
//]]>
</script>

再將以下紅色的部份加到對應的位子就可以了

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
      <!-- Fixed for display post update time -->
      <b:if cond='data:blog.pageType == "item"'>
        <script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&callback=showPostUpdateTime"' type='text/javascript'/>
      </b:if>
    </b:if>
  </b:if>
</span>

我有做一些自己的修改
詳細的介紹就到 abin 大的網誌看吧

增加文章更新時間 (Show Post Update Time) by abin

2010-12-16

[BH] 文章自動收合：繼續閱讀懶人加強版

現在的 blogger 己經有內建的 read more 功能
是可以自行在文章中加到想要的位子，算是很方便的功能

不過當你是要讓所有的文章都自動加上 read more 的時候
加個外掛也是可以做到的

目前使用的是：
繼續閱讀懶人加強版 CJH

作者對安裝方法跟如何設定都有清楚的說明

加上 div class read-more-controller 的 CSS style

div.read-more-controller {

  background: #222;

  font-size: 1.5em;

  text-align: center;

  border-bottom: 2px solid #444;

  border-right: 2px solid #444;

  border-top-left-radius: 1em 1em;

  border-top-right-radius: 1em 1em;

}

2010-12-15

[BH] terminal 跟 subtitle 的 CSS style

弄了兩個 css style 分別是給 terminal 跟 subtitle
區別一下，不要都用 blockquote...

pre.termCommand {

font-family: monospace;

color: #DD2;

background: #222;

padding: 0.3em 0.5em;

margin: 0.2em 0.5em;

border: 1px solid silver;

}

h3.sub-title {

color: $(post.title.text.color);

margin:0.5em 0 0 0;

line-height: 1.2;

border-bottom: 2px solid silver;

}

2010-12-07

[BH] blockquote tag 跟 reference 的 CSS style

設計一下 blockquote 看起來更醒目

blockquote {
color:#222;
background-color: #FFEBCD;
padding: .3em .5em;
border: 2px #DB9 dashed;
}



reference {

display: block; /* fixes a strange ie margin bug */

background: #FEE url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;

border: 1px dotted #933;

padding: 10px 10px 10px 20px;

margin: 5px 0 0 5px;

font-size: 13px;

font: Courier New;

line-height: 1.6em;

}

參考網路上他人的設計
之後再做調整！

似乎可以用 blogger 裡的變數去設定CSS

[CSS] A Cool blockquote for "Code style" and some blogging tips

2010-11-12

[BH] 在文章建立程式碼區塊 (2010/12/15 Update!)

在blogger的css裡加上：

code  { 
display: block;
font-family: Courier New; 
overflow:auto; 
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
}

在<code></code>區塊裡寫入程式碼就可以顯示出一個程式碼區了

2009-11-22

[BH] 試著改Blogger的面版

將sidebar一分為二：Beta Template 版面改造