顯示具有 blogger筆記 標籤的文章。 顯示所有文章
顯示具有 blogger筆記 標籤的文章。 顯示所有文章

2017年6月15日 星期四

在Blogger中插入程式碼

透過JavaScript code prettifier就可以很簡單的將程式碼上色,讓人更清楚的了解。


效果如下:
public class StringSplit{
  int aNumber;
  List<Integer> numbers;
}

以下是如何設定,讓Blogger可以將程式碼上色的步驟:

  1. 首先選擇 版面配置
  2. 選擇 新增小工具
  3. 選擇 HTML/JavaScript
  4. 在內容中加入以下的程式碼:
    <style>
    li.L0, li.L1, li.L2, li.L3,
    li.L5, li.L6, li.L7, li.L8 {
      list-style-type: decimal !important;
    }
    </style>
    
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
    


    如圖:

  5. 最後,在想要插入程式碼的地方用<pre class="prettyprint linenums"></pre>包起來,如下

    <pre class="prettyprint linenums">
    // 這是程式碼的部分
    </pre>

其中<pre class="prettyprint linenums">的linenums表示要顯示行號。
另外,
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>
則是為了顯示所有行號,而不是每五行顯示一次。

再顯示程式碼時,注意角括號等特殊符號,需要將它們編碼,
可以搭配HTML encoder使用

2016年11月18日 星期五

使用blogger標籤來分類文章

記錄一下如何使用blogger標籤來分類文章

一、選擇版面配置



二、在想要新增分類的位置選擇  新增小工具

三、選擇標籤後,彈出設定標籤的頁面
四、設定你想要的標題和想顯示的標籤
五、完成