每次写leetcode题解都要新发一篇post,感觉timeline显得特别杂乱,于是打算用GitBook整理一下。

效果:http://intzero.net/leetcode

GitHub:https://github.com/lszero/gitbook-leetcode-solutions

Getting started

首先确保已经配置了Node.js环境。

参见官方文档:Setup and Installation of GitBook

(1) Install GitBook with NPM

$ npm install gitbook-cli -g

(2) Create a book

$ gitbook init ./directory
$ gitbook serve
# 或者
$ gitbook build

Plugins

中文搜索

使用search-pro插件进行中文搜索。

新建 book.json,输入:

{
    "plugins": [
      "-lunr", "-search", "search-pro"
    ]
}

然后安装插件:

$ gitbook install ./directory

修改代码高亮

使用 Prism Plugin

{
    "plugins": [
      "-highlight", "prism"
    ],
    "pluginsConfig": {
      "prism": {
        "css": [
          "prismjs/themes/prism-okaidia.css"
        ]
      }
    }
}

其中,-highlight表示禁用原来的高亮插件。

这里选用的theme为prism-okaidia


一些修改:

(1)修改code block 行距:

vi ./node_modules/prismjs/themes/prism-okaidia.css

将其中的line-height: 1.5;改为line-height: 1.2;

(2)对pre不高亮:

vi ./node_modules/gitbook-plugin-prism/index.js

原插件是将所有的pre都加了class="language-",然后在css里识别pre class="language-"从而高亮。

我这里改为若code中没有指明代码语言,则不要在pre里添加class="language-"

$('pre').each(function() {
    highlighted = true;
    const $this = $(this);
    $this.addClass('language-');
});

改为:

$('pre').each(function() {
    const $this = $(this);
    highlighted = true;
    var className = $this.children("code").attr('class');
    // console.warn("className: " + className);
    if(className){
        $this.addClass('language-');
        $this.addClass(className.length);
    }
});

自定义css

参见:How can I include custom CSS?

在你的gitbook根目录下新建:

  • styles/website.css: will apply only to the website
  • styles/pdf.css: will apply only to the PDF
  • styles/ebook.css: will apply only to ebook formats (PDF, Mobi, ePub)

我自己做的一些修改:vi styles/website.css

.markdown-section pre {
    background: #fff;
    border: 1px solid #ccc;
    line-height: 1.2;
}

.markdown-section :not(pre) > code {
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 90%;
}

pre[class*="language-"] {
    background: #272822;
    border: none;
}