[T] add images

chapters/about.md

@@ -0,0 +1,49 @@
+Phodal's Idea实战指南
+===
+
+关于作者
+---
+
+黄峰达（Phodal Huang）是一个创客、工程师、咨询师和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks 深圳。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。
+
+作为一个开源软件作者，著有 Growth、Stepping、Lan、Echoesworks 等软件。其中开源学习应用 Growth，广受读者和用户好评，可在 APP Store 及各大 Android 应用商店下载。
+
+作为一个技术作者，著有《自己动手设计物联网》（电子工业出版社）、《全栈应用开发：精益实践》（电子工业出版社，正在出版）。并在 GitHub 上开源有《Growth: 全栈增长工程师指南》、《GitHub 漫游指南》等七本电子书。
+
+作为技术专家，他为英国 Packt 出版社审阅有物联网书籍《Learning IoT》、《Smart IoT》，前端书籍《Angular 2 Serices》、《Getting started with Angular》等技术书籍。
+
+他热爱编程、写作、设计、旅行、hacking，你可以从他的个人网站：[https://www.phodal.com/](https://www.phodal.com/) 了解到更多的内容。
+
+其它相关信息：
+
+ - 微博：[http://weibo.com/phodal](http://weibo.com/phodal)
+ - GitHub： [https://github.com/phodal](https://github.com/phodal)
+ - 知乎：[https://www.zhihu.com/people/phodal](https://www.zhihu.com/people/phodal)
+ - SegmentFault：[https://segmentfault.com/u/phodal](https://segmentfault.com/u/phodal)
+
+当前为预览版，在使用的过程中遇到任何问题请及时与我联系。阅读过程中的问题，不妨在GitHub上提出来： [Issues](https://github.com/phodal/fe/issues)
+
+阅读过程中遇到语法错误、拼写错误、技术错误等等，不妨来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。
+
+我的电子书：
+
+ * 《[GitHub 漫游指南](https://github.com/phodal/github-roam)》
+ * 《[我的职业是前端工程师](https://github.com/phodal/fe)》
+ * 《[Serverless 架构应用开发指南](https://github.com/phodal/serverless)》
+ * 《[Growth: 全栈增长工程师指南](https://github.com/phodal/growth-ebook)》
+ * 《[Phodal's Idea实战指南](https://github.com/phodal/ideabook)》
+ * 《[一步步搭建物联网系统](https://github.com/phodal/designiot)》
+ * 《[RePractise](https://github.com/phodal/repractise)》
+ * 《[Growth: 全栈增长工程师实战](https://github.com/phodal/growth-in-action)》
+
+我的微信公众号:
+
+![作者微信公众号：phodal-weixin](http://ideabook.phodal.com/images/wechat.jpg)
+
+支持作者，可以加入作者的小密圈:
+
+![小密圈](http://ideabook.phodal.com/images/xiaomiquan.jpg)
+
+或者转账：
+
+![支付宝](http://ideabook.phodal.com/images/alipay.png) ![微信](http://ideabook.phodal.com/images/wechat-pay.png)

ideabook.md

@@ -1,4 +1,54 @@
 
+Phodal's Idea实战指南
+===
+
+关于作者
+---
+
+黄峰达（Phodal Huang）是一个创客、工程师、咨询师和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks 深圳。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。
+
+作为一个开源软件作者，著有 Growth、Stepping、Lan、Echoesworks 等软件。其中开源学习应用 Growth，广受读者和用户好评，可在 APP Store 及各大 Android 应用商店下载。
+
+作为一个技术作者，著有《自己动手设计物联网》（电子工业出版社）、《全栈应用开发：精益实践》（电子工业出版社，正在出版）。并在 GitHub 上开源有《Growth: 全栈增长工程师指南》、《GitHub 漫游指南》等七本电子书。
+
+作为技术专家，他为英国 Packt 出版社审阅有物联网书籍《Learning IoT》、《Smart IoT》，前端书籍《Angular 2 Serices》、《Getting started with Angular》等技术书籍。
+
+他热爱编程、写作、设计、旅行、hacking，你可以从他的个人网站：[https://www.phodal.com/](https://www.phodal.com/) 了解到更多的内容。
+
+其它相关信息：
+
+ - 微博：[http://weibo.com/phodal](http://weibo.com/phodal)
+ - GitHub： [https://github.com/phodal](https://github.com/phodal)
+ - 知乎：[https://www.zhihu.com/people/phodal](https://www.zhihu.com/people/phodal)
+ - SegmentFault：[https://segmentfault.com/u/phodal](https://segmentfault.com/u/phodal)
+
+当前为预览版，在使用的过程中遇到任何问题请及时与我联系。阅读过程中的问题，不妨在GitHub上提出来： [Issues](https://github.com/phodal/fe/issues)
+
+阅读过程中遇到语法错误、拼写错误、技术错误等等，不妨来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。
+
+我的电子书：
+
+ * 《[GitHub 漫游指南](https://github.com/phodal/github-roam)》
+ * 《[我的职业是前端工程师](https://github.com/phodal/fe)》
+ * 《[Serverless 架构应用开发指南](https://github.com/phodal/serverless)》
+ * 《[Growth: 全栈增长工程师指南](https://github.com/phodal/growth-ebook)》
+ * 《[Phodal's Idea实战指南](https://github.com/phodal/ideabook)》
+ * 《[一步步搭建物联网系统](https://github.com/phodal/designiot)》
+ * 《[RePractise](https://github.com/phodal/repractise)》
+ * 《[Growth: 全栈增长工程师实战](https://github.com/phodal/growth-in-action)》
+
+我的微信公众号:
+
+![作者微信公众号：phodal-weixin](http://ideabook.phodal.com/images/wechat.jpg)
+
+支持作者，可以加入作者的小密圈:
+
+![小密圈](http://ideabook.phodal.com/images/xiaomiquan.jpg)
+
+或者转账：
+
+![支付宝](http://ideabook.phodal.com/images/alipay.png) ![微信](http://ideabook.phodal.com/images/wechat-pay.png)
+
 分析网站日志，打造访问地图
 ===
 
@@ -1936,7 +1986,7 @@ curl -XGET http://127.0.0.1:9200/haystack/_search
 bower install
 ```
 
-### Step 4: Ionic ElasticSearch 创建页面
+### Step 5: Ionic ElasticSearch 创建页面
 
 1.引入库
 
@@ -1998,7 +2048,7 @@ $scope.search = function(query) {
 
 当我们点下搜索的时候，调用 ESService.
 
-### Step 5: Ionic ElasticSearch Service
+### Step 6: Ionic ElasticSearch Service
 
 接着我们就来构建我们的ESService，下面的部分来自网上:
 
@@ -2081,7 +2131,7 @@ angular.module('starter.services', ['ngCordova', 'elasticsearch'])
 
 > OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。
 
-### Step 6: Ionic OpenLayer 地图显示
+### Step 7: Ionic OpenLayer 地图显示
 
 1.下载OpenLayer
 

index.html

@@ -80,6 +80,9 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 </div>
 <nav id="TOC">
 <ul>
+<li><a href="#phodals-idea实战指南">Phodal’s Idea实战指南</a><ul>
+<li><a href="#关于作者">关于作者</a></li>
+</ul></li>
 <li><a href="#分析网站日志打造访问地图">分析网站日志，打造访问地图</a><ul>
 <li><a href="#概况">概况</a><ul>
 <li><a href="#背景">背景</a></li>
@@ -195,9 +198,9 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li><a href="#step-2-配置haystack">Step 2: 配置Haystack</a></li>
 <li><a href="#step-3-django-haystack-model创建">Step 3: Django Haystack Model创建</a></li>
 <li><a href="#step-4-创建search_index">Step 4: 创建search_index</a></li>
-<li><a href="#step-4-ionic-elasticsearch-创建页面">Step 4: Ionic ElasticSearch 创建页面</a></li>
-<li><a href="#step-5-ionic-elasticsearch-service">Step 5: Ionic ElasticSearch Service</a></li>
-<li><a href="#step-6-ionic-openlayer-地图显示">Step 6: Ionic OpenLayer 地图显示</a></li>
+<li><a href="#step-5-ionic-elasticsearch-创建页面">Step 5: Ionic ElasticSearch 创建页面</a></li>
+<li><a href="#step-6-ionic-elasticsearch-service">Step 6: Ionic ElasticSearch Service</a></li>
+<li><a href="#step-7-ionic-openlayer-地图显示">Step 7: Ionic OpenLayer 地图显示</a></li>
 </ul></li>
 </ul></li>
 <li><a href="#一步步搭建javascript框架">一步步搭建JavaScript框架</a><ul>
@@ -324,6 +327,43 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 </ul></li>
 </ul>
 </nav>
+<h1 id="phodals-idea实战指南">Phodal’s Idea实战指南</h1>
+<h2 id="关于作者">关于作者</h2>
+<p>黄峰达（Phodal Huang）是一个创客、工程师、咨询师和作家。他毕业于西安文理学院电子信息工程专业，现作为一个咨询师就职于 ThoughtWorks 深圳。长期活跃于开源软件社区 GitHub，目前专注于物联网和前端领域。</p>
+<p>作为一个开源软件作者，著有 Growth、Stepping、Lan、Echoesworks 等软件。其中开源学习应用 Growth，广受读者和用户好评，可在 APP Store 及各大 Android 应用商店下载。</p>
+<p>作为一个技术作者，著有《自己动手设计物联网》（电子工业出版社）、《全栈应用开发：精益实践》（电子工业出版社，正在出版）。并在 GitHub 上开源有《Growth: 全栈增长工程师指南》、《GitHub 漫游指南》等七本电子书。</p>
+<p>作为技术专家，他为英国 Packt 出版社审阅有物联网书籍《Learning IoT》、《Smart IoT》，前端书籍《Angular 2 Serices》、《Getting started with Angular》等技术书籍。</p>
+<p>他热爱编程、写作、设计、旅行、hacking，你可以从他的个人网站：<a href="https://www.phodal.com/" class="uri">https://www.phodal.com/</a> 了解到更多的内容。</p>
+<p>其它相关信息：</p>
+<ul>
+<li>微博：<a href="http://weibo.com/phodal" class="uri">http://weibo.com/phodal</a></li>
+<li>GitHub： <a href="https://github.com/phodal" class="uri">https://github.com/phodal</a></li>
+<li>知乎：<a href="https://www.zhihu.com/people/phodal" class="uri">https://www.zhihu.com/people/phodal</a></li>
+<li>SegmentFault：<a href="https://segmentfault.com/u/phodal" class="uri">https://segmentfault.com/u/phodal</a></li>
+</ul>
+<p>当前为预览版，在使用的过程中遇到任何问题请及时与我联系。阅读过程中的问题，不妨在GitHub上提出来： <a href="https://github.com/phodal/fe/issues">Issues</a></p>
+<p>阅读过程中遇到语法错误、拼写错误、技术错误等等，不妨来个Pull Request，这样可以帮助到其他阅读这本电子书的童鞋。</p>
+<p>我的电子书：</p>
+<ul>
+<li>《<a href="https://github.com/phodal/github-roam">GitHub 漫游指南</a>》</li>
+<li>《<a href="https://github.com/phodal/fe">我的职业是前端工程师</a>》</li>
+<li>《<a href="https://github.com/phodal/serverless">Serverless 架构应用开发指南</a>》</li>
+<li>《<a href="https://github.com/phodal/growth-ebook">Growth: 全栈增长工程师指南</a>》</li>
+<li>《<a href="https://github.com/phodal/ideabook">Phodal’s Idea实战指南</a>》</li>
+<li>《<a href="https://github.com/phodal/designiot">一步步搭建物联网系统</a>》</li>
+<li>《<a href="https://github.com/phodal/repractise">RePractise</a>》</li>
+<li>《<a href="https://github.com/phodal/growth-in-action">Growth: 全栈增长工程师实战</a>》</li>
+</ul>
+<p>我的微信公众号:</p>
+<figure>
+<img src="http://ideabook.phodal.com/images/wechat.jpg" alt="作者微信公众号：phodal-weixin" /><figcaption>作者微信公众号：phodal-weixin</figcaption>
+</figure>
+<p>支持作者，可以加入作者的小密圈:</p>
+<figure>
+<img src="http://ideabook.phodal.com/images/xiaomiquan.jpg" alt="小密圈" /><figcaption>小密圈</figcaption>
+</figure>
+<p>或者转账：</p>
+<p><img src="http://ideabook.phodal.com/images/alipay.png" alt="支付宝" /> <img src="http://ideabook.phodal.com/images/wechat-pay.png" alt="微信" /></p>
 <h1 id="分析网站日志打造访问地图">分析网站日志，打造访问地图</h1>
 <h2 id="概况">概况</h2>
 <h3 id="背景">背景</h3>
@@ -360,10 +400,10 @@ code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Inf
 <li>Mac OS上可以使用brew安装</li>
 </ul>
 <p>如下是Mac OS下安装Hadoop、Pig、Elasticsearch、Jython的方式</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brew</span> install hadoop
-<span class="kw">brew</span> install pig 
-<span class="kw">brew</span> install elasticsearch
-<span class="kw">brew</span> install jython</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brew</span> install hadoop
+<span class="ex">brew</span> install pig 
+<span class="ex">brew</span> install elasticsearch
+<span class="ex">brew</span> install jython</code></pre></div>
 <p>对于其他操作系统也可以使用相似的方法来安装。接着我们还需要安装一个Hadoop的插件，用于连接Hadoop和ElasticSearch。</p>
 <p>下载地址：<a href="https://github.com/elastic/elasticsearch-hadoop" class="uri">https://github.com/elastic/elasticsearch-hadoop</a></p>
 <p>复制其中的<code>elasticsearch-hadoop-*.jar</code>、<code>elasticsearch-hadoop-pig-*.jar</code>到你的pig库的目录，如我的是：<code>/usr/local/Cellar/pig/0.14.0</code>。</p>
@@ -644,7 +684,7 @@ def get_geo(ip):
 <p>所需要的移动框架还是Ionic，用于扫描条形码的库是ZXing。</p>
 <h2 id="步骤-1">步骤</h2>
 <p>开始之前，我们需要先安装Ionic，并且使用它来创建一个APP。然后我们还需要添加对应的二维码扫描库，代码如下所示：</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">phonegap</span> plugin add phonegap-plugin-barcodescanner</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">phonegap</span> plugin add phonegap-plugin-barcodescanner</code></pre></div>
 <p>7 接着我们就可以开始制作我们的APP了。</p>
 <h3 id="step-1-zxing扫描与douban-api">Step 1: ZXing扫描与Douban API</h3>
 <p>我们需要在我们的模板里，添加一个ICON或者按钮来触发程序调用相应的函数：</p>
@@ -666,7 +706,7 @@ def get_geo(ip):
 <p>随后，我们就可以创建我们的代码来保存数据到数据库中。</p>
 <h3 id="step-2-存储数据库">Step 2: 存储数据库</h3>
 <p>开始之前，我们需要添加Cordova的SQLite插件：</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">cordova</span> plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">cordova</span> plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git</code></pre></div>
 <p>在系统初始化的时候，创建对应的数据库及其表。</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="cf">if</span>(<span class="va">window</span>.<span class="at">cordova</span>) <span class="op">{</span>
   <span class="co">//$cordovaSQLite.deleteDB(&quot;my.db&quot;);</span>
@@ -792,18 +832,18 @@ dwg.save()</code></pre></div>
 <p>我就想着要不和这个一样好了，不就是画几条线的事么。</p>
 <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python">
     <span class="kw">def</span> draw_for_bg_plus():
-        <span class="cf">for</span> x <span class="op">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> rect_length, width, rect_length):
+        <span class="cf">for</span> x <span class="kw">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> rect_length, width, rect_length):
             shapes.add(dwg.line((x, <span class="dv">0</span>), (x, height), stroke<span class="op">=</span><span class="st">&#39;#EEEEEE&#39;</span>, stroke_opacity<span class="op">=</span><span class="fl">0.3</span>))
 
-        <span class="cf">for</span> y <span class="op">in</span> <span class="bu">range</span>(rect_length, height, rect_length):
+        <span class="cf">for</span> y <span class="kw">in</span> <span class="bu">range</span>(rect_length, height, rect_length):
             shapes.add(dwg.line((y_text_split, y), (width, y), stroke<span class="op">=</span><span class="st">&#39;#EEEEEE&#39;</span>, stroke_opacity<span class="op">=</span><span class="fl">0.3</span>))
 
-        <span class="cf">for</span> x <span class="op">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> max_rect_length, width, max_rect_length):
-            <span class="cf">for</span> y <span class="op">in</span> <span class="bu">range</span>(<span class="dv">0</span>, height, max_rect_length):
+        <span class="cf">for</span> x <span class="kw">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> max_rect_length, width, max_rect_length):
+            <span class="cf">for</span> y <span class="kw">in</span> <span class="bu">range</span>(<span class="dv">0</span>, height, max_rect_length):
                 shapes.add(dwg.line((x, y <span class="op">-</span> <span class="dv">4</span>), (x, y <span class="op">+</span> <span class="dv">4</span>), stroke<span class="op">=</span><span class="st">&#39;#EEEEEE&#39;</span>, stroke_width<span class="op">=</span><span class="st">&#39;2&#39;</span>, stroke_opacity<span class="op">=</span><span class="fl">0.4</span>))
 
-        <span class="cf">for</span> y <span class="op">in</span> <span class="bu">range</span>(<span class="dv">0</span>, height, max_rect_length):
-            <span class="cf">for</span> x <span class="op">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> max_rect_length, width, max_rect_length):
+        <span class="cf">for</span> y <span class="kw">in</span> <span class="bu">range</span>(<span class="dv">0</span>, height, max_rect_length):
+            <span class="cf">for</span> x <span class="kw">in</span> <span class="bu">range</span>(y_text_split <span class="op">+</span> max_rect_length, width, max_rect_length):
                 shapes.add(dwg.line((x <span class="op">-</span> <span class="dv">4</span>, y), (x <span class="op">+</span> <span class="dv">4</span>, y), stroke<span class="op">=</span><span class="st">&#39;#EEEEEE&#39;</span>, stroke_width<span class="op">=</span><span class="st">&#39;2&#39;</span>, stroke_opacity<span class="op">=</span><span class="fl">0.4</span>))
 
     draw_for_bg_plus()</code></pre></div>
@@ -844,7 +884,7 @@ dwg.save()</code></pre></div>
       <span class="dt">template</span><span class="op">:</span> <span class="st">&#39;#template&#39;</span><span class="op">,</span>
       <span class="dt">data</span><span class="op">:</span> <span class="op">{</span> <span class="dt">name</span><span class="op">:</span> <span class="st">&#39;world&#39;</span> <span class="op">}</span>
     <span class="op">}</span>)<span class="op">;</span>
-  <span class="op">&lt;</span><span class="ss">/script&gt;</span></code></pre></div>
+  <span class="kw">&lt;/script&gt;</span></code></pre></div>
 <p>这个hello，world和一般的MVC框架并没有太大区别，甚至和我们用的Backbone很像。然后，让我们来看一个事件的例子：</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">listView <span class="op">=</span> <span class="kw">new</span> <span class="at">Ractive</span>(<span class="op">{</span>
     <span class="dt">el</span><span class="op">:</span> <span class="st">&#39;sandboxTitle&#39;</span><span class="op">,</span>
@@ -919,7 +959,7 @@ dwg.save()</code></pre></div>
 <p>CKEditor自身的编辑器配置比较长，我们就不在这里面列出这些代码了。</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript">    <span class="kw">var</span> init <span class="op">=</span> <span class="kw">function</span> () <span class="op">{</span>
     <span class="co">/**</span>
-<span class="co">     * </span>@license<span class="co"> Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.</span>
+<span class="co">     * </span><span class="an">@license</span><span class="co"> Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.</span>
 <span class="co">     * For licensing, see LICENSE.md or http://ckeditor.com/license</span>
 <span class="co">     */</span>
 
@@ -1258,7 +1298,7 @@ dwg.save()</code></pre></div>
 <h2 id="步骤-5">步骤</h2>
 <h3 id="step-1-构建工具">Step 1: 构建工具</h3>
 <p>Github与Travis之间，可以做一个自动部署的工具。相信已经有很多人在Github上玩过这样的东西——先在Github上生成Token，然后用travis加密：</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">travis</span> encrypt-file ssh_key --add</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">travis</span> encrypt-file ssh_key --add</code></pre></div>
 <p>加密后的Key就会保存到<code>.travis.yml</code>文件里，然后就可以在Travis CI上push你的代码到Github上了。</p>
 <p>接着，你需要创建个deploy脚本，并且在<code>after_success</code>执行它：</p>
 <div class="sourceCode"><pre class="sourceCode yml"><code class="sourceCode yaml"><span class="fu">after_success:</span>
@@ -1373,7 +1413,7 @@ git push -q upstream HEAD:gh-pages</code></pre>
 </blockquote>
 <p>即schema.xml</p>
 <p><strong>Solr 安装</strong></p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brew</span> install solr</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brew</span> install solr</code></pre></div>
 <h2 id="步骤-6">步骤</h2>
 <p>用Flask搭建一个简单的servrices，接着在前台用google的api，对后台发出请求。</p>
 <h3 id="step-1-solr-flask">Step 1: Solr Flask</h3>
@@ -1508,7 +1548,7 @@ if(isAndroid) {
 <span class="cf">if</span>(<span class="kw">typeof</span> module <span class="op">!==</span> <span class="st">&#39;undefined&#39;</span> <span class="op">&amp;&amp;</span> module <span class="op">&amp;&amp;</span> <span class="va">module</span>.<span class="at">exports</span>)<span class="op">{</span>
   <span class="kw">delete</span> module<span class="op">;</span>
 <span class="op">}</span>
-<span class="op">&lt;</span><span class="ss">/script&gt;</span></code></pre></div>
+<span class="kw">&lt;/script&gt;</span></code></pre></div>
 <p>类似的问题还有许多，不过由于应用内容的限制，这些问题就没有那么严重了。</p>
 <p>如果有一天，我有钱开放这个应用的应用号，那么我就会再次献上这个图：</p>
 <figure>
@@ -1607,7 +1647,7 @@ if(isAndroid) {
 <h2 id="步骤-8">步骤</h2>
 <h3 id="step-1-django-gis-设置">Step 1: Django GIS 设置</h3>
 <p>1.创建虚拟环境</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">virtualenv</span> -p /usr/bin/python2.67 django-elasticsearch</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">virtualenv</span> -p /usr/bin/python2.67 django-elasticsearch</code></pre></div>
 <p>2.创建项目</p>
 <p>为了方便，这里用的是Mezzanine CMS，相比Django的主要优势是，以后扩展方便。但是对于Django也是可以的。</p>
 <p>3.安装依赖</p>
@@ -1620,17 +1660,17 @@ if(isAndroid) {
 <li>elasticsearch</li>
 </ul>
 <p>安装</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">pip</span> install requirements.txt</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">pip</span> install requirements.txt</code></pre></div>
 <p>4.安装ElasticSearch</p>
 <p>CentOS</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">wget</span> https://download.elasticsearch.org/elasticsearch/elasticsearch/elasticsearch-1.4.2.zip
-<span class="kw">sudo</span> unzip elasticsearch-1.4.2 -d /usr/local/elasticsearch
-<span class="kw">rm</span> elasticsearch-1.4.2.zip
-<span class="kw">cd</span> /usr/local/elasticsearch/elasticsearch-1.4.2/
-<span class="kw">./bin/plugin</span> install elasticsearch/elasticsearch-cloud-aws/2.4.1
-<span class="kw">curl</span> -XGET http://localhost:9200</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="fu">wget</span> https://download.elasticsearch.org/elasticsearch/elasticsearch/elasticsearch-1.4.2.zip
+<span class="fu">sudo</span> unzip elasticsearch-1.4.2 -d /usr/local/elasticsearch
+<span class="fu">rm</span> elasticsearch-1.4.2.zip
+<span class="bu">cd</span> /usr/local/elasticsearch/elasticsearch-1.4.2/
+<span class="ex">./bin/plugin</span> install elasticsearch/elasticsearch-cloud-aws/2.4.1
+<span class="ex">curl</span> -XGET http://localhost:9200</code></pre></div>
 <p>Mac OS</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brew</span> install elasticsearch</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brew</span> install elasticsearch</code></pre></div>
 <p>5.Django Geo环境搭建</p>
 <p>CentOS等GNU/Linux系统: 可以参照<a href="http://www.phodal.com/blog/install-geo-django-in-centos/">CentOS Django Geo 环境搭建</a></p>
 <p>MacOS: <a href="http://www.phodal.com/blog/django-elasticsearch-geo-solution/">Mac OS Django Geo 环境搭建</a></p>
@@ -1641,8 +1681,8 @@ if(isAndroid) {
 HAYSTACK_CONNECTIONS <span class="op">=</span> {
     <span class="st">&#39;default&#39;</span>: {
         <span class="st">&#39;ENGINE&#39;</span>: <span class="st">&#39;haystack.backends.elasticsearch_backend.ElasticsearchSearchEngine&#39;</span>,
-        <span class="co">&#39;URL&#39;</span>: <span class="st">&#39;http://127.0.0.1:9200/&#39;</span>,
-        <span class="co">&#39;INDEX_NAME&#39;</span>: <span class="st">&#39;haystack&#39;</span>,
+        <span class="st">&#39;URL&#39;</span>: <span class="st">&#39;http://127.0.0.1:9200/&#39;</span>,
+        <span class="st">&#39;INDEX_NAME&#39;</span>: <span class="st">&#39;haystack&#39;</span>,
     },
 }   </code></pre></div>
 <p><code>HAYSTACK_SIGNAL_PROCESSOR</code>是为了可以实时处理。 <code>HAYSTACK_CONNECTIONS</code> 则是配置搜索引擎用的。</p>
@@ -1651,10 +1691,10 @@ HAYSTACK_CONNECTIONS <span class="op">=</span> {
 <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="co">&quot;haystack&quot;</span>,
 <span class="co">&quot;rest_framework&quot;</span>,</code></pre></div>
 <p>接着</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> manage.py createdb
-<span class="kw">python</span> manage.py migreate</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">python</span> manage.py createdb
+<span class="ex">python</span> manage.py migreate</code></pre></div>
 <p>运行</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> manage.py runserver</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">python</span> manage.py runserver</code></pre></div>
 <p>官方有一个简单的文档说明空间搜索—— <a href="http://django-haystack.readthedocs.org/en/latest/spatial.html">Spatial Search</a></p>
 <p>里面只有<code>Solr</code>和<code>ElasticSearch</code>是支持的，当然我们也不需要这么复杂的特性。</p>
 <p>创建Django app名为nx，目录结构如下</p>
@@ -1720,14 +1760,14 @@ admin.site.register(Note)</code></pre></div>
 {{ <span class="bu">object</span>.get_location_info }}</code></pre></div>
 <p><strong>创建数据</strong></p>
 <p>migrate数据库</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> manage.py migrate</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">python</span> manage.py migrate</code></pre></div>
 <p>run</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> manage.py runserver</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">python</span> manage.py runserver</code></pre></div>
 <p>接着我们就可以后台创建数据了。 打开: http://127.0.0.1:8000/admin/nx/note/，把除了<code>Latitude</code>和<code>Longitude</code>以外的数据都一填——经纬度是自动生成的。就可以创建数据了。</p>
 <p><strong>测试</strong></p>
 <p>访问 http://localhost:9200/haystack/_search</p>
 <p>或者</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">curl</span> -XGET http://127.0.0.1:9200/haystack/_search</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">curl</span> -XGET http://127.0.0.1:9200/haystack/_search</code></pre></div>
 <p>如果你没有Ionic的经验，可以参考一下之前的一些文章:<a href="http://www.phodal.com/blog/ionic-development-android-ios-windows-phone-application/">《HTML5打造原生应用——Ionic框架简介与Ionic Hello World》</a>。</p>
 <p>我们用到的库有:</p>
 <ul>
@@ -1736,8 +1776,8 @@ admin.site.register(Note)</code></pre></div>
 <li>ngCordova</li>
 </ul>
 <p>将他们添加到<code>bower.json</code>，然后执行</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">bower</span> install</code></pre></div>
-<h3 id="step-4-ionic-elasticsearch-创建页面">Step 4: Ionic ElasticSearch 创建页面</h3>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">bower</span> install</code></pre></div>
+<h3 id="step-5-ionic-elasticsearch-创建页面">Step 5: Ionic ElasticSearch 创建页面</h3>
 <p>1.引入库</p>
 <p>在<code>index.html</code>中添加</p>
 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;lib/elasticsearch/elasticsearch.angular.min.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span>
@@ -1780,7 +1820,7 @@ admin.site.register(Note)</code></pre></div>
     <span class="at">doSearch</span>(query)<span class="op">;</span>
 <span class="op">}</span></code></pre></div>
 <p>当我们点下搜索的时候，调用 ESService.</p>
-<h3 id="step-5-ionic-elasticsearch-service">Step 5: Ionic ElasticSearch Service</h3>
+<h3 id="step-6-ionic-elasticsearch-service">Step 6: Ionic ElasticSearch Service</h3>
 <p>接着我们就来构建我们的ESService，下面的部分来自网上:</p>
 <div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="va">angular</span>.<span class="at">module</span>(<span class="st">&#39;starter.services&#39;</span><span class="op">,</span> [<span class="st">&#39;ngCordova&#39;</span><span class="op">,</span> <span class="st">&#39;elasticsearch&#39;</span>])
 
@@ -1856,7 +1896,7 @@ admin.site.register(Note)</code></pre></div>
 <blockquote>
 <p>OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。</p>
 </blockquote>
-<h3 id="step-6-ionic-openlayer-地图显示">Step 6: Ionic OpenLayer 地图显示</h3>
+<h3 id="step-7-ionic-openlayer-地图显示">Step 7: Ionic OpenLayer 地图显示</h3>
 <p>1.下载OpenLayer</p>
 <p>2.添加到<code>index.html</code>:</p>
 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;js/ol.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></code></pre></div>
@@ -2055,12 +2095,12 @@ Coming soon</code></pre>
 <p>为了简化这一个痛苦的过程，我们还是用yeoman。</p>
 <h4 id="安装yeoman-lib生成器">安装Yeoman lib生成器</h4>
 <p>1.安装yeoman</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">npm</span> install -g yo</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">npm</span> install -g yo</code></pre></div>
 <p>2.安装generator-lib</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">npm</span> install -g generator-lib</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">npm</span> install -g generator-lib</code></pre></div>
 <p>3.创建项目</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">mkdir</span> ~/lettuce <span class="kw">&amp;&amp;</span> <span class="kw">cd</span> <span class="ot">$_</span>
-<span class="kw">yo</span> lib</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="fu">mkdir</span> ~/lettuce <span class="kw">&amp;&amp;</span> <span class="bu">cd</span> <span class="va">$_</span>
+<span class="ex">yo</span> lib</code></pre></div>
 <p>接着我们就迎来了</p>
 <pre><code>     _-----_
     |       |
@@ -2175,14 +2215,14 @@ root.Lettuce = Lettuce;
 <p>在Mac OS上有一个工具<code>screencapture</code>，可以用于截取当前屏幕。如：</p>
 <pre><code>screencapture screen.png</code></pre>
 <p>将图片存储为screen.png，我们只需要调用Python调用系统的命令，即可：</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">import</span> os
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">import</span> os
 
-<span class="kw">os.system</span>(<span class="st">&quot;screencapture screen.png&quot;</span>)</code></pre></div>
+<span class="ex">os.system</span>(<span class="st">&quot;screencapture screen.png&quot;</span>)</code></pre></div>
 <h3 id="step-2调节亮度">Step 2：调节亮度</h3>
 <p>在Mac OS上有一个工具叫<code>brightness</code>，可以用百分比调节屏幕的亮度，如</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brightness</span> 0</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brightness</span> 0</code></pre></div>
 <p>可以将屏幕的亮度调到0，即最低。所以，先安装这个工具：</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">brew</span> install brightness</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">brew</span> install brightness</code></pre></div>
 <p>然后用Python的os模块，即可调用 。</p>
 <h3 id="step-3全屏图片">Step 3：全屏图片</h3>
 <p>随后，用GTK简单的弄了个全屏图片的脚本，就完成了。</p>
@@ -2213,7 +2253,7 @@ win.set_keep_above(<span class="va">True</span>)<span class="op">;</span>
 gtk.main()</code></pre></div>
 <p>最后，再写个简单的函数即可：</p>
 <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">function</span><span class="fu"> ss()</span> <span class="kw">{</span> 
-    <span class="kw">python</span> <span class="st">&quot;/Users/fdhuang/learing/mock-screen/main.py&quot;</span> 
+    <span class="ex">python</span> <span class="st">&quot;/Users/fdhuang/learing/mock-screen/main.py&quot;</span> 
 <span class="kw">}</span></code></pre></div>
 <h1 id="基于virtual-dom的测试代码生成">基于Virtual DOM的测试代码生成</h1>
 <h2 id="概况-11">概况</h2>
@@ -3600,10 +3640,10 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
 <p><strong>Python library to extract EXIF data from tiff and jpeg files.</strong></p>
 </blockquote>
 <p><strong>ExifRead安装</strong></p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">pip</span> install exifread</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">pip</span> install exifread</code></pre></div>
 <p><strong>ExifRead Exif.py</strong></p>
 <p>官方写了一个exif.py的command可直接查看照片信息</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">EXIF.py</span> images.jpg</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">EXIF.py</span> images.jpg</code></pre></div>
 <p><strong>CartoDB</strong></p>
 <blockquote>
 <p>Create dynamic maps, analyze and build location aware and geospatial applications with your data using the power using the power of PostGIS in the cloud.</p>
@@ -3623,12 +3663,12 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
 <div class="sourceCode"><pre class="sourceCode python"><code class="sourceCode python"><span class="im">import</span> os, fnmatch
 <span class="kw">def</span> all_files(root, patterns<span class="op">=</span><span class="st">&#39;*&#39;</span>, single_level<span class="op">=</span><span class="va">False</span>, yield_folders<span class="op">=</span><span class="va">False</span>):
     patterns <span class="op">=</span> patterns.split(<span class="st">&#39;;&#39;</span>)
-    <span class="cf">for</span> path, subdirs, files <span class="op">in</span> os.walk(root):
+    <span class="cf">for</span> path, subdirs, files <span class="kw">in</span> os.walk(root):
         <span class="cf">if</span> yield_folders:
             files.extend(subdirs)
         files.sort()
-        <span class="cf">for</span> name <span class="op">in</span> files:
-            <span class="cf">for</span> pattern <span class="op">in</span> patterns:
+        <span class="cf">for</span> name <span class="kw">in</span> files:
+            <span class="cf">for</span> pattern <span class="kw">in</span> patterns:
                 <span class="cf">if</span> fnmatch.fnmatch(name, pattern):
                     <span class="cf">yield</span> os.path.join(path, name)
                     <span class="cf">break</span>
@@ -3660,12 +3700,12 @@ yaw = (rotation about (Pitch • Raw • Z));”</code></pre>
 
 <span class="kw">def</span> all_files(root, patterns<span class="op">=</span><span class="st">&#39;*&#39;</span>, single_level<span class="op">=</span><span class="va">False</span>, yield_folders<span class="op">=</span><span class="va">False</span>):
     patterns <span class="op">=</span> patterns.split(<span class="st">&#39;;&#39;</span>)
-    <span class="cf">for</span> path, subdirs, files <span class="op">in</span> os.walk(root):
+    <span class="cf">for</span> path, subdirs, files <span class="kw">in</span> os.walk(root):
         <span class="cf">if</span> yield_folders:
             files.extend(subdirs)
         files.sort()
-        <span class="cf">for</span> name <span class="op">in</span> files:
-            <span class="cf">for</span> pattern <span class="op">in</span> patterns:
+        <span class="cf">for</span> name <span class="kw">in</span> files:
+            <span class="cf">for</span> pattern <span class="kw">in</span> patterns:
                 <span class="cf">if</span> fnmatch.fnmatch(name, pattern):
                     <span class="cf">yield</span> os.path.join(path, name)
                     <span class="cf">break</span>
@@ -3686,7 +3726,7 @@ jsonFile.writelines(<span class="st">&#39;{</span><span class="ch">\n</span><spa
 
 <span class="kw">def</span> write_data(paths):
     index <span class="op">=</span> <span class="dv">1</span>
-    <span class="cf">for</span> path <span class="op">in</span> all_files(<span class="st">&#39;./&#39;</span> <span class="op">+</span> paths, <span class="st">&#39;*.jpg&#39;</span>):
+    <span class="cf">for</span> path <span class="kw">in</span> all_files(<span class="st">&#39;./&#39;</span> <span class="op">+</span> paths, <span class="st">&#39;*.jpg&#39;</span>):
         f <span class="op">=</span> <span class="bu">open</span>(path[<span class="dv">2</span>:], <span class="st">&#39;rb&#39;</span>)
         tags <span class="op">=</span> exifread.process_file(f)
         <span class="co"># jsonFile.writelines(&#39;&quot;type&quot;: &quot;Feature&quot;,&quot;properties&quot;: {&quot;cartodb_id&quot;:&quot;&#39;+str(index)+&#39;&quot;},&quot;geometry&quot;: {&quot;type&quot;: &quot;Point&quot;,&quot;coordinates&quot;: [&#39;)</span>
@@ -3724,13 +3764,13 @@ jsonFile.close()</code></pre></div>
 <p>Graphviz （英文：Graph Visualization Software的缩写）是一个由AT&amp;T实验室启动的开源工具包，用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。Graphviz是一个自由软件，其授权为Eclipse Public License。其Mac版本曾经获得2004年的苹果设计奖。</p>
 </blockquote>
 <p>一个简单的示例代码如下:</p>
-<div class="sourceCode"><pre class="sourceCode dot"><code class="sourceCode dot"><span class="fu">graph</span> <span class="fu">example1</span> <span class="ot">{</span>
-<span class="co">    </span><span class="fu">Server1</span><span class="co"> -- </span><span class="fu">Server2</span>
-<span class="co">    </span><span class="fu">Server2</span><span class="co"> -- </span><span class="fu">Server3</span>
-<span class="co">    </span><span class="fu">Server3</span><span class="co"> -- </span><span class="fu">Server1</span>
+<div class="sourceCode"><pre class="sourceCode dot"><code class="sourceCode dot"><span class="va">graph</span> <span class="va">example1</span> <span class="ot">{</span>
+<span class="co">    </span><span class="va">Server1</span><span class="co"> -- </span><span class="va">Server2</span>
+<span class="co">    </span><span class="va">Server2</span><span class="co"> -- </span><span class="va">Server3</span>
+<span class="co">    </span><span class="va">Server3</span><span class="co"> -- </span><span class="va">Server1</span>
 <span class="ot">}</span></code></pre></div>
 <p>执行编译后:</p>
-<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">dot</span> -Tjpg lz.dot -o lz.jpg</code></pre></div>
+<div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="ex">dot</span> -Tjpg lz.dot -o lz.jpg</code></pre></div>
 <p>就会生成下面的图片</p>
 <figure>
 <img src="http://ideabook.phodal.com/images/lz.jpg" alt="lz" /><figcaption>lz</figcaption>
@@ -3754,13 +3794,13 @@ jsonFile.close()</code></pre></div>
 <img src="http://ideabook.phodal.com/images/tree.jpg" alt="Tree" /><figcaption>Tree</figcaption>
 </figure>
 <p>而我们的代码是这样的:</p>
-<div class="sourceCode"><pre class="sourceCode dot"><code class="sourceCode dot"><span class="kw">digraph</span> <span class="fu">tree</span>
+<div class="sourceCode"><pre class="sourceCode dot"><code class="sourceCode dot"><span class="kw">digraph</span> <span class="va">tree</span>
 <span class="ot">{</span>
-<span class="co">    </span><span class="dt">nodesep</span><span class="ot">=</span><span class="dv">0.5</span><span class="ot">;</span>
-<span class="co">    </span><span class="fu">charset</span><span class="ot">=</span><span class="st">&quot;UTF-8&quot;</span><span class="ot">;</span>
-<span class="co">    </span><span class="dt">rankdir</span><span class="ot">=</span><span class="fu">LR</span><span class="ot">;</span>
-<span class="co">    </span><span class="fu">fixedsize</span><span class="ot">=</span><span class="fu">true</span><span class="ot">;</span>
-<span class="co">    </span><span class="kw">node</span><span class="co"> </span><span class="ot">[</span><span class="dt">style</span><span class="ot">=</span><span class="st">&quot;rounded,filled&quot;</span><span class="co">, </span><span class="dt">width</span><span class="ot">=</span><span class="dv">0</span><span class="co">, </span><span class="dt">height</span><span class="ot">=</span><span class="dv">0</span><span class="co">, </span><span class="dt">shape</span><span class="ot">=</span><span class="fu">box</span><span class="co">, </span><span class="dt">fillcolor</span><span class="ot">=</span><span class="st">&quot;#E5E5E5&quot;</span><span class="co">, </span><span class="fu">concentrate</span><span class="ot">=</span><span class="fu">true</span><span class="ot">]</span>
+<span class="co">    </span><span class="at">nodesep</span><span class="ot">=</span><span class="dv">0.5</span><span class="ot">;</span>
+<span class="co">    </span><span class="va">charset</span><span class="ot">=</span><span class="st">&quot;UTF-8&quot;</span><span class="ot">;</span>
+<span class="co">    </span><span class="at">rankdir</span><span class="ot">=</span><span class="va">LR</span><span class="ot">;</span>
+<span class="co">    </span><span class="va">fixedsize</span><span class="ot">=</span><span class="va">true</span><span class="ot">;</span>
+<span class="co">    </span><span class="kw">node</span><span class="co"> </span><span class="ot">[</span><span class="at">style</span><span class="ot">=</span><span class="st">&quot;rounded,filled&quot;</span><span class="co">, </span><span class="at">width</span><span class="ot">=</span><span class="dv">0</span><span class="co">, </span><span class="at">height</span><span class="ot">=</span><span class="dv">0</span><span class="co">, </span><span class="at">shape</span><span class="ot">=</span><span class="va">box</span><span class="co">, </span><span class="at">fillcolor</span><span class="ot">=</span><span class="st">&quot;#E5E5E5&quot;</span><span class="co">, </span><span class="va">concentrate</span><span class="ot">=</span><span class="va">true</span><span class="ot">]</span>
 <span class="co">    </span><span class="st">&quot;JavaScript&quot;</span><span class="co"> </span><span class="ot">-&gt;</span><span class="st">&quot;Web前端&quot;</span>
 <span class="co">    </span><span class="st">&quot;HTML&quot;</span><span class="co"> </span><span class="ot">-&gt;</span><span class="co"> </span><span class="st">&quot;Web前端&quot;</span>
 <span class="co">    </span><span class="st">&quot;CSS&quot;</span><span class="co"> </span><span class="ot">-&gt;</span><span class="co"> </span><span class="st">&quot;Web前端&quot;</span>
@@ -3965,7 +4005,7 @@ ConfigColor.read(<span class="st">&quot;./color.ini&quot;</span>)
 bg_colors <span class="op">=</span> []
 font_colors <span class="op">=</span> []
 
-<span class="cf">for</span> color_name, color <span class="op">in</span> ConfigColor.items(<span class="st">&#39;Color&#39;</span>):
+<span class="cf">for</span> color_name, color <span class="kw">in</span> ConfigColor.items(<span class="st">&#39;Color&#39;</span>):
     bg_colors.append(color.replace(<span class="st">&#39;#&#39;</span>, <span class="st">&#39;&#39;</span>).split(<span class="st">&#39;,&#39;</span>)[<span class="dv">0</span>])
     font_colors.append(color.replace(<span class="st">&#39;#&#39;</span>, <span class="st">&#39;&#39;</span>).split(<span class="st">&#39;,&#39;</span>)[<span class="dv">1</span>])