这是怎样一个博客生成器

本文介绍了你正在访问的网页是如何生成

哪点与众不同？

本博客生成器用的是 Makefile、Perl 和 Pandoc，还有一点点 CSS 和 JavaScript，没有用其他工具和语言，不用担心自己的博客生成器更新、或者自己换了一台电脑或者操作系统就不能码字¹。安装起来很方便，因为 1）如果你用 Windows 操作系统还使用 Git，perl 就已经包含在 git for windows 里了，额外你只要安装 Pandoc；2）如果你使用 Linux 操作系统，只要安装 Pandoc（官方源里的太旧）。如何生成这个“网站”，具体参考 district10/blog#Build one / 从 Markdown 源码生成。

当然其它的博客工具通常都很酷炫，如果你要的是那种，可以用 Hexo、Jekyll。本博客生成器比他们简单得多，而且不是 responsive design，在手机上或许惨不忍睹²。但好处是兼容性好、稳定、也不太难看。字体的选择和配色我也是拼了老命改了很久³，不然怎么能像现在一样动人。

建议快速看一下博客的特性，再到 我要来一个 章节看如何在 Windows/Linux 上安装使用，备份在 GitHub，托管到七牛云盘。

支持的特性

增强的 Mardown

强调

• 加粗、斜体，或者一起用
• 2¹⁰ = 2014 ==> 2¹⁰ = 1024, H₂O 和 \(H_2O\) 都是生命之源⁴
• 三种连字符：1 - 1，1 – 8，1 — one（hyphen, en-dash，em-dash）
• Small caps
• c-x 在 Emacs 里指的是 Control-X

强调

:   * **加粗**、*斜体*，或者***一起用***
    * ~~2^^10^^ = 2014~~ ==> 2^^10^^ = 1024, H~2~O 和 $H_2O$ 都是生命之源[^water]
    * 三种连字符：1 - 1，1 -- 8，1 --- one（hyphen, en-dash，em-dash）
    * <span style="font-variant:small-caps;">Small caps</span>
    * <kbd>c-x</kbd> 在 Emacs 里指的是 Control-X

[^water]: 看上去不一样，其实都是“水”。

列表

有序列表

1. Stay hungry
2. Stay foolish

无序列表

• All work and no play
• makes Jacky a dull boy

一起用

1. one
2. two
   • two-one
   • two-two
3. three
   1. three-one
   2. three-two

表格

这部分的 CSS 我还没有调好，只是勉强能用。

Right	Left	Default	Center
12	12	12	12
123	123	123	123
1	1	1	1

引用

下面这段来自Terminator 2（终结者）

The future has not been written. There is no fate but what we make for ourselves. I wish I could believe that. My name is John Connor, they tried to murder me before I was born, when I was 13 they tried again. Machines from the future. Terminators…

章节

header 1–6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Markdown 中使用 HTML

下面是一个 <div style="background-color=violet"> 的 HTML 标记：

一个“黑纸白字”的段落

你可以用 HTML 标记来加粗、斜体或者改变文字的 颜色、 字号、 font family 还可使用 Markdown，如下：

注：这些文字在一个 <div markdown="1" style="background-color:yellow;margin:10px;"> 中用 Markdown 写成

可以 加粗 也可以 斜体

甚至可以使用 Pandoc Markdown 的上下标（以及列表）：

• 2¹⁰ = 2014
• 2¹⁰ = 1024
• H₂O 是生命之源

Key	Value	Notes
Foo	fool	第一列居中
Bar	barbaric	第二列右对齐
Cup	cap cup c u dummy	第三列左对齐

页内引用

点我 回到“与众不同”小节（这是定制的 tag）

点我 回到“支持的特性”小节（这是自动生成的 tag），具体看 源码。

列表自动编号

1. one
2. two

9. Ninth
10. Tenth
11. Eleventh
    1. subone
    2. subtwo

    3. subthree

    4. one

    5. two

    9. Ninth
    10. Tenth
    11. Eleventh
        1. subone
        2. subtwo
        3. subthree

上面列举特性用的都是“名词解释”这一特性，“名词解释”的基本写法是：

Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

        Third paragraph of definition 2.

(@)  My first example will be numbered (1).
(@)  My second example will be numbered (2).

Explanation of examples.

(@逗你玩)  My third example will be numbered (3).
Numbered examples can be labeled and referred to elsewhere in the document:

(@)  This is a good example.

As (@逗你玩) illustrates, ...

写出来就是：

Term 1

Definition 1

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

1. My first example will be numbered (1).
2. My second example will be numbered (2).

Explanation of examples.

3. My third example will be numbered (3). Numbered examples can be labeled and referred to elsewhere in the document:

4. This is a good example.

As (3) illustrates, …

-------------------------------------------------------------
 Centered   Default           Right Left
  Header    Aligned         Aligned Aligned
----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here's another one. Note
                                    the blank line between
                                    rows.
-------------------------------------------------------------

Table: Here's the caption. It, too, may span
multiple lines.

四种链接的方式：

one, and two and three and four

（代码的最大宽度超过了 80 chars，就超了边界，这个我觉得不是本博客生成器的 bug。Keep the rule!）

[one][my label 1], and [two][my label 2] and [three][my label 3] and [four][my label 4]

[my label 1]: /foo/bar.html  "My title, optional"
[my label 2]: /foo
[my label 3]: http://fsf.org (The free software foundation)
[my label 4]: /bar#special  'A title in single quotes'

my website is good, even my website is good, even this.

Hash Tag⁵

• See above
• See table
• See codetag

[my website][]  is good, even [my website] is good, even [this].

Hash Tag^[其实在 weibo/twitter 上才叫 hash tag，这里或许应该叫 section ref link。]

* See [above]
* See [table](#table)
* See [codetag](#codetag)

[my website]: /shit
[good]: /bar/baz <good>
[this]: /baz
[above]: #good

段落内的图片，caption 不显示：

单独一段的图片，显示 caption：

standalone-pic-small-one

当然，也可以不显示：

段落内的图片，caption 不显示： ![inline-pic-without-showing-this-text]

单独一段的图片，显示 caption：

![standalone-pic-small-one]

当然，也可以不显示：

![][standalone-pic-big-one]

[inline-pic-without-showing-this-text]: http://gnat-tang-shared-image.qiniudn.com/emoji/11.gif
[standalone-pic-small-one]: http://gnat.qiniudn.com/dexter.jpg
[standalone-pic-big-one]: http://gnat.qiniudn.com/jodie-foster-math.png "本来想用 Gatsby 挥拳打 Tom 的图片"

代码高亮

行内高亮特别赞。比如一点 Bash 脚本：echo -e "hello\nworld" | sort，或者一点 HTML：<h1 id="hello-pandoc">HTML code</h1>。

还有 C++

void Twin::flipLeftRight()
{
    if ( !valid ) { return; }
    oxo();
    cv::flip( m[src()], m[dst()], 1 );
    log += "-flipLeftRight";
}

可以有行号：

100
101
102
103

def widthHeightDividedBy(image, divisor):
    """Return an image's dimensions, divided by a value."""
    h, w = image.shape[:2]
    return (w/divisor, h/divisor)

看 这段代码 高亮得多好啊！

数学公式

不管用了多少年的 M$ Word，总有一天写论文你要用 \(\LaTeX\)，那就从 MathJax 开始练习吧。

\[ \begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix} \]

\[ f(n) = \begin{cases} n/2, & \text{if $n$ is even} \\ 3n+1, & \text{if $n$ is odd} \end{cases} \]

访问 MathJax 参考更多使用方法。

如果你要手工给 HTML 添加 MathJax 功能，需要在页面中加入

<script type="text/javascript"
         src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

我要来一个

因为我的博客生成器还在不断完善中，这部分先隐藏了。详见 district10/blog。

致谢

感谢我喜欢的一些网站如 简书 - 交流故事，沟通想法， LOFTER（乐乎） - 每个人的理想国，我从上面扣了一些 CSS，感谢 七牛云存储 - 移动时代的云存储服务商，感谢 Pandoc，感谢 GNU Make 以及 Git，感谢 GitHub、 MathJax。我们这个时代真是太牛逼了，开源社区有这么多好用的工具。

其它

Pandoc 的引用功能这里没有介绍。本博客支持用 bib 文件（可以从 Mendeley 导出）引用参考文献。

Refs

1. Pandoc Markdown Official Site
2. The pandoc-siteproc package
3. Art of Problem Solving - LaTeX: Symbols
4. Art of Problem Solving - LaTeX: Commands
5. 我以前的博客（已经下线）

• blog