StackEdit 自定 CSS 匯出 HTML Template

StackEdit 是一個所見即所得的線上 Markdown 編輯器，在先前的文章已有許多的介紹。身為程式設計在寫筆記的時候更是需要像這樣的工具，讓我們更能聚焦在內容上並且能運用 highlight.js 來標註程式碼。

檔案分享的方法

Google 雲端硬碟、Dropbox

我們更可以將筆記透過 StackEdit 直接發佈至 Google Blogger 上，或是儲存在自己的 Google 雲端硬碟、Dropbox 等等的位置。

Gist、StackEdit Viewer

如果需要將資料分享給其他沒有安裝 Markdown Viewer 的人，除了使用上述的方法，我們也可以將檔案發佈至 Gist ，或是將我們的 Markdown 檔案放至網路，透過 StackEdit 的 Viewer 將網址引入直接使用瀏覽器觀看。Ex：Here 。

https://stackedit.io/viewer#!url=[放置 Markdown 檔案的 URL 位址]

PDF

StackEdit 的 PDF 功能是需要透過雲端的轉換（透過 Pondoc + LaTex 實踐），對於這個部分的功能是贊助者項目，如果覺得 StackEdit 好用，很建議大家贊助讓他們可以更長久的經營。另外一個方式，是利用 StackEdit Viewer + Chrome Browser 來實踐。

開啓 Chrome Browser
開啓 StackEdit Viewer：Menu –> StackEdit Viewer
在 Viewer 模式下開啓列印
選擇「Save as PDF」

HTML

另外一種跨平臺支援的方式是使用 HTML，只要是有瀏覽器都可以觀看，而且透過 CSS 可以改變成我們自己想要變化的風格。也是今天主要想和大家分享的方法。

使用自定的 CSS 匯出 HTML 檔案

StackEdit 匯出 HTML 的方式所匯出的檔案是很陽春白白靜靜的檔案，無論字型還是區塊安排都會有一點點的悲劇。還好，它還提供了一個以自定 Template 來匯出 HTML 的方式，讓我們有機會透過自定的 CSS 檔來完整個 HTML 檔的佈局。

自定的方式需要準備兩個主要的內容，HTML Template 和 Markdown CSS。

HTML Template

我的 HTML Template 如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= documentTitle %></title>

<link rel="stylesheet" type="text/css" href="***[user define css file url]***">

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/monokai_sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

<!--
To use prettify.js uncomment this part and comment the previous script
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
-->

</head>
<body><%= documentHTML %></body>
</html>

請以上面的 Template 的內容取代 StackEdit Default template 的設定。這份 Template 使用 Highlight.js 作為程式碼標註，如果想使用 Google 的 Code-prettify（prettify.js）只要交換註解的部分即可。

Note:
1. 將 ***[user define css file url]*** 的內容取代為自己 CSS 的 URL位址。
2. 上述 Template 在 highlight.js 的部分是使用 sublime monokai 的顏色主題。

Default template 的設定：

Menu –> Settings

Settings 對話視窗 –> Advance

Advance –> Default template

Markdown CSS

我自定的 CSS 檔內容如下，歡迎複製存檔後傳至自己的網路空間（我是放在 Google 雲端硬碟中），在 Template 中設定好路徑即可。

/* 
 * Copyright 2015 ninthday.
 * Version： 1.2
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * Some content is copyrighted by Twitter, Inc., and also released under an
 * Apache License; these sections are noted in the source.
 * 
 * The CSS is based on this template:
 * http://pacinispace.blogspot.tw/2013/07/write-in-markdown-stackedit-with-custom.html
 *[(Copyright 2013 Alex Pacini unless otherwise noted.
 * Licensed under the Apache License, Version 2.0 (the "License");]
 * http://kevinburke.bitbucket.org/markdowncss/
 *[(Copyright 2011 Kevin Burke unless otherwise noted.
 * Licensed under the Apache License, Version 2.0 (the "License");]
 * Then it was extended to cover the Markdown Extra and applied some light changes.
 */
html{
    font-size: 62.5%;
}
body{
    margin: 0 auto;
    /*font-family: Georgia, Palatino, serif;*/
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    color: #444444;
    line-height: 1.3;
    max-width: 960px;
    padding: 30px;
    font-size: 1.6rpm;
}

h1, h2, h3, h4 {
    color: #111111;
    font-weight: 400;
}
h1, h2, h3, h4, h5, p {
    margin-bottom: 24px;
    padding: 0;
}
h1 {
    font-size: 4.8rem;
}
h2 {
    font-size: 3.6rem;
    /* The bottom margin is small. It's designed to be used with gray meta text
     * below a post title. */
    margin: 24px 0 6px;
}
h3 {
    font-size: 2.8rem;
}
h4 {
    font-size: 2.4rem;
}
h5 {
    font-size: 2rem;
}
a {
    color: #0099ff;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
}
img[alt=banner] {
    width: 100%;
    height: 100%;
    margin-left: -10%;
}
a:hover {
    text-decoration: none;
    color: #ff6600;
}
a:visited {
    color: purple;
    text-decoration: none;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 1.1em;
}
li {
    line-height: 2.4rem;
}
li ul, li ol {
    margin-left: 1.2rem;
}

p, ul, ol {
    font-size: 1.6rem;
    line-height: 1.5;
    max-width: 800px;
}

pre {
    border-radius: 4px;
    padding: 10px 24px;
    max-width: 800px;
    white-space: pre-wrap;
}

pre code {
    line-height: 1.7;
    font-size: 14px;
    font-family: "Source Code Pro", Consolas, monospace;
}

pre code, pre.prettyprint code{
    background-color:transparent !important;
}

pre.prettyprint {
    background: #23241f;
}

code {
    border-radius: 4px;
    font-size: 1.6rem;
    color: #3f3f3f;
    padding: 2px 4px;
    background-color: rgba(128,128,128,0.09);
}

aside {
    display: block;
    float: right;
    width: 390px;
}

blockquote {
    border-left: 10px solid #eee;
    padding: 15px 20px;
    margin-left:0;
    background-color: rgba(128,128,128,0.06);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

blockquote cite {
    font-size:14px;
    line-height:20px;
    color:#bfbfbf;
}
blockquote cite:before {
    content: '\2014 \00A0';
}

blockquote p {  
    color: #666;
    margin:0 0 1.1rem;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child{
    margin-bottom:0;
}

hr{
    margin-top:21px;
    margin-bottom:21px;
    border:0;
    border-top:1px solid rgba(128,128,128,0.3)
}

dt {
  font-weight: bold;
}

dt, dd {
    margin-top: 5px; 
    margin-bottom: 10px;
    font-size: 1.6rem;
}

dd {
    margin-left: 40px;
}

table {
    margin-bottom: 20px;
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    font-size: 1.6rem;
}

table th,
table td {
    padding: 10px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

table th {
    font-weight: bold;
}

table thead th {
    vertical-align: bottom;
}

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody + tbody {
    border-top: 2px solid #dddddd;
}

.footnote {
    vertical-align: top;
    position: relative;
    top: -0.5em;
    font-size: 0.8rem;
}

.tooltip li {
    line-height: 1.4;
}

.toc ul {
    list-style-type: none;
    margin-bottom: 1.1rem;
}

.sequence-diagram,
.flow-chart{
    text-align:center;
    margin-bottom:1.1rem
}

.sequence-diagram text,
.flow-chart text{
    font-size:15px !important;
    font-family:"Source Sans Pro",sans-serif !important;
}

.sequence-diagram [fill="#ffffff"],
.flow-chart [fill="#ffffff"]{
    fill:#f8f8f8;
}

.sequence-diagram [stroke="#000000"],
.flow-chart [stroke="#000000"]{
    stroke:#3f3f3f;
}

.sequence-diagram text[stroke="#000000"],
.flow-chart text[stroke="#000000"]{
    stroke:none;
}

.sequence-diagram [fill="#000"],
.flow-chart [fill="#000"],
.sequence-diagram [fill="#000000"],
.flow-chart [fill="#000000"],
.sequence-diagram [fill="black"],
.flow-chart [fill="black"]{
    fill:#3f3f3f;
}

Note:
這個 Markdown CSS 是參考 Pacini’s Space 文章，再做了不少的修改。

修改加強了對於中文的設定

整個系統單位使用 rem 的方式取代 px

調整相關 Highligh.js 顯示設定

UML 圖形跑版的調整

補上 dt, dd 設定

Note 區塊的寬度限制

分割線的顏色比重與寬度限制

將 pre code 的設定獨立

StackEdit 的 Hello! 文件，在套用我的 Markdown CSS 後的樣子（Live Preview）。原先 Pacini 的版本。

Open Jiang

搜尋此網誌