博客新特性更新

新博客模板或许作者不更新了，部署了之后发现了一些bug。让一个程序员做前端的细节优化还真是耗时间呐，ok这次更新主要集中在以下三方面：

1. 解决代码显示问题
2. 更改高亮样式
3. 添加latex公式支持

更改高亮样式

使用rouge重新生成了github样式，喜欢这种简明的风格，也很简单。 rouge专注语法高亮，纯ruby代码，支持主题在https://github.com/jneen/rouge/tree/master/lib/rouge/themes可以找到。以github样式为例子。

rougify style monokai.sublime > syntax.css

将syntax.css替换原来的文件即可。这里在github样式基础上把background-color设置为纯白，这样显得更简洁。

解决代码显示问题

kramdown可以像其他标准markdown一样提供代码模块，通过’`‘或者‘~’或者连续空格来展开代码书写，最后解析成含<pre>的html语句。但作为一个程序员怎么能忍受没有行号的代码呢。jekyll原生的显示行号代码标注符号为

(%highlight python linenos%) 代码。。。
(% endhighlight %)

但估计是后来作者更新后的漏洞，显示样式是这样的：

1
2
3
4
def foo:
  puts 'foo' 
a=[1,2,3]
print(a)

看一下解析的源码,嵌套层次是<figure><pre><code><div><table><tbody><tr><td><pre>然后再显示代码疯了吧，果断不用这个语法。用原声<pre>语法改下,通过css来增加行号。实践过程中发现css的强大之处：伪选择器。在syntax.css中加入了linenumber的样式方案。js做的主要根据代码行数加入span标签，具体看博客源码提交描述为“特性2”的更新部分。现在可以通过最原始的插入代码方法，让代码显示如下：

1
2
3
def foo:
  puts 'foo'  
a=[1,2,3]

以上是python显示方式，如果在```之后没有加语言类型标注，css默认把行号和高亮去掉，并且取消缩进，显示如下格式。

1
2
3
def foo:
  puts 'foo'  
a=[1,2,3]

添加latex公式支持

虽然kramdown支持解析公式，但需要mathjax支持显示。考虑搞算法的避免不了公式，轻量级公式怕支持度不够，于是装上了mathjax。注意到代码太长也不怕喽，支持滚动哟。

1
2
3
4
5
6
7
8
9
10
<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
  tex2jax: {
  inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
  } 
}); 
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">

可以很好的支持公式显示，通过

1
2
3
<script type="math/tex; mode=display">
O(g(n)) = \{f(n): \exists c,n， \forall n \geq n_0,  0 \leq f(n) \leq cg(n)\}
</script>

或者

1
2
$$公式行居中$$
$公式$

$O(g(n)) = {f(n): \exists c,n， \forall n \geq n_0, 0 \leq f(n) \leq cg(n)}$

• ← Previous Post
• Next Post →