我的第一篇 Octopress 博客


目录

段落分级

以 # 的个数表示段落层次。

段落分级
1
2
3
4
5
6
# 第一级目录
## 第二级目录
### 第三级目录
#### 第四级目录
##### 第五级目录
###### 第六级目录

还可以表示为

段落分级
1
2
3
4
5
第一级标题
===============

第二级标题
---------------

BlockQuote

  • 方法一: 使用 >
使用 >
1
2
3
4
5
6
> A sample blockquote.
>
> >Nested blockquotes are
> >also possible.
>
> This is the outer quote again.

A sample blockquote.

Nested blockquotes are also possible.

This is the outer quote again.

在 blockquote 中添加诸如 header 等的块级元素无妨。

  • 方法二:使用 blockquote 作标记
使用 blockquote 标签
1
2
3
{% blockquote Bobby Willis http://google.com/search?q=pants the search for bobby's pants %}
Wheeee!
{% endblockquote %}

Wheeee!

代码展示

  • 方法一:缩进一个 tab
使用缩进展示代码
1
System.out.println("Hello World!");
System.out.println("Hello World!");
  • 方法二:使用波浪线
使用波浪线展示代码
1
2
3
4
5
6
~~~~~~
This is also a code block.
~~~
Ending lines must have at least as
many tildes as the starting line.
~~~~~~~~~~~~
This is also a code block.
~~~
Ending lines must have at least as
many tildes as the starting line.
  • 方法三:使用连续 3 个 ` 作标记
使用连续3个 ` 展示代码
1
2
3
4
5
6
7
8
9
10
11
3` objc Obj-C 用例 https://github.com/frank19900731/ObjcDemo/blob/master/ObjcDemo/Animal.m Github
#import "Animal.h"

@implementation Animal

+ (void)description
{
    NSLog(@"I'm a cute animal.");
}
@end
3`
Obj-C 用例Github
1
2
3
4
5
6
7
8
9
#import "Animal.h"

@implementation Animal

+ (void)description
{
    NSLog(@"I'm a cute animal.");
}
@end

支持的语言

  • 方法四:导入文件中的代码
导入文件中的代码
1
{% include_code Test.js for download test.js %}
Test.js for download (test.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 sample javascript from xui
 */

var undefined,
    xui,
    window     = this,
    string     = new String('string'),
    document   = window.document,
    simpleExpr = /^#?([\w-]+)$/,
    idExpr     = /^#/,
    tagExpr    = /<([\w:]+)/,
    slice      = function (e) { return [].slice.call(e, 0); };
try { var a = slice(document.documentElement.childNodes)[0].nodeType; }
catch(e){ slice = function (e) { var ret=[]; for (var i=0; e[i]; i++)
    ret.push(e[i]); return ret; }; }

window.x$ = window.xui = xui = function(q, context) {
    return new xui.fn.find(q, context);
};
  • 方法五:导入 gist 中的代码
导入 gist 中的代码
1
{% gist 4321346 gistfile1.diff %}
导入 gist 中的代码
1
2
{% gist 1059334 svg_bullets.rb %}
{% gist 1059334 usage.scss %}
  • 方法六:使用 codeblock 作标记
使用 codeblock 展示代码
1
2
3
4
5
6
7
8
{% codeblock Coffeescript Tricks %}

# Given an alphabet:
alphabet = 'abcdefghijklmnopqrstuvwxyz'

# Iterate over part of the alphabet:
console.log letter for letter in alphabet[4..8]
{% endcodeblock %}
Coffeescript Tricks
1
2
3
4
5
# Given an alphabet:
alphabet = 'abcdefghijklmnopqrstuvwxyz'

# Iterate over part of the alphabet:
console.log letter for letter in alphabet[4..8]

使用 Inline Code

使用 Inline Code
1
2
3
4
5
6
Use `Kramdown::Document.new(text).to_html`
to convert the `text` in kramdown
syntax to HTML.

Use backticks to markup code,
e.g. `` `code` ``.

Use Kramdown::Document.new(text).to_html to convert the text in kramdown syntax to HTML.

Use backticks to markup code, e.g. `code`.

使用脚注

我的脚注1

使用目录

使用目录
1
2
* list element with functor item
{:toc}
  • list element with functor item

使用数学公式

使用数学公式
1
2
3
4
5
6
7
8
9
random variables $$X_1, X_2, X_3$$ from

$$
\begin{align}
\mbox{Union: } & A\cup B = \{x\mid x\in A \mbox{ or } x\in B\} \\
\mbox{Concatenation: } & A\circ B  = \{xy\mid x\in A \mbox{ and } y\in B\} \\
\mbox{Star: } & A^\star  = \{x_1x_2\ldots x_k \mid  k\geq 0 \mbox{ and each } x_i\in A\} \\
\end{align}
$$

random variables from

1
2
3
4
5
6
7
The following is a math block:

$$ 5 + 5 $$

But next comes a paragraph with an inline math statement:

\$$ 5 + 5 $$

The following is a math block:

But next comes a paragraph with an inline math statement:

使用链接

使用链接
1
[Jekyll](http://www.jekyllrb.com) is a very popular and very powerful static blog generator. Out of the box it's able to generate sophisticated site structures, and has a ton of configurability. One of the areas where I feel that Jekyll lacks some sophistication is around the handling of categories and tags; these are two data-sets that are core to Jekyll, but there isn't a lot of functionality actually built around them. This is in contrast to dynamic blogging platforms like [WordPress](http://www.wordpress.com), or possibly [Drupal](http://www.drupal.org), where these two data points are used to drive a lot of central navigation for the site.

Jekyll is a very popular and very powerful static blog generator. Out of the box it’s able to generate sophisticated site structures, and has a ton of configurability. One of the areas where I feel that Jekyll lacks some sophistication is around the handling of categories and tags; these are two data-sets that are core to Jekyll, but there isn’t a lot of functionality actually built around them. This is in contrast to dynamic blogging platforms like WordPress, or possibly Drupal, where these two data points are used to drive a lot of central navigation for the site.

使用图片

使用图片
1
{% img imgright http://placekitten.com/320/250 40% Place Kitten #2 %}

使用图片
1
{% img imgcenter http://placekitten.com/300/500 40% 'Place Kitten #4' 'An image of a very cute kitten' %}

An image of a very cute kitten

使用图片
1
{% img imgleft /img/portrait.jpg 40% My Cartoon Portrait %}

使用 pullquote

使用 pullquote
1
2
3
4
{% pullquote %}
Surround your paragraph with the pull quote tags. Then when you come to
the text you want to pull, {" surround it like this "} and that's all there is to it.
{% endpullquote %}

Surround your paragraph with the pull quote tags. Then when you come to the text you want to pull, surround it like this and that’s all there is to it.

使用表格

使用表格
1
2
3
4
5
6
7
8
9
<div markdown='1' class='foo'>|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
| Second line     |foo         | **strong**      | baz            |
| Third line      |quux        | baz             | bar            |
|-----------------+------------+-----------------+----------------|

</div>
Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell
Second line foo strong baz
Third line quux baz bar

使用 Horizontal Rules

使用 Horizontal Rules
1
2
3
4
5
6
7
* * *

---

  _  _  _  _

---------------




使用列表

  • 方法一:使用数字
使用数字
1
2
3
4
5
1. Item one
   1. sub item one
   2. sub item two
   3. sub item three
2. Item two
  1. Item one
    1. sub item one
    2. sub item two
    3. sub item three
  2. Item two
  • 方法二:使用 *
使用 */+/-
1
2
3
* Item one
+ Item two
- Item three
  • Item one
  • Item two
  • Item three

使用定义列表

使用定义列表
1
2
3
4
5
6
7
term
: definition
: another definition

another term
and another term
: and a definition for the term
term
definition
another definition
another term
and another term
and a definition for the term

为块级元素添加 attribute

添加一个属性
1
2
> A nice blockquote
{: .class1 .class2}

A nice blockquote

添加多个属性
1
2
3
{:refdef: .c1 #id .c2 title="title"}
paragraph
{: refdef .c3 title="t" #para}

paragraph

为 inline 元素添加 attribute

为内嵌元素添加 attribute
1
This is *red*{: style="color: red"}.

This is red.

使用扩展

使用扩展
1
2
3
4
5
6
7
8
9
This is a paragraph
{::comment}
This is a comment which is
completely ignored.
{:/comment}
... paragraph continues here.

Extensions can also be used
inline {::nomarkdown}**see**{:/}!

This is a paragraph … paragraph continues here.

Extensions can also be used inline **see**!

Notes

  • comment
    • Treat the body text as a comment which does not show in the output.
  • nomarkdown
    • Don’t process the body with kramdown but output it as-is. The attribute type specifies which converters should output the body: if the attribute is missing, all converters should output it. Otherwise the attribute value has to be a space separated list of converter names and these converters should output the body.
  • options
    • Should be used without a body since the body is ignored. Is used for setting the global options for the kramdown processor (for example, to disable automatic header ID generation). Note that options that are used by the parser are immediately effective whereas all other options are not! This means, for example, that it is not possible to set converter options only for some part of a kramdown document.

使用文字修饰

使用文字修饰
1
2
3
4
*Emphasized*
_Emphasized_
**Strong**
__Strong__

Emphasized

Emphasized

Strong

Strong

使用 Typographic Symbols

使用 Typographic Symbols
1
2
3
4
5
--- will become an em-dash (like this )
-- will become an en-dash (like this )
... will become an ellipsis (like this )
<< will become a left guillemet (like this «)  an optional following space will become a non-breakable space
>> will become a right guillemet (like this »)  an optional leading space will become a non-breakable space

— will become an em-dash (like this —)

– will become an en-dash (like this –)

… will become an ellipsis (like this …)

<< will become a left guillemet (like this «) – an optional following space will become a non-breakable space

>> will become a right guillemet (like this ») – an optional leading space will become a non-breakable space


  1. 我的脚注

Tags: octopress, 网页开发     
2015年校招入口 »

Commented Most This Month