theme

这是一篇效果示例文章

这篇文章，主要展示各种排版效果。

代码的效果

这里使用了jekyll默认的引擎rouge来处理代码高亮。

使用rouge的好处就是这是jekyll 3.0的默认代码高亮插件，放在github上面能直接识别，不需要转码成html。

缺点就是默认不带有css，但是网页上代码已经被各种span包裹了各种class样式类。这样我们只需要自己找一个合适的css就行啦~

CSS样式，使用的是 monokai github风格。可以使用ruby自己生成。具体生成*.css方法，请参见rouge-github。

主要参考这两行。

1
2
$ rougify foo.rb
$ rougify style monokai.sublime > syntax.css

在simack 1.0版本中，我更换为github风格，因为颜色更加协调。

我自己用js给代码加入了行号。

其实还加入了copy和raw功能，但是发现，copy功能除了IE外，需要flash插件。最终我决定放弃这些不太重要的功能了。

好了，看看css的最终效果。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

</body>
</html>
1
2
3
4
5
6
for (i = 0; i < 10; i++) {
  if (i == 3) {
    break;
  }
  x = x + "The number is " + i + "<br>";
}

如果是不支持的语法，那么会是这样子 浅色的 代码无任何样色标注~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
lbl1.Text="Your name is " & txt1.Text
End Sub
</script>
<html>
<body>

<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>

</body>
</html>

表格的效果

这是一个标准的表格效果。

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

引用的效果

jekyll是一个简单的免费的Blog生成工具，类似WordPress。

但是和WordPress又有很大的不同，原因是jekyll只是一个生成静态网页的工具，不需要数据库支持。但是可以配合第三方服务,例如Disqus。

最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。

文本、图片和链接

jekyll环境搭建并不是很困难的！

例如你可以看这里：

这里是jekyll的中文网站

jekyll

列表效果

这是一个无序列表

  • 苹果

  • 香蕉

  • 桃子

这是一个有序列表

  1. 编写README.md

  2. 整理示例文章

  3. 提交到github