博客评论使用方式介绍
2010-03-24 22:44 by 老赵, 6934 visits新博客终于上线了，与旧博客不同的是，我在评论方面花了许多精力，希望可以提供一个优秀的评论方法。我对优秀的定义是“格式丰富，使用简单”，再加上由于是技术博客，因此对于代码片段也要有较好的支持。最终，我选择使用Markdown作为评论的输入标记。Markdown是一个轻量的标记规则，但对于评论应用来说也已经足够丰富了。Markdown的运用非常广泛，例如著名的编程网站Stack Overflow也使用了这种标记语言。事实上，我这篇评论使用方式的介绍也有相当部分是翻译自Stack Overflow编辑器的帮助，自然还有部分自定义的内容（主要是对于代码片段的支持）。
本文内容分为以下几个部分：
我建议您在查阅这份文档时，可以将示例片段粘贴至评论框中查看实时预览效果。我在客户端和服务器端各自实现了一套完全相同的处理方法，并且尽力保证预览和最终发布的效果完全一致，希望可以令您满意。
标题及分割符
在评论中支持3级标题（即<h1>、<h2>和<h3>），例如您只需要（尾部的井号可以省略）：
# 一级标题 # ## 二级标题 ## ### 三级标题 ###
而前两级标题也可以使用在文字下方使用连续的“=”与“-”：
一级标题 ==== 二级标题 -----
分割符（<hr />）形式比较多样，以下几种方式都可以：
Rule #1 - - - Rule #2 **** Rule #3 ___
换行及分段
使用Markdown编辑正文非常容易，只需要像输入普通文本那样即可。值得注意的是，Markdown中的换行只会成为一个空格，而只有连续两个及以上的换行才会出现新的段落（即出现<p>标签）：
单个换行 只能形成空格。 两个及以上的换行才是分段。
如果您需要换行而不是分段，则可以输入<br/>进行分行：
这样便可以<br /> 进行换行。
斜体及加粗
如果您需要斜体字（Italics），则可以使用下划线（即“_”）或是星号（即“*”）置于斜体内容的左右：
这是_斜体_，或者*这样也可以*
对于粗体，则可以使用连续两个下划线或是星号置于斜体内容左右：
这是__粗体__，或者**这样也可以**
当然，您也可以同时使用粗体或斜体，例如：
_**这样**_，或是__*这样*__，也可以___这样___及***这样***等等
当然您也可以发现，中文的斜体字非常难看，因此我不建议您使用中文的斜体。置于加粗，虽然不是很合适（因为其实中文也没有粗体），但个人认为问题不大。
列表
列表分两种：有序列表及无序列表。对于无序列表，只需要在文字前面加上星号（即“*”，也可以使用“-”或“+”）及空格即可：
* Item A * Item B * Item C
对于有序列表，则使用数字（不代表最终的编号）和点再加上一个空格：
1. Item A 2. Item B 3. Item C
自然，列表之间可以进行嵌套，其中的级别按照实际的缩进位置确定：
* Item A
* Item B
1. Item 1
2. Item 2
* Item P
* Item Q
3. Item 3
* Item C
链接
在评论的标记中，即使出现了URL形式的文字，也不会自动生成链接（主要是由于很难精确识别），如果您需要生成链接，可以使用左右尖括号（即“<”和“>”）来包含链接内容：
这不会有链接：http://zhaojie.me/ 这便会加上链接：<http://zhaojie.me/>
此外，以下的几种方式都会生成链接：
可以使用内联的方式添加链接：[老赵](http://zhaojie.me/)。 也可以使用在内容尾部添加引用的方式添加链接：[老赵][1]. 在添加引用时，可以指定一个可读性强的名字：[老赵][zhaojie]. [1]: http://zhaojie.me/ [zhaojie]: http://zhaojie.me/
显然，使用引用的方式建立链接，可以更好的标记的可读性，此外链接的复用性也会更好一些。值得一提的是，引用的名称是不区分大小写的，这意味着[ZHAOJIE]和[zhaojie]是等价的。此外，由于链接有title属性，我们指定了这个属性之后，便可以在鼠标悬停在链接上时获得文字提示：
可以使用内联的方式添加链接：[老赵](http://zhaojie.me/ "赵劼")。 也可以使用在内容尾部添加引用的方式添加链接：[老赵][1]. 在添加引用时，可以指定一个可读性强的名字：[老赵][zhaojie]. [1]: http://zhaojie.me/ (洋名Jeffrey Zhao) [zhaojie]: http://zhaojie.me/ (洋名Jeffrey Zhao)
当然，如果您愿意的话，也可以直接内嵌HTML的<a>标记：
<a href="http://zhaojie.me" title="赵劼">老赵</a>
图片
图片和链接的标记比较类似，不过之前需要加上感叹号：
 ![谷歌的韦瓦尔第LOGO][google-vivaldi] ![Google Hungarian National LOGO][google-national] [google-vivaldi]: http://www.google.com/logos/vivaldi10-hp.gif [google-national]: http://www.google.com/logos/hungariannational10-hp.gif "谷歌的匈牙利国庆节LOGO"
方括号内部是图片的alt属性的值，当图片加载失败后便会显示这个文字。图片也可以使用引用的方式进行。而在引用中，URL后的字符串是图片的title属性，即鼠标悬停在图片上方时显示的提示文字。
如果您需要的话，也可以直接使用<img>标记来插入图片——假如您需要指定图片的显示尺寸，也必须使用这种方式：
<img src="http://example.com/sample.png" width="100" />
块状引用
在评论时，我们可能需要引用别人的一段话（如进行有针对性地回复或评论），此时便可以使用块状引用。添加块状引用，只需要在文字前增加一个右尖括号（即“>”）和空格即可：
> 空行中的右尖括号可以省略 > > 但是为了增强可读性，建议保留。
块状引用间也可以进行嵌套：
> 一级嵌套 > > 嵌套中的嵌套 > > > 嵌套任意级都可，但会变得很不好看，建议保留**一至二层**即可
在块状引用中，您可以使用各种其他标记，包括链接、列表、甚至代码片断。
代码片段
如果我们需要在正文的文字中内联一些代码片段或是关键字，那么便可以使用backtick字符（即“`”，也就是键盘左上角的那个键，数字1的左边）在评论中生成一个<code>标签：
Press the `<Tab>` key, then type a `$`.
值得注意的是，在内联的代码片断中，所有的尖括号等特殊字符都会被原原本本地显示出来。
在需要插入独立的代码片断时，您也可以通过在行首添加tab或是4个空格的方式来粘贴代码：
public string RemoveTags(string html)
{
return Regex.Replace(html, @"<[^>]*>", "");
}
不过上面这段代码是没有着色效果的，如果要添加着色，则可以在第一行添加配置信息：
[config] brush:csharp; first-line:10; highlight:[11,12]
public string RemoveTags(string html)
{
return Regex.Replace(html, @"<[^>]*>", "");
}
第一行[config]代码仅仅是告诉着色器应该如何处理代码，在实际显示时会被省略。在这里我使用的是Syntax Highlighter客户端着色插件，因此可以使用它的各种配置，如起始行数（first-line）及高亮行号（highlight）等等。关于brush的种类，我支持Syntax Highlighter官方提供的各种语言。我以后也会提供更多着色支持，并为粘贴代码片段提供必要的辅助功能。
您也可以在块状引用内部添加代码：
> [config] brush:csharp; first-line:10; highlight:[11,12]
> public string RemoveTags(string html)
> {
> return Regex.Replace(html, @"<[^>]*>", "");
> }
不过，由于样式有问题，在块状引用中的代码片段就不作着色处理了（您可以在即时预览里进行实验）。等有更好的着色方案时我会对此进行改进。
HTML标记
在评论中您也可以直接插入HTML标记，例如您如果要添加删除线：
今天天气不错，挺风和日丽的，<strike>我们下午没有课，这的确挺爽的</strike>。
不过为了避免XSS，评论中只支持部分HTML标记：<a>、<b>、<blockquote>、<code>、<del>、<dd>、<dl>、<dt>、<em>、<h1>、<h2>、<h3>、<i>、<img>、<kbd>、<li>、<ol>、<p>、<pre>、<s>、<sup>、<sub>、<strong>、<strike>、<ul>、<br/>、<hr/>。此外，对于<a>标记只支持src和title属性，而<img>标记只支持src、title、alt、width和height属性，且width和height必须小于1000。
补充
有关更多信息，您可以参考官方的Markdown语法规则。在使用时，您也可以在检查评论的实时预览效果以后再点击提交。如果您的格式较为混乱，我也可能会动手对格式进行一些修改。
祝评论愉快！
看到很多wiki系统使用这种方式，今天才叫Markdown。