轉自我自己的 blog：Sources 開發日記五（代碼展示頁面）
好久沒寫 blog 了，上一篇距離現在居然有一個半月了，而上一篇關于 Sources 的開發日記竟然相隔快兩個月了。得趕快把 v1.0 的最后兩篇寫完，然后全身心進入下一個版本的開發和記錄。
這一篇講的部分應該是整個 App 最出彩的地方（顏色很多），展示代碼，而且是帶有語法高亮的展示。
語法高亮的實現方案
如何給代碼在 iOS 上進行語法著色顯示，這是這個 app 開發前我能想到的最大的一個難題。我看過幾篇關于利用 Core Text 來給文本中不同的部分來設置不同顏色的 blog，但是前提是要知道哪些部分是哪些類型。關鍵字，字符串，數字，自建類型，注釋……要把這些東西從一個代碼文件中分析出來，實現一個語法分析器，對于現在的我來說簡直不可能。
于是在 Google 里搜索「code highlight」，找到了我的解決方案，https://highlightjs.org。這個網站就是在 Web 端給各種語言（目前是166種）提供語法高亮，而且包含了多種主題（目前是77種）。只需要在網頁中使用這個網站提供的 js，并指定代碼段的 class 就可以實現夢想中的語法高亮！
所以在 iOS 端如何實現也就確定了，web view。
加載代碼
HTML Template
既然是 web view，就需要跟 HTML 打交道了。根據 Github API 下載得到的代碼是 plain text，想要語法高亮就要按照 highlightjs 的教程加載 js 到 HTML，所以要自定義一個 HTML 模板用來加載 js 和 代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title#</title>
<link rel="stylesheet" href="#theme#.css">
<meta name='viewport' content='initial-scale=1.0; maximum-scale=2.0;'>
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code class="hljs">
#code#
</code></pre>
</body>
</html>
以上代碼中的 #title #theme #code 都是 placeholder，在獲取代碼后用文件名、選擇的主題和代碼文本來替換。
在 CodeViewController 中下載代碼之前需要獲得這個模板的字符串：
private func htmlTemplateString() -> String? {
let path = NSBundle.mainBundle().URLForResource("template", withExtension: "html")!
let str: String?
do {
str = try String(contentsOfURL: path)
} catch {
str = nil
}
return str
}
下載代碼
我用的是 WKWebView。因為 WKWebView 目前還無法在 Storyboard 中使用，所以只能在 code 中進行設置。
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = file.name
let config = WKWebViewConfiguration()
config.preferences.javaScriptEnabled = true
webView = WKWebView(frame: view.bounds, configuration: config)
view.insertSubview(webView, belowSubview: favoriteButton)
self.theme = NSUserDefaults.standardUserDefaults().stringForKey("default_theme") ?? "default"
downloadSourceCode()
}
{% endcodeblock%}
語法高亮的主題默認是 default，如果用戶有選擇其它主題就會存入 User Defaults 中，這樣 `CodeViewController` 在每次加載后都會設置為上一次選擇的主題。
下載代碼的邏輯是這樣的：
1. 先獲取 HTML 模板和下載API
2. 根據 API 去下載代碼
3. 如果 API 對應的文件是代碼文件（文本文件）就將代碼字符串進行轉義、placeholder 替換，用 web view 加載
4. 如果不是代碼文件，就提示用戶，并直接返回文件列表
{% codeblock Download Code lang:swift %}
private func downloadSourceCode() {
if let template = htmlTemplateString(), downloadURLString = file.downloadURLString {
let url = NSURL(string: downloadURLString)!
EZLoadingActivity.show("loading source", disableUI: true)
Alamofire.request(.GET, url)
.responseData(completionHandler: { (response) in
EZLoadingActivity.hide()
self.setFavoriteButton()
if let htmlData = response.data {
if let dataString = String(data: htmlData, encoding: NSUTF8StringEncoding) {
let escapeString = dataString.stringByReplacingOccurrencesOfString("<", withString: "<")
.stringByReplacingOccurrencesOfString(">", withString: ">")
self.contentString = escapeString
let htmlString = template.stringByReplacingOccurrencesOfString("#code#", withString: escapeString)
.stringByReplacingOccurrencesOfString("#title#", withString: self.file.name ?? "")
.stringByReplacingOccurrencesOfString("#theme#", withString: self.theme)
dispatch_async(dispatch_get_main_queue(), {
self.webView.loadHTMLString(htmlString, baseURL: NSBundle.mainBundle().bundleURL)
})
} else {
// not a text file, show alert and then pop back
let alertController = UIAlertController(title: "", message: "This file is not a source code file", preferredStyle: .Alert)
let alertAction = UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: { ( _ ) in
self.navigationController?.popViewControllerAnimated(true)
})
alertController.addAction(alertAction)
RecentsManager.sharedManager.recents.removeFirst()
self.presentViewController(alertController, animated: true, completion: nil)
}
}
})
}
}
語法高亮主題列表
其它的代碼查看 App 關于語法高亮主題的選擇上都只是列出個名稱列表而已，通過名稱并不能直觀的知道該主題是個什么樣子的，必須設置后才能一窺究竟。
我在這部分做了一點微小的工作：將主題的整體配色加入到列表中。
用戶點擊一個 theme 后，會返回到 CodeViewController 并重新加載上面的 HTML string，具體代碼就不貼了，可以到我的 github 中查看。
弄這個 list 純是個手工活，因為這個 list 并不是動態加載的，而是我將各個主題的配色都手工提取出來做成了一個數組：
要問我為什么要手工搞這個數組，下面就是原因。
Theme CSS
highlightjs 中每一個 theme 其實是一個 css，就是定義了 HTML 中各個 class 的顏色，以 default 為例：
...
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #F0F0F0;
}
/* Base color: saturation 0; */
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
/* Language color: hue: 90; */
.hljs-literal {
color: #78A960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
...
每一個 css 中的 class 都不盡一樣，不過大部分還都是定義了四五個顏色，分別對應背景、關鍵字、自定義類型、字符串、數字和注釋等等。因為 css 沒有一個統一的格式標準，所以想靠動態讀取來獲得這些顏色還是要比搞個固定的數組麻煩許多，畢竟這個數組也不是太大，才70多個元素。
