顯示具有 插入程式碼 標籤的文章。 顯示所有文章
顯示具有 插入程式碼 標籤的文章。 顯示所有文章

2014年1月21日 星期二

在Blogger中插入簡單好讀的程式碼片段(二)

第一篇的方法顯示起來有點不夠穩重大方,所以上網找了幾篇文章綜整了一下,也不引用舊版的方法(原先在CSS檔的CODE圖示要在自己的網頁空間設置網路路徑,現在已經升級進化無需設置了,網頁開啟速度似乎也比較快)  



☞第一次使用前置作業 (以後無需重複這些步驟)
1.到 範本 / 修改HTML,</head>之前加上下面這段代碼
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
這樣以後在Blogger HTML編輯模式就不用一直加這段代碼(你也可以選擇每次POST文章時,在文章編輯視窗加上這段代碼,這樣就不會因為換了其他範本,代碼也跟著消失)

 2.在版面配置 / 範本設計工具進階 / 新增CSS 增加下列代碼

.post .code { 
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

☞放上你想顯示的程式碼片段(以後只要執行此步驟) 
在文章HTML編輯模式加上這段代碼
<pre class="code prettyprint">
貼上想要顯示程式代碼
</pre>
底下是範例結果

function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "選單項內容",
    functionName : "呼叫函數"
  }];
  sheet.addMenu("My選單", entries);
};

2014年1月20日 星期一

在Blogger中插入簡單好讀的程式碼片段(一)

操作實例:

在自己的Blogger HTML編輯版面  適當位置插入下面程式片段即可
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<pre class="prettyprint">
 Copy你的程式碼片段
</pre>


例如
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> 
<pre class="prettyprint">
function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "選單項內容",
    functionName : "呼叫函數"
  }];
  sheet.addMenu("My選單", entries);
};

function 呼叫函數() {
Browser.msgBox('hello world');
};


</pre>

就會呈現如下的效果了


function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "選單項內容",
    functionName : "呼叫函數"
  }];
  sheet.addMenu("My選單", entries);
};

function 呼叫函數() {
  Browser.msgBox('hello world'); 
};