Hello World
Spiga

博客评论使用方式介绍

2010-03-24 22:44 by 老赵, 5665 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](http://www.google.com/logos/persiannewyear10-hp.gif)
![谷歌的韦瓦尔第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语法规则。在使用时,您也可以在检查评论的实时预览效果以后再点击提交。如果您的格式较为混乱,我也可能会动手对格式进行一些修改。

祝评论愉快!

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

60 条回复

  1. Vincent
    *.*.*.*
    链接

    Vincent 2010-03-24 23:06:00

    看到很多wiki系统使用这种方式,今天才叫Markdown

  2. 链接

    sglicx23 2010-03-24 23:06:03

    Hello World!

    555 不是沙发 啊哈哈

  3. 链接

    sglicx23 2010-03-24 23:09:02

    老赵你是准备两边一起更新还是全面转战这边了?

  4. 链接

    andywu.zh 2010-03-24 23:15:40

    rpx的登录相当的慢啊,幸好可以登录并记住。

    还有,发表评论的这个按钮,我看了半天没找到。

  5. 链接

    老赵 2010-03-24 23:16:41

    怎么不支持livID呢 Azure Access Control支持么?

  6. 老赵
    admin
    链接

    老赵 2010-03-24 23:18:58

    @sglicx23: 老赵你是准备两边一起更新还是全面转战这边了?

    暂时会同步更新到那边,不过那边基本不会回复了。

  7. 链接

    sglicx23 2010-03-24 23:19:41

    老赵啊,这个填主页的我不填http://要出错啊~~ 能不能改掉

  8. 老赵
    admin
    链接

    老赵 2010-03-24 23:20:01

    @andywu.zh: 还有,发表评论的这个按钮,我看了半天没找到。

    故意的,为了可以让用户看清楚预览的内容,呵呵。

  9. 老赵
    admin
    链接

    老赵 2010-03-24 23:21:29

    @sglicx23: 老赵啊,这个填主页的我不填http://要出错啊~~ 能不能改掉

    这个主页加上前缀是基本的吧,兄弟别懒,严谨一点,呵呵。

  10. atpking
    *.*.*.*
    链接

    atpking 2010-03-24 23:21:41

    怎么不混博客园了哦

  11. 链接

    sglicx23 2010-03-24 23:23:01

    恩好 技术博客 严谨点好

  12. 老赵
    admin
    链接

    老赵 2010-03-24 23:24:46

    怎么不支持livID呢 Azure Access Control支持么?

    要支持Live ID的话需要去Passort那里注册一个东西,等我不懒的时候再说,呵呵。

  13. 老赵
    admin
    链接

    老赵 2010-03-24 23:25:43

    @atpking: 怎么不混博客园了哦

    自己的程序,自由度大一些,不过的确麻烦了许多。

  14. 老赵
    admin
    链接

    老赵 2010-03-24 23:26:25

    @sglicx23 恩好 技术博客 严谨点好

    都能帮你记住信息,为什么还懒得输前缀啊……

  15. 链接

    sglicx23 2010-03-24 23:28:51

    我的想法是,让用户少输入点,感觉舒服点

  16. 链接

    yangsai1119 2010-03-24 23:55:21

    老赵也终于建立独立博客了。从推特过来串个门

  17. jeffrey.dan
    *.*.*.*
    链接

    jeffrey.dan 2010-03-25 09:44:49

    Don't make me think,发个评论还要记住这些规则,不知道与这个有冲突否,哈哈 ···效果当然是华丽丽的。

  18. 老赵
    admin
    链接

    老赵 2010-03-25 10:56:40

    @jeffrey.dan: Don't make me think,发个评论还要记住这些规则,不知道与这个有冲突否,哈哈 ···效果当然是华丽丽的。

    故意要人Think的,三思而后发,More Jol on Software里的想法,hoho。

  19. 麒麟.NET
    124.42.13.*
    链接

    麒麟.NET 2010-03-25 10:57:14

    不错,已经订阅了,如果博客园那边不回复了,我就删除那边的订阅了啊

  20. 链接

    麒麟.NET 2010-03-25 11:13:07

    登录了以后测试一下

  21. 老赵
    admin
    链接

    老赵 2010-03-25 11:24:40

    @麒麟.NET 不错,已经订阅了,如果博客园那边不回复了,我就删除那边的订阅了啊

    是的,那边的订阅可以删除了。

  22. 链接

    麒麟.NET 2010-03-25 11:34:55

    可惜没有类似博客园那种只刷新评论的功能,如果评论长了,刷新页面后可不好找了

  23. 天生俪姿
    218.25.171.*
    链接

    天生俪姿 2010-03-26 16:27:26

    老赵咋不在博客园发贴了? 还有那边是不是就不更新了呢?以后要想来找你是不是只能来这边了呢? 还有想问问。这个blog是你本人做的? 很不错。 还有这个评论的应该说是控件?咋开发的能公布不?俺对网页编辑器挺感兴趣的。 还想多问问你两个问题。 你提到的导入的功能。能透露一下是啥原理吗?你知道了博客园的数据格式?或者使用什么工具之类的?

    最后提一句,我按“delete”键时,好像没有将后面的字符进行删除。 不知道是咋回事? 我使用的是ietester。ie7模式。

    页面的Html源代码太多了。你好像写了好多的javascript.

  24. 老赵
    admin
    链接

    老赵 2010-03-26 16:49:37

    @天生俪姿

    以后就在这里写了,那里会发一些索引和摘要吧。要找我就来这里。这个Blog全都是我自己写的,评论也是自己写的,所以很多JS。导入其实就是学网络爬虫抓网页然后分析出来。我的delete很正常。

  25. Cat
    122.1.9.*
    链接

    Cat 2010-03-26 16:50:55

    我们的文档系统就是 markdown 格式的(带扩展),感觉比 wikicode 更易用一些。

  26. 方法
    123.149.14.*
    链接

    方法 2010-03-26 17:02:47

    哈哈哈哦真的哦__

  27. shutdown
    61.145.159.*
    链接

    shutdown 2010-03-26 17:06:09

    GOOD,I Like This

  28. 链接

    梓瀚 2010-03-26 17:06:59

  29. 这是什么博客
    58.246.194.*
    链接

    这是什么博客 2010-03-26 17:08:14

    这个博客是从哪里弄的,给我一份 我也想要建立自己的博客 只是始终找不到合适的

  30. Snake
    120.43.215.*
    链接

    Snake 2010-03-26 17:10:31

    Great!

  31. 链接

    梓瀚 2010-03-26 17:12:28

    要求添加我博客的引用

  32. 链接

    yangsai1119 2010-03-26 18:29:30

    报告老赵,搜索按钮完全没工作(Chrome & IE8)。

  33. cnhzlt
    218.72.20.*
    链接

    cnhzlt 2010-03-26 22:11:27

    支持一下老赵

  34. 链接

    xmai 2010-03-26 22:50:04

    不错,哥们多写点啊

  35. 链接

    ljspace.mail 2010-03-26 22:57:47

    支持,挪窝了

  36. Sevendays
    220.234.195.*
    链接

    Sevendays 2010-03-26 23:05:20

    支持下,顺便,试试效果,呵呵~

  37. 链接

    jianghaoyuane4711 2010-03-27 14:30:06

    评论好长啊。没分页么? 星号要转义?哈哈*(“\*”)

  38. basil
    112.238.37.*
    链接

    basil 2010-03-29 22:50:10

    请问老赵的独立博客是用的什么系统? 怎么没有看到你的icp备案号,不怕和谐吗?

  39. 老赵
    admin
    链接

    老赵 2010-03-29 23:33:42

    @basil: 请问老赵的独立博客是用的什么系统? 怎么没有看到你的icp备案号,不怕和谐吗?

    从头到底自己写的。我这是境外站点,也没法备份,呵呵。

  40. 链接

    俊明 2010-03-30 12:33:00

    我来晚了,先来占个位,呵

  41. 链接

    zzh020 2010-04-02 16:51:05

    试一下,就这个

  42. NanaLich
    124.114.154.*
    链接

    NanaLich 2010-04-06 12:31:25

    好像不能发隐藏评论? 其实境外站点也是可以备案的,就是太蛋疼了。

  43. itfan
    218.58.59.*
    链接

    itfan 2010-04-06 13:25:45

    我试试看!这样评论比WordPress默认的好吗?

  44. 程序一生
    124.236.174.*
    链接

    程序一生 2010-04-08 09:10:16

    测试下啊哈哈

  45. 链接

    onlytiancai 2010-04-11 21:06:49

    试试,呵呵,不错呀 我还想自己发明一套这种语言呢,结果还有个标准呀

    怎么是这样的呀

    Your text to link here... - 挺好的,呵呵 - 干啥呢? - 这个列表得每次点一下呀

    发一个试试看 呱呱

    二级评论 啊,不会吧,地下还是自动预览的呀,热

  46. 链接

    我还是不懂 2010-04-13 09:53:53

    还是不错的。。。。,还是境外站点好啊!

  47. 博客很漂亮啊,是WordPress吗
    61.187.160.*
    链接

    博客很漂亮啊,是WordPress吗 2010-04-16 14:29:47

    老赵是不是用的这个WordPress主题呀

    http://www.bestwpthemes.com/minyx-20-lite/

    可以支持代码语法高亮就好了

  48. 老赵
    admin
    链接

    老赵 2010-04-16 19:14:03

    @博客很漂亮啊,是WordPress吗

    基于那个皮肤修改的,不过系统是自己写的。语法高亮支持啊,你没有看文章内容吗?

  49. 士大夫
    61.153.140.*
    链接

    士大夫 2010-04-20 15:32:13

    的身份撒的飞现在车费是

  50. jokry
    221.238.108.*
    链接

    jokry 2010-05-12 12:55:12

    刚了解Markdown,帮助很大!

  51. 77
    115.192.211.*
    链接

    77 2010-06-02 13:27:01

    先试一下看看

  52. 链接

    77 2010-06-02 13:29:38

    不好意思再次一次

  53. 链接

    77 2010-06-02 14:09:06

    @老赵,头像是如何显示出来的。

  54. 链接

    77 2010-06-02 14:11:00

    @老赵 头像出来了。 Gavatar申请一段时间后,才显示出来。 表示感谢!

  55. bdnet
    118.250.189.*
    链接

    bdnet 2010-06-07 11:25:44

    新博客( ^^ )不错嘛,O(∩∩)O哈哈~

  56. 链接

    装配脑袋 2010-06-10 11:02:03

    Dim [Dim] As New [As].Dim("'Dim [Dim]") 'Dim [Dim] As [Dim]
    'Dim [Dim] As [As].Dim("'Dim [Dim] As [Dim]") 'Dim [Dim] As [Dim]
    

    Bug多多啊=_=b

  57. TEST
    219.134.2.*
    链接

    TEST 2010-06-22 13:46:32

    ADFASDFASDFASDF ASDFASDFASDFASDFASDFASDF

  58. fuck 老赵
    112.238.19.*
    链接

    fuck 老赵 2010-07-03 00:11:42

    sss>ssssss>

  59. amen
    124.127.119.*
    链接

    amen 2010-08-31 10:55:59

    …………………………

  60. Somnus
    123.125.157.*
    链接

    Somnus 2011-04-30 20:16:35

    今天天气不错,挺风和日丽的,我们下午没有课,这的确挺爽的

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我