跳到主要内容

这是一篇效果示例文章

· 阅读需 3 分钟

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

代码的效果​

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

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

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

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

主要参考这两行。

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

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

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

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

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

<!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>
for (i = 0; i < 10; i++) {
  if (i == 3) {
    break;
  }
  x = x + "The number is " + i + "<br>";
}

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

<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>

表格的效果​

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

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

引用的效果​

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

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

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

文本、图片和链接​

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

例如你可以看这里：

这里是jekyll的中文网站

jekyll

列表效果​

这是一个无序列表

  • 苹果

  • 香蕉

  • 桃子

这是一个有序列表

  1. 编写README.md

  2. 整理示例文章

  3. 提交到github