MarkDown+MathJax

Posted by Hsz on June 29, 2016

MarkDown+MathJax

MarkDown

简明强大的markdown文本标记语言是做笔记的好帮手,相比起word文档,你不用双手离开键盘来影响你的速记效率, 相比起tex你不用费心码一堆代码来维护格式. 当然了,markdown是为速记而生的,它的最大好处是内容与形式分离,因此不要对齐排版有过多期待, 它的特点便是可以用最简单最统一的形式清楚的表达.废话不多说,开始介绍语法

基本语法

markdown中换行是两个回车

如果一个回车,会接在后面继续写.

你可以是试试, 上面这段的代码如下:

markdown中换行是两个回车

如果一个回车,会接在后面继续写.

你可以是试试,
上面这段的代码如下:

html支持

markdown是html的子集,所以对于一些html标签和样式可以直接插入,但js无效.

<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
姓名Bill Gates
电话 555 77 854
555 77 855

文章结构相关语法

分割

就像你下面看到的一样


---

---

标题

markdown的标题用复数个连续#表示,#越多标题层级越低,连续#后空一格再写标题内容即可


# 第一级
## 第二级

#第一级

第二级


区块引用 Blockquotes

区块引用可以嵌套表现层级

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
>
> ## 这是一个标题。
>
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
>
> 给出一些例子代码:
>
>     return shell_exec("echo $input | $markdown_script");

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

这是一个标题。

  1. 这是第一行列表项。
  2. 这是第二行列表项。

给出一些例子代码:

return shell_exec("echo $input | $markdown_script");

列表

Markdown 支持有序列表和无序列表。



+ Red

    蓝色

+ Green
+ Blue


1. Bird2. McHale

    >hi

3. Parish

        print("hello")
  • Red

    蓝色

  • Green
  • Blue
  1. Bird

  2. McHale

    hi

  3. Parish

     print("hello")
    

字形相关


**这是斜体**

*这是斜体*

***这是粗斜体***

这是斜体

这是斜体

这是粗斜体


页面元素

链接


链接可以使用快捷,内连和脚注两种方式引用

快捷方式

<http://google.com/>

http://google.com/

内连方式

[Google](http://google.com/ "Google search")
[Google](http://google.com/)
[利用github建立blog](./利用github建立blog.md)

Google

Google

利用github建立blog

脚注方式

[Google][1]
[1]: http://google.com/

Google


表格

名字|电话
---|---
小马哥|0987
小黑|9870

其效果:

名字 电话
小马哥 0987
小黑 9870

图片

图片可以有内连和脚注两种引用方式

内连方式:

![Alt google](https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/photo.jpg)

Alt google

脚注方式

![Alt google][2]

[2]: https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/photo.jpg

Alt google

插入代码

插入代码也很简单,有3种方式

  • 使用`符号包裹,一般这种事嵌入在一段文字中

    你好`s=hello`

    对应的结果是:

    你好s=hello

  • 通过tab键缩进(不建议)

tab $ git clone xxxxx

$ git clone xxxxx
  • 使用三个`符号包裹,首行的```后面接上代码的类型可以高亮关键字

      ```python
    
      def func(a:int)->int:
          b:int = 10
          return a+b
    
      ```   对应的结果:
    
    
      def func(a:int)->int:
          b:int = 10
          return a+b
    
    

视屏

可以通过html标签实现(github不可以)

<video width="640" height="360" preload="auto" poster="http://media.w3.org/2010/05/sintel/poster.png" controls >
  <source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
</video>

音频

可以通过html标签实现(github不可以)

<audio controls>
  <source src="http://blog.hszofficial.site/source/MarkDown+MathJax/蔡志展 - 战斗音乐.mp3">
</audio>

数学公式的支持

本来markdown是不支持数学公式的, 但如果和mathjax结合使用便可以利用”latex”的公式编辑语言在markdown中编写公式了.内嵌公式使用$a \ne b$表示. 效果就像$a \ne b$这样.

公式段落使用像这样:

$$
f(x)=\sum (x_i)^2
$$

效果如下:

latex符号可以查看这篇总结这篇总结

流程图

流程图不是markdown默认支持的语法,需要通过js模块提供支持,有的环境有支持但大多数没有.不过我的博客是支持的.

通常我们使用flowchart.js语法

```flowchart
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

效果如下:

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

另一种是使用sequence

```sequence
participant Device
participant Browser
participant Server
Browser->Server: username and password
Note over Server: verify password
Note over Server: generate challenge
Server->Browser:  challenge
Browser->Device: challenge
Note over Device: user touches button
Device-->Browser: response
Browser->Server: response
Note over Server: verify response
```

效果如下:

participant Device
participant Browser
participant Server
Browser->Server: username and password
Note over Server: verify password
Note over Server: generate challenge
Server->Browser:  challenge
Browser->Device: challenge
Note over Device: user touches button
Device-->Browser: response
Browser->Server: response
Note over Server: verify response