博客代码高亮

博客代码高亮

-使用SyntaxHighlighter使Blogger上发布的代码高亮

简介

使博客上发布的代码格式化显示，或者更明确的说，代码高亮，能让读者更方便的看到代码中最核心的部分，SyntaxHighlighter是用JavaScript开发的一个用于代码高亮的插件。现在被用于广泛的使用情景中，比如Apache，Aptana，Mozilla，Yahoo，Wordpress，Bug Labs，Freshbooks等等，对于有高度自由的Blogger，我们也可以通过代码托管的形式（hosting），将SyntaxHighlighter的代码插入Blogger的模板中，达到代码高亮的目的。

SyntaxHighlighter是GitHub上的一个开源项目，点击这里，可以进入SyntaxHighlighter位于GitHub的主页。

SyntaxHighlighter安装指南

第一步，进入博客后台管理界面，点击模板->修改HTML

 

第二步，插入以下代码到指定位置，可以Ctrl+F，搜索</head>，再将代码插入到</head>前

 

<!-- Syntax Highlighter Addition START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Addition END -->

第三步，点击保存模板->后退。上面的代码片段提供了ActionScrip3、Bash/Shell、ColdFusion、C#等23种格式刷。我们可以根据自己的实际需要删除自己不用的代码所对应的托管代码链接。 SyntaxHighlighter支持的格式刷，点击这里查看。
第四步，撰写博客时，进入HTML编辑选项，有两种方法可以显示高亮代码
<pre/>方法
一个具体的例子， 来源自SytaxHighlighter教程

<pre class="brush: js">
function foo()
{
}
</pre>
 
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

点击发布后，将会显示

function foo()
{
}

<script/>方法
注意有CDATA标签

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

将会显示 注意在贴代码时，先使用HTML编码工具将代码转换为HTML格式再进行粘贴，点击这里，一个在线的HTML编码工具。

用于本地测试WordPress的LAMP环境搭建

用于本地测试WordPress的LAMP环境搭建

步骤一：安装Apache，MySQL和PHP

在terminal中输入命令

$ sudo apt-get install apache2 php5 mysql-server php5-mysql

注意：

• apache2 -v，php5 -v可以分别查看 apache2和php的版本，以验证安装是否成功
• mySQL安装过程中可能会提示设置数据库根用户root密码，这一步可以不用设置
• apache通过内置的libphp5.so模块来指挥php工作，在terminal中输入cat /etc/apache2/mods-enabled/php5.load如果显示LoadModule php5_module /usr/bin/apache2/modules/libphp5.so则表示apache和php5结合成功了
• 验证php-mySQL模块是否安装成功可以执行cat /etc/php5/apache2/conf.d/20-mysql.ini，如果显示以下内容，则说明安装成功

configuration for php MySQL module
priority=20
extension=mysql.so 

步骤二：MySQL数据库设置

如果之前在安装MySQL时没有设置根用户root的密码，则在 terminal中输入命令

$ mysql -u root

进行设置，反之，如果在之前安装MySQL时设置过根用户root的密码，则在terminal中输入命令

$ mysql -u root -p 

根据提示输入密码后，以root身份进入MySQL的命令行界面，输入命令（注意行末分号）

mysql> create database wordpress;

创建名为wordpress的数据库，输入命令

mysql> show databases;

检查数据库是否创建成功，如果显示以下内容，则说明创建成功

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.00 sec)

接下来创建用户wordpressuser，输入命令

mysql> create user wordpressuser@localhost identified by 'password';

现在为止，我们有一个名为wordpress的数据库，还有一个名为wordpress的用户，但是这两者还没有直接的关系，输入以下命令将两者联系起来

mysql> grant all privileges on wordpress.* to wordpressuser@localhost;

现在用户wordpressuser拥有访问数据库wordpress的权限，我们还需要向MySQL更新以下我们刚刚所做出的更改，输入命令

mysql> FLUSH PRIVILEGES;

现在MySQL已经实时更新了最近的权限变化，我们已经设置好了数据库部分，输入以下命令退出MySQL

mysql> exit;

步骤三：启动Apache2和MySQL server

在terminal中输入命令

$ sudo /etc/init.d/mysql start 
$ sudo /etc/init.d/apache2 start

启动成功后，terminal中将显示以下内容

* Starting MySQL database server mysqld                                 [ OK ] 
* Starting web server apache2
*

步骤四：WordPress安装与配置

在terminal中输入命令，下载最新版本的wordpress

$ wget -c http://wordpress.org/latest.tar.gz

解压缩软件包

$ tar xvzf latest.tar.gz

解压缩完成后，将文件夹复制到本地服务器目录

$ sudo cp –rf wordpress /var/www/html

进入wordpress文件夹，配置config文件

$ cd /var/www/html/wordpress
$ cp wp-config-sample.php wp-config.php

使用文本编辑工具修改wp-config.php文件，如果你的系统没有安装sublime，用gedit替换下面的subl命令

$ sudo subl /var/www/wordpress/wp-config.php

在打开的编辑窗口中，分别设置数据库名，数据库用户名以及数据库用户密码

define('DB_NAME', 'wordpress');

/** MySQL database username */
define('DB_USER', 'wordpressuser');

/** MySQL database password */
define('DB_PASSWORD', 'password');

/** MySQL hostname */
define('DB_HOST', 'localhost');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

现在在浏览器中输入http://localhost/wordpress/，进入著名的5分钟wordpress安装向导，本地化wordpress测试环境搭建完成

参考链接：
How To Install Wordpress on Ubuntu 14.04
LAMP环境下架设PHP/wordpress网站

Git使用指南

Git使用指南

Udacity Git课程学习笔记

为什么要使用Git

Git是一种版本控制（version control） 工具。在我们做一些个人项目时，版本控制似乎不那么重要，我们先开发出一个原型，然后再小心翼翼的进行迭代，增加新的功能。如果我们将版本控制应用于开发个人项目，那么我们可以在保留主线开发的同时，不用那么小心翼翼的实验新的功能。而对于多人协作项目，版本控制更加不可或缺，因为在相同的时间段并在同一文件上进行编辑，冲突几乎不可避免。我们需要使用像Git一样的版本控制工具来协调大家的工作。
首先考虑同一文件不同版本的问题，为了比较两个版本的不同，在Linux下，我们可以使用diff命令来输出两个文件的不同，例如
diff -u old.txt new.txt
同样，Git也有类似的git diff来比较同一文件不同历史版本的不同，这两个命令的输出结果是很相似的。
需要注意的是，这两个diff命令都是逐行比较的，如果一行中有多处不同，diff只会告诉你这行有不同，而不会告诉你有多少不同，所以如果想使用diff命令来比较文件版本，编辑文件时，每行控制在80 - 120个字符为宜。

版本控制

不同版本控制方法比较
-人工保存：给不同版本起不同的文件名以达到版本控制的目的
-Dropbox：会保存30天内的文件版本
-Google Docs
-Wikipedia
-Git
-SVN

多久进行一次commit

在一次logical change后进行commit，比如修复了一个bug，增添了一个功能，
git -stat查看
git -version 查看电脑git的版本

克隆整个目录Repository

Git clone
-查看最近的commit以及相关信息，git log，退出git log按下q
-彩色化diff输出，git config --global color.ui auto，git diff first_id second_id
-在终端内复制粘贴Ctrl+Shift+C and Ctrl+Shift+V.

Git checkout

Git checkout 和 svn checkout 不同。git checkout 可以帮助我们回到某一次commit时文件的状态。如果我们在测试程序时发现bug而不知道bug在哪一次commit中引入，那么我们可以checkout历史commit来定位bug。
Git checkout commit_id，其中commit_id 可以只输入前四位

工作环境设置

详细步骤请查阅《给Ubuntu安装sublime并配置git工作环境》

总结四个常用git command

git diff

Git diff old_file new_file，用来比较两次commit，输出两个版本的不同

git clone

Git clone http_url复制整个git repository到本地目录，包括历史版本记录

git checkout

Git checkout commit_id暂时性把一个repository里的所有文件重置到特定commit时期。一次commit就好像snapshot了一个repository下的所有文件，使用checkout就像用时光机一样把这个目录下的所有文件恢复到commit发生时的状态。

git log

输出一个repository下的所有历史commit记录，并从最新的commit开始输出

初始化Git目录

Git init，初始化当前目录为git repository。这时系统在当前目录初始化一个空的版本库，其文件名为.git，是一个隐藏文件，其中包括当前目录下的版本控制信息。这时候如果我们用git log以图查看历史commit记录，此时系统会显示

fatal: bad default revision 'HEAD'

因为此时我们还没有进行过commit，这时我们可以通过git status命令来查看当前目录的版本状态。

Working directory

Staging area

repository

Working directory是我们当前的工作目录，通过git add命令，我们可以将一个或多个文件添加到staging area中。在staging area中的文件便是git跟踪版本变化的文件，没有添加进入staging area的文件git不会跟踪变化。此后再使用git commit便可以将staging area中的文件commit到repository中，形成一次文件快照（snapshot）。

如何写commit信息

git commit -m “Commit message” 而不是直接使用git commit，我们可以在“Commit message”里写上有关此次commit的一些评论信息，有关写作这个信息的规范，可以查阅
http://udacity.github.io/git-styleguide/
如果之前工作环境配置成功，在输入git commit命令后会自动弹出sublime，并提示我们输入commit message。commit成功后再次使用git status我们会得到

位于分支 master 未跟踪的文件: （使用 "git add <file>..." 以包含要提交的内容） lesson_1_reflections.txt 提交为空，但是存在尚未跟踪的文件（使用 "git add" 建立跟踪）

Git diff 详解

一共有三种git diff

Working directory	Staging area	repository
file1 file2	file1 file2	commit1 commit2

git diff

比较Working directory和Staging area的不同

git diff –staged

比较Staging area和repository的不同

git diff commit1 commit2

比较repository中commit1与commit2中的不同，就是我们之前使用的commit

git reset –hard

使用这条命令可以放弃Working directory与Staging area中的所有改变，要谨慎使用。先使用git diff和git diff --staged确保Working directory与Staging area中的改变确实是自己想要放弃的，否则reset的过程是不可逆的。

进入“detached HEAD”状态

HEAD相当与一个指针，默认情况下，它指向我们的master分支，如果我们使用命令git checkout c1（c1是历史中的某一个commit），那么HEAD便指向了这个commit而不是一个分支，我们便进入了“detached HEAD”状态
版权声明：以下图片来自于在线Git Branch教程Learn Git Branching，地址为：http://pcottle.github.io/learnGitBranching/

开始	Git命令	结束
HEAD -> master -> C1	git checkout c1 注意：c1代表commit 1的hash值，我们可以通过git log来查看某次commit的hash值	HEAD -> C1

从“detached HEAD”状态中离开

如果我们checkout了历史中的一个commit，就会进入detached HEAD状态。在terminal中输入git checkout master命令能使我们离开这个状态，重新回到master分支。
HEAD表示当前commit，如果我们checkout 一个不是current commit的历史commit，我们就会收到”detached HEAD” state警告。
在”detached HEAD” 状态中，我们可以

1. 做出试验性质的改变并commit
   
2. 使用另外一个checkout，在不影响任何branches的情况下放弃这个状态下的所有commit
   
3. 使用git checkout -b new_branch_name建立新的branch并进入该branch来保留我们在这个状态下做出的commit，之后terminal会提示HEAD已经转移到当前branch下的current commit
   

注意：git checkout -b new_branch_name等价于以下两个命令

git branch new_branch_name #建立新branch，此时master标签和新branch标签都指向当前commit git checkout new_branch_name #进入新branch，此时branch标签领先master标签一个commit

一个例子

commit1提交与commit2之前，commit2中发现程序bug而通过git checkout commit1却发现程序运行正常，如何修改master brunch的代码并commit呢？

Working directory	Staging area	repository
file1 file2	file1 file2	commit1 commit2

1，假设自己在master branch，首先通过git log查看历史commit，再通过git diff commit1 commit2查看代码修改过得地方，以此判断bug出现的位置。假设bug出现在file1的某一行代码上。
2，修改file1中有bug的代码片段

Working directory	Staging area	repository
file1* file2	file1 file2	commit1 commit2

3，这时使用git diff 可以比较working directory与staging area的不同，而使用git diff –staged 发现staging area 与repository没有任何不同。使用git status我们发现file1有修改，但是该修改还未加入提交，我们可以用git add file1来把file1中的修改暂存在staging area中。

Working directory	Staging area	repository
file1* file2	file1* file2	commit1 commit2

4，这时使用git diff 发现working directory与staging area的没有任何不同，而使用git diff –staged 发现staging area 与repository的不同就是我们刚刚修改过的有bug的代码段。
5，最后再用git commit

Working directory	Staging area	repository
file1* file2	file1* file2	commit1 commit2 commit3

这时发现，不论是git diff还是git diff –staged，都没有发现任何不同

创建分支

使用git branch可以查看当前分支，terminal输出*master中的星号表示master branch是当前默认分支，我们将来所做的更改会自动更新master branch的内容。使用git branch branch_name 来创建新的分支，并使用git checkout branch_name来切换到branch_name分支，这样branch_name变成为默认分支，我们将来所做的改变会自动应用到该分支上。

图形化查看commit历史

如果想要图形化不同分支间的commit历史，我们可以使用git log –graph –oneline master branch_name来显示图形化的git log表示。

合并分支：使用merge

合并分支的原则：简单情况

我们用大写字母A，B，C，D，E表示代码块，合并kevin和lisa的分支为一个分支的 final version会包含哪些代码块呢？

初始代码	工作了一天的kevin的代码	工作了一天的lisa的代码
？	A，B，D	B，C，D，E

如果我们不知道初始代码，根据工作了一天的kevin和lisa的代码我们可以知道，B，D应该出现在啊final version中，因为B，D代码块同时出现在两个分支中。令我们不确定的是A，C，E是否存在与final version中。

初始代码	工作了一天的kevin的代码	工作了一天的lisa的代码
A，C，D	A，B，D	B，C，D，E

知道了初始代码，我们就可以确定合并分支后的final version应该是什么样了。初始有A，kevin没有对A操作，而lisa吧A删除了，这样final version应该没有A；同理，final version应该没有C；初始没有E，kevin的分支没有E，而lisa的分支中有E，说明lisa增加了E，这样final version应该有E。这样，final version应该是B，D，E。

合并分支的原则：复杂情况

初始代码	工作了一天的kevin的代码	工作了一天的lisa的代码
A，C，D	A，C'，D	B，C”，E

这里我们用C'和C”表示kevin和lisa对C的不同修改版本，那么final version应该是什么样的呢？
这时候git会告诉我们这个情况，并且有我们（users）来决定哪个版本应该留下来。

进行合并（Merge）

假设我们要合并branch1和banch2，并以branch1为当前分支（current branch），也就是把branch2合并到branch1中，步骤如下

1. git checkout branch1
   
2. git merge branch2 (等价与git merge branch1 branch2)
   

注意事项：合并前首先检查当前在哪个分支，要记住，所有改动都会引起当前分支的更新。如果当前分支（checked-out branch）是branch1，我们输入git merge branch2 branch3后，合并后的版本（merged version）会是三个分支的合并。所以一般在合并前，我们会checkout要合并的两个分支的其中一个分支，至于选择哪个分支来checkout，取决于我们想要更新哪个分支的标签（branch label）。

合并冲突（Merge conflict）

1. 使用git merge –abort终止合并
   
2. 使用git log和git diff来查找冲突产生的原因
   
3. 找到冲突原因后修改相应的文件，再进行一次commit
   
4. 重新合并分支
   

注意事项：在文本编辑器中敲击回车实际上会插入一个看不见的字符以便告诉编辑器这里是新的一行。在类Unix系统下，这个看不见的字符叫“line feed”或者简称LF，在windows下会使用两个字符，“carriage return” 和 “line feed”，简称CRLF。类Unix下编辑的文档如果在windows下编辑，windows系统把文档中的LF转换为CRLF以使得windows下的文本编辑器能够正常工作。然而这个转换可能会造成windows下合并冲突的问题，未解决这个问题，我们可以使用git config –global core.autocrlf true命令

合并冲突的另一种情形

在master branch工作的同时，我们也许有一个实验性质的exp branch。随着master branch的更新，我们也希望exp branch有master branch的新特性。如何去做呢？

1. 切换到exp branch，git checkout exp
   
2. 在exp branch下合并master branch，git merge master exp
   
3. 如果terminal提示合并冲突与某个文件，那么用文本编辑器打开这个文件来修正冲突
   

<<<<<<< HEAD // exp branch上的代码 ||||||| merged common ancestors // exp 与master共同parent的代码 ======= //master branch上的代码 >>>>>>> master

4. 发生冲突的代码段会有上述符号帮助我们判断哪些代码应该留下来，哪些应该删除。使用git status查看当前合并状态，terminal会提示有both modified的文件，这是因为要合并的两个分支都修改了该文件，正是如此，才会造成冲突
   
5. 修改冲突文件（both modified文件）后，使用git add both_modified_file，再用git status查看当前状态，terminal提示我们冲突已经解决但我们仍在合并状态中。这时再使用git commit来结束当前合并状态
   
6. 如果之前配置好了工作环境，这时sublime会弹出并为我们填写好了commit message，之后使用git log -n1查看最新一次commit来确保merge成功。
   

分支合并后对git log的影响

例如将两个分支合并，我们使用git log来查看历史commit记录，terminal的输出会怎么样呢？这时git log的会按照commit的时间戳（time stamp）来依次显示历史commit。这样做会造成一个问题，在我们使用git diff比较两次相邻的commit时，时间上相邻的两次commit也许并不是父子关系，这样比较的结果会现实两个文件有较大出入，而这并不是我们想要的。如何比较一次commit和它parent的不同呢？我们可以使用 git show commit_id命令，来比较commit_id和它parent的不同。我们假设commit2的id是commit_id，commit1的parent，commit1的id是commit_parent，那么git show commit_id命令等价与git diff commit_parent commit_id，注意两者的顺序。

合并分支：使用rebase

使用rebase是要注意当前分支是什么
版权声明：以下图片来自于在线Git Branch教程Learn Git Branching，地址为：http://pcottle.github.io/learnGitBranching/

开始	Git命令	结束
	当前位于bugFix分支 Git checkout bugFix git rebase master
	当前位于master分支 git rebase bugFix 解释：master所在commit是bugFix所在commit的ancestor，在master分支下使用rebase bugFix使得master在commit历史中前进了一步

删除分支

使用git branch -d branch_name来删除分支
如果一个分支被删除，现有分支就无法到达已删除分支中的commit。这些分支却仍然可以用commit id到达，直到Git的垃圾回收开始运行。Git的垃圾回收会定期的运行，清除这些无法到达的commit，除非我们手动将它关闭。我们可以使用git gc开手动开启Git的垃圾回收，以此清除不必要文件以及优化本地repository。

在线学习Git网站

https://www.udacity.com/courses/ud775
http://pcottle.github.io/learnGitBranching/