markdown一些总结

最新推荐文章于 2023-04-16 10:17:02 发布

转载最新推荐文章于 2023-04-16 10:17:02 发布 · 185 阅读

markdown一些总结

没有什么比条框清晰的基础知识更好了。基础知识非常熟练，没有死角，才能充分的运用知识，做事情。

如下是一些借鉴的博客的地址，会有很多知识从这些博客中摘录，如有侵权，请联系。

Markdown 实用技巧汇总： https://blog.youkuaiyun.com/jaywon/article/details/77992082
MarkDown添加图片的三种方式:https://www.jianshu.com/p/280c6a6f2594
Markdown链接及脚注:https://www.cnblogs.com/tocy/p/markdown-footnote_link.html
Markdown-图片设置（大小，居中）:https://blog.youkuaiyun.com/qq_35451572/article/details/79443467

1 Markdown链接

Markdown中有两种方式，实现链接，分别为内联方式和引用方式。

内联方式
```
This is an [example link](http://example.com/).
```
上面部分显示效果如下：
This is an example link.

引用方式

   I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3].  

  [1]: http://google.com/        "Google" 
  [2]: http://search.yahoo.com/  "Yahoo Search" 
  [3]: http://search.msn.com/    "MSN Search"

渲染之后的效果：

I get 10 times more traffic from Google than from Yahoo or MSN.

2 精准跳转文中任意位置

<span id="twhp"/>    <!-- 添加在目标位置 图文混排 前一行 -->
 [图文混排](#twhp)     <!-- 设置在链接点击的发起地方 -->

3 脚注

这是一个链接到谷歌的[^脚注]。

[^脚注]: http://www.google.com

看下效果：这是一个链接到谷歌的¹。

4 MarkDown添加图片的三种方式

插图最基础的格式就是：
![Alt text](图片链接 "optional title")

Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。图片链接：可以是图片的本地地址或者是网址。“optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。
- 插入本地图片 ![avatar](/home/picture/1.png)
- 插入网络图片 ![avatar](http://baidu.com/pic/doge.png)
- 把图片存入markdown文件
  
  用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置
```
 法1：
![avatar](data:image/png;base64,iVBORw0......)

会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。

 法2 
![avatar][base64str]
[base64str]:data:image/png;base64,iVBORw0......
```

5 图文混排

<img align="right" src="http://ow1zq9frr.bkt.clouddn.com/00.jpg"/>
这是一个示例图片。图片显示在 N 段文字的右边。
N 与图片高度有关。刷屏行。
刷屏行。
到这里应该不会受影响了，本行应该延伸到了图片的正下方，
所以我要足够长才能确保不同的屏幕下都看到效果。

6 控制图片大小和位置

<!-- 图片默认显示效果：  依赖默认图片大小，默认居左-->
![](http://ow1zq9frr.bkt.clouddn.com/00.jpg)

<img src="http:..." width = "100" height = "100" div align=right />
<img src="http:..." width = 30% height = 30% />
<!-- 加以控制后的效果： -->
<div align="center"><img width="60" height="80"src="http://ow1zq9frr.bkt.clouddn.com/00.jpg"/></div>

7 行首缩进

&ensp;   <!-- 代表半角空格 -->
&emsp;   <!-- 代表全角空格 -->

8 字体-字号-颜色-背景色

<font face="微软雅黑">我是微软雅黑</font>
颜色是<font color=red>红色</font>
字号为<font color=#0099ff size=7>7号</font>
<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>

9 分割线

* * *
- - -
_ _ _

<!-- 可以在一行中用 3 个以上的* 或 - 或 _来建立一个分隔线，行内不能有其他东西 -->

10 在表格单元格里换行

<!-- 在表格单元格里换行用 HTML 里的 <br /> 实现。 -->
| Header1 | Header2                               |
|---------|---------------------------------------|
| item 1  | 1\. one<br /> 2\. two<br /> 3\. three |
<!-- 另外多列表格的表示方式还可以简写，可以去掉前后2个竖线| -->

11 使用LaTex数学公式

LaTeX语法，MathJax 基础教程
1. 行内公式用 $ 开头结尾： $x - y$
  
  展示为 $x - y$
2. $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
  
  展示为 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
3. 行间公式用 $$开头结尾： $$x - y$$展示为 $x - y$
4. $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$或者$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$展示为
  $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$
5. 除法用 \frac $\frac ab$ 展示为 $\frac ab$
6. 指数用 ^ 加相应字符来实现：
  
  $x^{2}$ 展示为 $x^{2}$
  
  $e^{-\alpha t}$ 展示为 $e^{-\alpha t}$
7. 下标用 _ 加相应字符来实现：
  
  $a_{1}$ 展示为 $a_{1}$
  
  $a^{3}_{ij}$ 展示为 $a^{3}_{ij}$
  
  $\int_a^b f(x)$ 展示为 $\int_a^b f(x)$
  
  $e^{x^2} \neq {e^x}^2$ 展示为 $e^{x^2} \neq {e^x}^2$
8. 平方根用 \sqrt，n 次方根为 \sqrt[n]，方根符号的大小由 LaTeX 自动调整，也可用 \surd仅给出符号：
  
  $\sqrt{ x^{2}+\sqrt{y} }$ 展示为 $\sqrt{ x^{2}+\sqrt{y} }$
  
  $\sqrt[3]{2}$ 展示为 $\sqrt[3]{2}$
  
  $\surd[x^2 + y^2]$ 展示为 $\surd[x^2 + y^2]$
  
  $\sqrt{x}$ 展示为 $\sqrt{x}$
9. 上下水平线用 \overline和 \underline
  
  $\overline{m+n}$ 展示为 $\overline{m+n}$
  
  $\underline{m+n}$ 展示为 $\underline{m+n}$
10. 上下水平大括号用 \overbrace和 \underbrace
  
  $\overbrace{ a+b+\cdots+z }^{26}$ 展示为 $\overbrace{ a+b+\cdots+z }^{26}$
  
  $\underbrace{ a+b+\cdots+z }_{26}$ 展示为 $\underbrace{ a+b+\cdots+z }_{26}$
11. 求和 ∑∑用\sum
  $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$
  
  展示为 $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$
  
  $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
  
  展示为
  $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$