終于搞定了使用 MathJax 渲染 LaTex 數(shù)學公式的問題退子，分享給大家岖妄。

辛辛苦苦用 markdown 寫就了一系列文章，怎么樣導出制作成一本高顏值的電子書呢寂祥？本文介紹一種在 Mac 下使用 kitabu + princexml 導出高顏值電子書的方法荐虐。

本文還介紹了字體定制，排版定制丸凭，代碼高亮福扬，使用 MathJax 渲染 LaTex 數(shù)學公式等方法。

安裝軟件

首先安裝 kitabu

gem install kitabu

這是個開源的 Ruby 包惜犀，主要提供電子書模板和制作過程自動化的功能铛碑。如果你沒使用過 ruby ，可能在使用 gem install kitabu 時報錯 Errno::ECONNRESET: Connection reset by peer虽界，可以試試切換 taobao 的 RubyGems 鏡像：

$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org

接著安裝 princexml汽烦，可以從官網(wǎng) princexml.com 下載免費的安裝包。princexml 會完成從 html 轉(zhuǎn)為為 pdf 功能莉御。安裝完這兩個工具后撇吞，可以用 kitabu check 命令檢查一下是否安裝成功：

bogon:~ kamidox$ kitabu check

Prince XML: Converts HTML files into PDF files.
Installed.

KindleGen: Converts ePub e-books into .mobi files.
Installed.

html2text: Converts HTML documents into plain text.
Not installed.

我的環(huán)境里多安裝了 KindleGen 俗冻，如果你需要制作 .mobi 格式的電子書，可以使用 brew install kindlegen 來安裝牍颈。不過這一步不是必須的迄薄。

制作電子書

接著在工作目錄執(zhí)行 kitabu new mybook 即可創(chuàng)建 kitabu 電子書的模板：

mybook/
├── Gemfile
├── Guardfile
├── config
│   ├── helper.rb
│   └── kitabu.yml
├── fonts
├── images
│   ├── kitabu-icon.png
│   ├── kitabu-icon.svg
│   ├── kitabu-word.png
│   ├── kitabu-word.svg
│   ├── kitabu.png
│   └── kitabu.svg
├── output
├── templates
│   ├── epub
│   │   ├── cover.erb
│   │   ├── cover.png
│   │   └── page.erb
│   ├── html
│   │   └── layout.erb
│   └── styles
│       ├── epub.scss
│       ├── files
│       │   └── _normalize.scss
│       ├── html.scss
│       ├── pdf.scss
│       └── print.scss
└── text
    ├── 01_Getting_Started.md
    ├── 02_Creating_Chapters.md
    ├── 03_Syntax_Highlighting.erb
    ├── 04_Dynamic_Content.erb
    └── 05_Exporting_Files.md

然后在 mybook 目錄運行 kitabu export 即可在 output 目錄下生成電子書了。默認情況下煮岁，會生成 kitabu 使用說明文檔噪奄。

基礎配置

要制作自己的電子書，需要做些簡單的配置人乓。先把 kitabu 模板的 text 目錄清空，然后把自己的 markdown 文件拷貝到這個目錄下都毒，需要注意的是 kitabu 是使用文件名排序生成電子書色罚，并且會自動把 2-6 級標題自動生成書籍的目錄。如果你的 markdown 文件是以 1 級標題開始账劲，則需要把所有的標題降一個等級戳护。

接著修改 config/kitabu.yml 把書箱的作者，版權聲明瀑焦，出版商的信息補充完整腌且。然后修改 templates 目錄下的 css 文件，讓生成的電子書更漂亮榛瓮。

我自己主要修改兩處铺董。一是修改 templates/styles/pdf.scss，在所有的 font-family 字段里添加 PingFang SC禀晓，以便使用 Mac 的蘋方字體來顯示中文精续，默認字體中文效果比較差。比如：

body {
  font-family: Caslon, serif;
  font-size: 14px;
  line-height: 1.5;
}

改成

body {
  font-family: PingFang SC, Caslon, serif;
  font-size: 14px;
  line-height: 1.5;
}

二是修改圖片的寬度粹懒，以便電子書里的圖片能自動縮放重付，避免大圖片顯示不全的問題。這個主要是修改 templates/styles/files/_normalize.scss：

img {
  border: 0;
}

改成：

img {
  border: 0;
  width: 100%;
}

這樣生成的電子書顏值就很高了凫乖。如果你是前端工程師确垫，折騰一下 css 可以做出更精美的電子書。

在電子書中插入圖片

另外帽芽，我自己寫作過程中删掀，直接把圖片放在本地目錄，然后使用相對路徑在 markdown 里生成圖片嚣镜，比如：

![](images/ch02.01.png)

否則就得找圖床爬迟，生成電子書時還會從圖床下載圖片。所以直接放在本地菊匿，用相對路徑引用是個相對經(jīng)濟的方案付呕。默認情況下计福，kitabu 是不認本地相對路徑的圖片的。這時需要 hack 一下 kitabu徽职，因為默認情況下象颖，kitabu 啟用了安全鏈接的功能，我們可以把這個功能關閉掉姆钉。

首先找到 kitabu 包的安裝目錄说订，可以使用 gem help install 命令，然后在輸出中找 --install-dir 字段潮瓶，比如我的機器上有這樣的輸出：

$ gem help install
  ... ...
  Defaults:
    --both --version '>= 0' --document --no-force
    --install-dir /usr/local/lib/ruby/gems/2.3.0 --lock

然后進入 /usr/local/lib/ruby/gems/2.3.0/gems/kitabu-2.0.4/ 目錄陶冷，打開 lib/kitabu/markdown.rb 文件，把

renderer = Renderer.new(hard_wrap: true, safe_links_only: true)

修改為

renderer = Renderer.new(hard_wrap: true, safe_links_only: false)

支持 LaTex 公式

MathJax 是一個 JavaScript 庫毯辅，用來渲染 LaTex 格式的數(shù)學公式埂伦。如果你想了解怎么樣在 Markdown 里書寫數(shù)學公式，可以參考我之前的一篇博客 《使用 Markdown + MathJax 在博客里插入數(shù)學公式》思恐。

默認情況下沾谜，kitabu 無法在渲染使用 MathJax 在 markdown 里書寫的數(shù)學公式。其原因是 princexml 不支持 Window 等對象胀莹，所以 MathJax 的 JavaScript 腳本無法執(zhí)行基跑。

解決這個問題的思路是，使用 Phantomjs 來渲染包含 LaTex 數(shù)學公式的 html 頁面描焰，由于 Phantomjs 可以正確地執(zhí)行 MathJax 的 JavaScript 腳本媳否，所以能正確地渲染出數(shù)學公式。接著再使用 princexml 來生成 PDF 格式的電子書就可以正確地渲染出數(shù)學公式了栈顷。思路很簡單逆日，操作起來還是有點麻煩。

首先萄凤，安裝 Phantomjs 工具室抽，可以在官網(wǎng)下載安裝適合你的操作系統(tǒng)的版本。在 macOS 上靡努，下載下來的是一個綠色安裝包坪圾，我把它放在硬盤的合適位置后，把 /bin/phantomjs 加入到 PATH 變量里惑朦，以便在命令行中能直接執(zhí)行這個命令兽泄。

$ tree ~/tools/phantomjs/
~/tools/phantomjs/
├── ChangeLog
├── LICENSE.BSD
├── README.md
├── bin
│   └── phantomjs
├── examples

接著，安裝 MathJax 漾月，方法是把 MathJax 下載到電子書的目錄病梢。比如，你使用 kitabu new mybook 時，則把 MathJax 下載后解壓到 mybook 目錄下蜓陌，我使用的是 MathJax 2.7.0 版本觅彰。

接著，再把 MathJaxRender.js 和 MathJaxConfig.js 也下載到 mybook 目錄下钮热。這兩個分別是 phantomjs 渲染腳本和 MathJax 配置文件填抬。需要特別注意，MathJaxConfig.js 不要修改文件名隧期，如果修改了文件名飒责，很多引用的地方也要跟著同步修改。

接著仆潮，還要 hack 一下 kitabu宏蛉，其目的是配置 Redcarpet (這是把 markdown 轉(zhuǎn)成 html 的 ruby 庫)，關閉智能腳本渲染性置，即把 superscript 改為 false 檐晕，否則會和 MathJax 沖突。

方法是進入 /usr/local/lib/ruby/gems/2.3.0/gems/kitabu-2.0.4/ 目錄蚌讼，打開 lib/kitabu/markdown.rb 文件，把

    self.processor = Redcarpet::Markdown.new(renderer, {
      tables: true,
      footnotes: true,
      space_after_headers: true,
      superscript: true,
      highlight: true,
      strikethrough: true,
      autolink: true,
      fenced_code_blocks: true,
      no_intra_emphasis: true
    })

修改為

    self.processor = Redcarpet::Markdown.new(renderer, {
      tables: true,
      footnotes: true,
      space_after_headers: true,
      superscript: false,
      highlight: true,
      strikethrough: true,
      autolink: true,
      fenced_code_blocks: true,
      no_intra_emphasis: true
    })

最后个榕，修改 mybook/templates/html/layout.erb 文件篡石，以便在模板里引入 MathJax 及其配置文件，方法是在其 head 標簽下插入如下內(nèi)容西采，

    <!-- add LaTeX support by MathJax -->
    <script type="text/javascript" src="../MathJax/MathJax.js"></script>
    <script type="text/javascript" src="../MathJaxConfig.js"></script>

即凰萨，把

  <head>
    <title><%= title %></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link name="stylesheet" rel="stylesheet" type="text/css" href="styles/html.css" />
    <meta name="author" content="<%= authors.join(', ') %>" />
    <meta name="subject" content="<%= subject %>" />
    <meta name="keywords" content="<%= keywords %>" />
    <meta name="date" content="<%= published_at %>" />

    <%= highlight_theme %>
  </head>

改成

  <head>
    <title><%= title %></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link name="stylesheet" rel="stylesheet" type="text/css" href="styles/html.css" />
    <meta name="author" content="<%= authors.join(', ') %>" />
    <meta name="subject" content="<%= subject %>" />
    <meta name="keywords" content="<%= keywords %>" />
    <meta name="date" content="<%= published_at %>" />
    <!-- add LaTeX support by MathJax -->
    <script type="text/javascript" src="../MathJax/MathJax.js"></script>
    <script type="text/javascript" src="../MathJaxConfig.js"></script>

    <%= highlight_theme %>
  </head>

完成這些步驟后，我的電子書目錄看起來像這樣：

mybook/
├── Gemfile
├── Guardfile
├── MathJax
│   └── MathJax.js
├── MathJaxConfig.js
├── MathJaxRender.js
├── build-ebook.sh
├── config
├── fonts
├── images
├── output
├── templates
└── text

build-ebook.sh 的內(nèi)容是這樣的：

kitabu export --only=pdf
cd output
phantomjs ../MathJaxRender.js kitabu-ebook.pdf.html | prince --javascript -o ml-scikit-learn.pdf -
cd ..

其中調(diào)用 phantomjs 的那行命令就是用來生成帶數(shù)學公式的電子書的械馆。不要忘記了這個命令最后還有一個 - 字符胖眷，意思是從 stdin 里讀取輸入來轉(zhuǎn)換為 PDF。

參考文檔： Using MathJax with PrinceXML

結語

差不多就這些霹崎。奮力寫作吧珊搀，只為自己成為自己的出版商。