個人 jekyll 博客自定義配置：代碼高亮、公式表格渲染、圖片居中陰影

之前基於 Jekyll 模板的博客圖片不能居中也沒陰影效果、數學公式和表格也不能渲染、文字排版看起來也不太舒服，代碼高亮不是很明顯，所以今天找了點代碼，簡單配置了下，一併解決！

一、 圖片居中加陰影

第一種方式是在 md 文檔內部用居中的標籤，這樣圖片就居中顯示了：

<div  align="center">
<img src="img_url"/>
</div>

不過這樣需要對每個圖片都操作一遍，太麻煩了，所以我直接在博客的主題樣式文件 style.css 中加上了圖片居中和添加陰影的效果，看起來比較美觀：

.markdown-body img { 
  /* 圖片居中 */
  clear: both;
  margin: 0 auto;
  display: block;

  /* 添加圖片陰影 */
  box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
  o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}

這是居中加陰影的效果，還不錯吧。

二、渲染數學公式

寫機器學習博客的時候，需要大量使用公式，所以渲染公式很有必要，我在 include/head.html 中加上以下代碼：

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      inlineMath: [['$','$']]
    }
  });
</script>

這是公式渲染效果，也還可以：

$h_{\theta} \left( x \right)={\theta_{0}}+{\theta_{1}}{x_{1}}+{\theta_{2}}{x_{2}}+{\theta_{3}}{x_{3}}$

三、渲染表格

寫博客的時候突然發現表格也沒法渲染，所以又到網上找了些代碼，然後寫到 style.css 文件中：

table {
  padding: 0; 
  width: 100%;
}

table tr {
  border-top: 1px solid #cccccc;
  background-color: white;
  margin: 0;
  padding: 0; 
}

table tr:nth-child(2n) {
  background-color: #f8f8f8; 
}

table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px; 
}

table tr td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px; 
}

table tr th :first-child, table tr td :first-child {
  margin-top: 0; 
}

table tr th :last-child, table tr td :last-child {
  margin-bottom: 0; 
}

這樣就能渲染表格了，還可以不是很醜：

四、調整文字排版

正文部分字間距太小了，看起來很累，行間距也挺小，而且兩端也沒有對齊，也在 style.css 中統一調整下，添加如下代碼：

.markdown-body {
  /* 字間距 1 */
  letter-spacing: 1px;

  /* 行間距 1.6 */
  line-height: 1.6;

  /* 文字兩端對齊 */
  text-align: justify;
}

五、代碼高亮

之前的代碼高亮不太顯眼，這次換成 sublime 風格了，就是上面的代碼風格，在網上找了下配置步驟：

5.1 安裝 rouge

我的博客好像默認裝過了，就沒執行這步：

gem install kramdown
gem install rouge

5.2 配置 _config.yml

emmm…，這一步我測試加不加都行，可能我的 jekyll 剛升級過，默認支持這些，如果你的不行的話，就加上試試：

highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

5.3 生成 rouge css 風格文件

使用下面的命令生成需要的 css 文件，其實我就執行了這一行代碼，可能前面的東西我之前都裝過了：

#                css 主題           生成的文件名
rougify style monokai.sublime > syntax_monokai.css

支持的 css 主題可以使用 help 命令查看：

rougify help style

然後將生成好的 css 文件拷貝到博客的 style 樣式目錄下，再到 include/head.html 文件頭部引用這個新的 css 文件就行了：

<link href='{{ site.url }}/stylesheets/syntax_monokai.css' rel='stylesheet' type='text/css' />

當然你的目錄名稱可能跟我的不一樣，但是基本都差不多的，找到 style 目錄和 head.html 文件基本就對了，現在碼字看起來就舒服多了 ^_。

本文原創首發於 同名微信公號「登龍」，微信搜索關注回覆「1024」你懂的！