Skip to main content

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

Labels:
用 Google 的 blogger 撰寫技術日誌並夾帶程式碼, 需要動一些手腳, 這邊記錄我的設定:
  1. 程式碼的保留字顏色 css 設定
  2. 引用文字的 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://fonts.googleapis.com/css?family=Muli);
border: dashed 2px #ccc;
color: #26A186;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px; 
}
</style>

程式碼 style

依據喜好, 選擇程式碼 style 的依賴。

run_prettify.js 版本
<script async='async' src='//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
這支 js 並不依賴 css 檔案, 所以可大膽的用非同步 async 屬性加快網頁讀取速度。

highlight.js 版本 (推薦)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css" type="text/css" media="all" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
若選擇 highlight.js 要特別注意 css 的依賴, github 列出非常多的 .css 格式, 大家常用的是 atom-one-dark, 所以要換成別的也可以, cloudflare cdn 的 .css 網址換一下就好。

選擇最適合的語言格式

根據 highlightjs 官網的整理, 支援的語言 / 腳本格式很多 (目前累計 176 languages and 79 styles), 若沒有指定 language, 其實也有預設的關鍵字 highlight 效果。

語言 / 腳本class name
Access logsaccesslog
Adaada
ActionScriptactionscript, as
Apacheapache, apacheconf
AsciiDocasciidoc, adoc
Bashbash, sh, zsh
C#cs, csharp
C++cpp, c, cc, h, c++, h++, hpp
CMakecmake, cmake.in
CSScss
CoffeeScriptcoffeescript, coffee, cson, iced
Delphidelphi, dpr, dfm, pas, pascal, freepascal,lazarus, lpr, lfm
Diffdiff, patch
Djangodjango, jinja
Dockerfiledockerfile, docker
Excelexcel, xls, xlsx
Gradlegradle
Groovygroovy
HTML, XMLxml, html, xhtml, rss, atom, xjb, xsd, xsl, plist
HTTPhttp, https
JSONjson
Javajava, jsp
JavaScriptjavascript, js, jsx
Lualua
Makefilemakefile, mk, mak
Markdownmarkdown, md, mkdown, mkd
Mathematicamathematica, mma
Matlabmatlab
Nginxnginx, nginxconf
Objective Cobjectivec, mm, objc, obj-c
OpenGL Shading Languageglsl
PHPphp, php3, php4, php5, php6
Perlperl, pl, pm
PowerShellpowershell, ps
Rr
Rubyruby, rb, gemspec, podspec, thor, irb
SCSSscss
SQLsql
Scalascala
Swiftswift
VB.Netvbnet, vb
VBScriptvbscript, vbs
Vim Scriptvim
x86 Assemblyx86asm
XQueryxpath, xq
注意不是這樣使用 <pre><code class="c#">, 而是 <pre><code class="cs"> 或 <pre><code class="csharp">, 請參考上表第二欄。

Trouble Shooting

這個世界果然沒有這麼完美, 設定完後其實有一點小問題, 就是原來創建 blogger 所選擇的 template, 恰好已客製化「引言」專屬的 css, 故怎麼蓋也蓋不掉。這個時候, 請到 Blogger > Theme > Edit HTML > 搜尋 blockquote, 然後看是要刪除還是用 /*  */ 給註解起來, 儲存頁面後重整, 果然就是預期的結果了。而且強烈建議儘量讓 Theme 內的 HTML 單純 (因為 global 腳本已經太多了), 若個性化的部分繼續夾雜在裡頭, 估計是不如放在 Gadget 內這麼好找。

參考資料

  • https://amobiz.github.io/2013/05/28/blogger-google-code-prettify-github-gist/
  • https://shoutersclub.blogspot.tw/2015/03/customize-blockquote-style-in-blogger-and-wordpress.html
  • http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html
  • https://highlightjs.org/usage/
  • http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
  • http://natashasnickelodeon.blogspot.tw/2012/09/how-to-create-about-me-page-in-blogger.html

Comments

Post a Comment