Use StackEdit to edit blog

This is the "Welcome" document of StackEdit, posted from StackEdit website.

Welcome to StackEdit! {#welcome}
=====================

Hello, I am your first Markdown document within **StackEdit**[^stackedit]. Don't delete me, I can be helpful. I can be recovered anyway in the `Utils` tab of the `Settings` dialog.

----------

Documents
---------

**StackEdit** stores your documents in your browser local storage, which means all your documents are automatically saved locally and are accessible offline.

> **NOTE:** This also means that your documents are not shared between different browsers or computers and that clearing your browser's data may **delete all of them!**

#### Create a document

You can create a new document by clicking the button in the navigation bar. This will switch from the current document to the new one.

#### Switch to another document

You can list all your local documents and switch from one to another by clicking the button in the navigation bar.

#### Rename a document

You can rename the current document by clicking the document title in the navigation bar.

#### Delete a document

You can delete the current document by clicking the button in the navigation bar.

#### Save a document

You can save the current document to a file using the `Save as...` sub-menu.

> **NOTE:** See [ Publish a document](#publish-a-document) section for a description of the different outputs.

----------

Synchronization
---------------

**StackEdit** can be combined with **Google Drive** and **Dropbox** to have your documents centralized in the *Cloud*. The synchronization mechanism will take care of uploading your modifications or downloading the latest version of your documents.

> **NOTE:**
>
> - Full access to **Google Drive** or **Dropbox** is required to be able to import any document in StackEdit.
> - Imported documents are downloaded in your browser and are not transmitted to a server.
> - If you experience problems exporting documents to Google Drive, check and optionally disable browser extensions, such as Disconnect.

#### Import a document

You can import a document from the *Cloud* by going to the `Google Drive` or the `Dropbox` sub-menu and by clicking `Import from...`. Once imported, your document will be automatically synchronized with the **Google Drive** / **Dropbox** file.

#### Export a document

You can export any document by going to the `Google Drive` or the `Dropbox` sub-menu and by clicking `Export to...`. Even if your document is already synchronized with **Google Drive** or **Dropbox**, you can export it to a another location. **StackEdit** can synchronize one document with multiple locations.

#### Synchronize a document

Once your document is linked to a **Google Drive** or a **Dropbox** file, **StackEdit** will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. Any conflict will be detected, and a local copy of your document will be created as a backup if necessary.

If you just have modified your document and you want to force the synchronization, click the button in the navigation bar.

> **NOTE:** The button is disabled when:
>
> - you are offline,
> - or the document is not synchronized with any location,
> - or the document has not been modified since the last synchronization.

#### Manage document synchronization

Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking `Manage synchronization` in the menu. This will open a dialog box allowing you to add or remove synchronization links that are associated to your document.

> **NOTE:** If you delete the file from **Google Drive** or from **Dropbox**, the document will no longer be synchronized with that location.

----------

Publication
-----------

Once you are happy with your document, you can publish it on different websites directly from **StackEdit**. As for now, **StackEdit** can publish on **Blogger**, **Dropbox**, **Gist**, **GitHub**, **Google Drive**, **Tumblr**, **WordPress** and on any SSH server.

#### Publish a document

You can publish your document by going to the `Publish on` sub-menu and by choosing a website. In the dialog box, you can choose the publication format:

- Markdown, to publish the Markdown text on a website that can interpret it (**GitHub** for instance),
- HTML, to publish the document converted into HTML (on a blog for instance),
- Template, to have a full control of the output.

> **NOTE:** The default template is a simple webpage wrapping your document in HTML format. You can customize it in the `Services` tab of the `Settings` dialog.

#### Update a publication

After publishing, **StackEdit** will keep your document linked to that publish location so that you can update it easily. Once you have modified your document and you want to update your publication, click on the button in the navigation bar.

> **NOTE:** The button is disabled when:
>
> - you are offline,
> - or the document has not been published anywhere.

#### Manage document publication

Since one document can be published on multiple locations, you can list and manage publish locations by clicking `Manage publication` in the menu. This will open a dialog box allowing you to remove publication links that are associated to your document.

> **NOTE:** In some cases, if you remove the file from the website or the post from the blog, the document will no longer be published on that location.

----------

Markdown Extra
--------------

**StackEdit** supports **Markdown Extra**, which extends **Markdown** syntax with some nice features.

> **NOTE:** You can disable any **Markdown Extra** feature in the `Extensions` tab of the `Settings` dialog.

### Special Attributes

With **Markdown Extra**, you can specify `class` and `id` attributes on headers and fenced code blocks just like this:

##### Header example {#my-header}

``` {#my-id .my-class}
var foo = bar;
```

Then you can create cross-references like this: [beginning of the document](#welcome).

### Footnotes

You can create footnotes like this[^footnote].

[^footnote]: Here is the *text* of the **footnote**.

### SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:

| | ASCII | HTML |
------------------|------------------------------------------|-------------------------------------
| Single backticks | `'Isn't this fun?'` | ‘Isn’t this fun?’ |
| Quotes | `"Isn't this fun?"` | “Isn’t this fun?” |
| Dashes | `-- is an en-dash and --- is an em-dash` | – is an en-dash and — is an em-dash |

### Table of contents

You can insert a table of contents using the marker `[TOC]`:

[TOC]

### MathJax

You can render *LaTeX* mathematical expressions using **MathJax**, as on [math.stackexchange.com][1]:

The *Gamma function* satisfying \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N is via the Euler integral

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

> **NOTE:** When exporting, make sure you include MathJax to render mathematical expression correctly. Your page/template should include something like:

```

```

> **NOTE:** You can find more information:
>
> - about **Markdown** syntax [here][2],
> - about **Markdown Extra** extension [here][3],
> - about **LaTeX** mathematical expressions [here][4],
> - about **Prettify** syntax highlighting [here][5],
> - about **Highlight.js** syntax highlighting [here][6].

Written with [StackEdit](https://stackedit.io/).

[^stackedit]: StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

[1]: http://math.stackexchange.com/
[2]: http://daringfireball.net/projects/markdown/syntax "Markdown"
[3]: https://github.com/jmcmanus/pagedown-extra "Pagedown Extra"
[4]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[5]: https://code.google.com/p/google-code-prettify/
[6]: http://softwaremaniacs.org/soft/highlight/en/

利用google-code-prettify做网页内源码的语法高亮

由于HTML本身并不认空格,因此网页中如果要展现程序代码通常会用<pre>标签来保留缩进、空格等格式。作为程序员的Blog,对此的需求更是高很多。单单利用<pre>标签保留代码格式还不能让代码看起来很漂亮,通常在IDE中都会有语法高亮的特性,利用google-code-prettify可以很方便的在网页中实现这一功能。

官方主页在此:http://code.google.com/p/google-code-prettify/
下载最新的源码之后,在网页的HEAD部分加入以下两行

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

然后在需要高亮代码的地方,将代码放在<pre class="prettyprint lang-X"> </pre> 标签中。在class中lang-X的X可以是下面几种语言之一:
bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

如果是在Wordpress中的话,可以使用Code Block Enabler这个插件。

在配置完成之后,还有一个小小的缺憾。通常程序的代码都是使用等宽字体,最常见的就是Courier New字体。而google-code-prettify并没有设置代码的字体。简单的对其css文件作一个小小的修改即可实现这一点,打开WordPress的wp-content/plugins/code-block-enabler/prettify.css文件,找到pre.prettyprint的定义后面加上字体的定义,改为:

pre.prettyprint { padding: 2px; border: 1px solid #888; font-family: Courier New; font-size: 9px;}

修正auto-excerpt产生带格式的摘要

WordPress的正文通常都是显示全文,这样一来如果文章非常长的话,blog的首页的用户体验会很不好。网上有很多提到通过将index.php中的the_content改成the_excerpt来讲首页的文章内容显示为摘要的方法,但是这样的摘要要自己去写。

WordPress的plugin库里面有一个auto-excerpt的插件,可以自动将文章的前几百字截取下来作为文章的摘要。确实是方便,但是却有一个小小的问题,截取出来的文字格式全部都丢失了,包括段落、链接等等。

通过对这个插件的代码做一点小小的改动可以恢复文字的格式。在后台管理中找到这个插件——edit

function auto_excerpt(content) {      content = substr(strip_tags(content),0,418)." [...]";      return content;
}

代码中可以看到,这个插件是用strip_tags来去除正文中的所有html标签,然后截取前418个字符。其实strip_tags还有一个可选的参数,可以指定忽略掉某些标签。为了保留基本格式,可以选择在strip_tags中忽略掉p、br、a等标签恢复文字的格式。

function auto_excerpt(content) {      content = substr(strip_tags(content, '


'),0,418)."
[...]"; return content; }

如果想在缩略图中保留图片,也可以在忽略标签列表中加上<img>标签。