Practice makes perfect

前幾天在寫emberjs dynamic URL的範例時覺得為什麼預設的code block這麼不好看。 上網google了一下找到這篇文章 介紹如何使用預設在octopress裡面更好看的code blocks。

看底下這個code block，是不是一整個變的很精美。

1
2
3

define(['app'], function (App) {
  console.log("hello world");
});

使用時用三個`把程式碼區塊包起來，然後分別可以設定你所用的語言，標題，還有可以放URL連到原始碼

語法如下：

``` [語言][標題][URL][URL顯示名稱]
你的code snippet
```

像我上面的範例就是

``` javascript TestJavaScript http://www.google.com 點我到google
define(['app'], function (App) {
    console.log("hello world");
});
```

引用Gist的部份先跳過，我目前還沒用到Gist

從檔案系統引用code的話你可以把檔案放在source/downloads/code底下然後引用它。目錄可以在_config.yml裡修改。config名稱是code_dir

語法如下：

{ % include_code [標題] [lang:語言] 檔案路徑 %}

1

App = Ember.Application.create({});

上面的範例就是

{ % include_code sample.js %}

最後是inline code blocks

語法如下：

{ % codeblock [標題][語言][URL][URL顯示名稱] %}
{ % endcodeblock %}

1

console.log('hello world');

上面的範例就是

{ % codeblock sample.js lang:javascript %}
console.log('hello world');
{ % endcodeblock %}