Skip to main content

Posts

Showing posts from January, 2017

[探索 3 分鐘] 用 JavaScript 與 css 客製化部落格 blogger

用 Google 的 blogger 撰寫技術日誌並夾帶程式碼, 需要動一些手腳, 這邊記錄我的設定: 程式碼的保留字顏色 css 設定 引用文字的 css 設定 基本上在 Blogger > Layout > Sidebar > + > HTML / JavaScript Gadget > 輸入自定義的 <style> 與<script> 即可。 客製化「程式碼」區塊樣式 接著會希望編輯文章時遇到特別要 Highlight 程式碼的地方, 把程式碼區段給夾起來, 做到簡單易用又便於閱讀、美觀。 run_prettify.js 版本 把程式夾在 <pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code> 就會自動被美化。 <pre><code class="prettyprint"> // Your Code </code></pre> 其他使用方法請參考  usage 。 highlight.js 版本 (推薦) <pre><code class="cs"> public ActionResult Index() { return View(); } </code></pre> 其他使用方法請參考 usage 。 客製化「引言」區塊樣式  預設的「引用」長相實在沒什麼特色, 所以也調整一下, 純粹個人偏好喜歡「框」起來的感覺。 程式筆記 只要在文頭所指示的位置, 放入以下的腳本內容, 儲存版型後重新檢視 post 文, 沒問題的話 style 就改為新版了。注意一下程式碼 style 須依賴.js 與 .css 檔案, 也請各自夾帶在 <script /> 與 <style /> 區塊中。 引言 style <style> blockquote { @import url(http://fo