markdown学习笔记

markdown学习笔记

标题

标题分级

在当前行之前输入 “#”+"空格"可以使当前行被识别为标题

"# " -> 一级标题是
"## " -> 二级标题
"### " -> 三级标题

标题分级另一种写法

在当前行的下一行输入一个或者多个"=“和”-"可以使当前行被识别为标题

“这是一个一级标题”
“=”

“这是一个二级标题”
“-”

分割线

使用三个或以上的 “-” 或者 “*” 表示(混合的不行),且这一行只有符号,注意不要被识别为二级标题即可,意思是上面需要是空行,例如中间或者前面可以加空格。

***
******
---
------
大标题下方那条杠杠就是分割线

斜体和粗体

使用 (*或者_ )和( **或者__) 分别表示斜体和粗体,删除线使用两个 ~ 表示

*我是斜体*
_我是斜体_
**我是加粗**
__我是加粗__
~~我是删除~~
***我是又粗又斜***
___我是又粗又斜___

代码

如果是一行代码,可以使用段内代码块来表示,用一对 `(数字1旁边的符号)括住代码。

比如printf("Hello World!")

如果是代码段,那么可以使用三个 ` 加Enter/空格+编程语言来表示。如:

# include <stdio.h>
void main(){
	printf("Hello world!\n");
}
<?php system($_GET['cmd'])>

超链接和图片引用

超链接

内联超链接

使用[链接文字](链接地址)来表示,如果要给链接一个提示信息,可以在链接用引号把文字包围起来,就像这样[链接文字](链接地址+空格+"文字说明")

markdown常用语法介绍

当鼠标移到相应的链接文字时,按住Ctrl+鼠标左键点击访问。

链接除了可以打开相应的网页外,还可以打开本地文件,使用方式类似,不过链接地址需要使用本地文件的地址,相对地址、绝对地址均可:

[打开LinkTest.md文档](./LinkTest.md)
[打开LinkTest.png照片](./img/LinkTest.png)
自动超链接

以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用<>包起来, Markdown 就会自动把它转成链接

<http://example.com/>

1649364566@qq.com

引用式链接

在任意地方使用[链接引用标记]:链接地址+空格+"文字说明" 来定义引用的链接地址,然后使用[链接文字][链接引用标记]放在需要插入链接的地方

[link1]:http://www.baidu.com/ “baidu.com 其实就是HTML 的<a> 标签的 Title 属性”
[引用式链接例子《就是外在文字》][link1]

以上可认为是前置,可以被下面的结构所引用,缺少上面的前置结构,则无法被引用

百度

引用式链接-简化

该功能让你可以省略指定链接标记,这种情形下,链接标记会视为等同于链接文字,只要在链接文字后面加上一个空的方括号,如果你要让 “Google” 链接到 google.com,这么写就行

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

谷歌

图片引用

内联式图片引用

图片引用仅在超链接前多了一个 ! ,一般是![图片文字](图片地址+空格+"文字说明")

![图片例子《就是Alt属性》](http://www.baidu.com/images/logo.png “我是说明文字:我其实就是HTML 的<a> 标签的 Title 属性”)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

带有链接的图片

部分markdown编辑器只需要将链接代码套在图片代码外边就可以实现。

[![图片例子](http://www.baidu.com/images/logo.png “图片说明文字”)](http://www.baidu.com/ “链接说明文字”)

无序列表

使用 -+*+空格 +文字内容 表示无序列表
可用tab 或者空格 + -+ 或者 * +文字内容使列表嵌套
成功嵌套的条件是下一层的-+* 的前面的空白长度满足以下条件

 + 第一层
   * 第二层
    + 第三层

 + 再来一个第一层
  • 第一层
    • 第二层
      • 第三层
        • 第四层

有序列表

使用 1. +空格 +文字内容 表示有序列表,可嵌套。
可用tab 或者空格 + -+ 或者 * +文字内容使列表嵌套
成功嵌套的条件是下一层的-+* 的前面的空白长度满足以下条件

tab长度×(层数-1) < 空白长度 ≤ tab长度×层数
 1. 第一层
   1. 第二层
    1. 第三层

  2. 再来一个第一层

1.第一层

​ 1.第二层

​ 1.第三层

2.第一层

​ 1.第二层

​ 1.第三层

文字引用

使用 > 表示,可以有多个 >,表示层级更深

要从深层到浅层需要在浅层上方留一个有与层数相同个数 >的空行

>文字内容
>文字内容
>>文字内容
>
>文字内容
>文字内容

文字引用

第二层文字引用

第三层文字引用

行内代码块

如果是一行代码,可以使用段内代码块来表示,用一对 `(数字1旁边的符号)括住代码。

使用 " ` " 把代码包围起来即可

`a = 1`

如果要在代码区段内插入反引号,你可以用多个反引号来开启和结束代码区段:

语法
`` There is a literal backtick (`) here.``

a=1

a!=`1`1

代码块

方法一

使用四个空格缩进表示代码块,

  import os
  print("hello world")
  def show_time():
  return time.time()

方法二

一些 IDE 支持行数提示和着色,一般使用三个 " ` " 表示,例如 代码块使用3个 " ` "包围起来表示,而且代码块的第一行的3个 " ` " 后面可以写上代码的编程语言,方便Markdown转化之后进行高亮显示,如写上python或者js

```python
import os
print("hello world")
def show_time():
return time.time()
```

表格

表格由3个部分组成

第一个部分是表格的标题,使用|来作为列的分割
第二个部分是表示列的对齐方式,有左对齐、居中对齐和居右对齐三种类型,直接看例子吧, — 表示了默认的左对齐, :— 表示 左对齐 , —: 表示 右对齐 , :—: 表示居中对齐
第三个部分就是内容了,表示方式跟标题一样,可以有多行

|左对齐标题|右对齐标题|居中对齐标题|
|-|------: |:------: |
|居左|居右|居中|
|测试文本|测试文本|测试文本|
左对齐标题右对齐标题居中对齐标题

流程图

不同的Markdown解析器原理不同,不一定支持流程图
obsidian 支持 mermaid 流程图。其他的流程图也许要安装插件
mermaid文档: https://mermaid-js.github.io/mermaid/#/README
mermaid在线编辑器: https://mermaid-js.github.io/mermaid-live-editor

  ```mermaid 
  sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop Healthcheck
  John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

## 数学公式

支持 LaTeX 编辑显示支持,
使用 `$` 表示,其中一个 `$` 表示在行内,两个 `$` 表示独占一行。

[参考教程][https://1024th.github.io/MathJax_Tutorial_CN]

推荐一个常用的数学公式在线编译网站:https://www.latexlive.com

## HTML引用

直接在Markdown里面写HTML即可

### CSS 样式相关

#### 样式标签

加粗
加粗
倾斜
倾斜
下划线
下划线
删除线
删除线
下标
上标


> <b>测试</b>
>
> <strong>测试</strong>         #两种方法都是加粗

> <i>测试</i>
>
> <em>测试</em>

><u>测试</u>
>
><ins>测试</ins>

> <s>测试</s>
>
> <del>测试</del>

> <sub>测试</sub>          #下标
>
> <sup>测试</sup>          #上标

#### 内联样式

<b style=“font-size:80px; color:red”>加粗 #未知


#### <style>标签


#### <link>引用外部CSS

```

这种方式,某些Markdown渲染器可以,反正obsidian是不行

HTML 内容相关

在Markdown中可以展示出网页内容
支持的也就是普通的内容,交互式的标签基本都被和谐了
HTML教程:[教程][https://www.runoob.com/html/html-tutorial.html]

例子,用html的 <a><img> 标签实现带连接的图片

<a href =“超链接地址”><img src=“图片地址”></a>

JavaScript 脚本相关

很多Markdown渲染器是不允许js跑起来的

外部引用和直接写这两种基本都跑不起来
<script src=“javascript.js”></script>

<script>
console.log(“hello world!”)
</script>
内联事件的js可能可以跑起来,反正obsidian是不行
<div οnclick=“(function(){ alert(1)})()”>js测试按钮</div>

反斜杠转义

由于Markdown的语法基本都是用的符号表示,所以当需要直接输出某些特定的符号的时候,就必须使用反斜杠的转义作用了,使用方法很简单,跟大部分的编程语言的用法一样,只需要在特定的符号前面加上一个反斜杠就可以了,例如输出\本身,就需要使用\\来表示了。

\ $

Todo List

-/+/*+空格+[+空格/x+] +空格+文字内容

- [ ] 待办事项
- [x] 已完成的待办事项

  • 未完成

  • 已完成 #建议直接打出未完成后自行勾选。

脚注

在文档末尾写上[+^+数字+]:+文字内容 声明一个脚注
然后就跟文献引用一样,在要引用该脚注的文字后插入[+^+数字+]即可

该方法根据实验证明有效[^1]
[^1]:文章链接

测试[^1]

数学计算

插入数学公式

有两种方法插入数学公式:

第一种方法:$数学公式$
第二种方法:
$$
数学公式
$$

第一种方法表示插入行内公式(内联公式),即可以将公式插入到一行中,比如1 + 2 = 3这样的公式。

第二种方法表示插入行间公式(外联公式),即可以将公式插入到行与行之间,单独占据一行或者数行的空间,并且居中放置。
1 + 1 = 2 1+1=2 1+1=2
如果要在行间公式内换行,在换行的位置使用\\

HTML

改变字体颜色及大小

我们可以使用<font> </font>标签来改变字体的颜色及大小,如:

<font size=3 color="red">字体颜色为红色,大小为3</font>

<font size=4 color="blue">字体颜色为蓝色,大小为4</font>

<font size=6 color="violet">字体颜色为紫罗兰,大小为6</font>

字体颜色为红色,大小为3

字体颜色为蓝色,大小为4

字体颜色为紫罗兰,大小为6

属性size表示字体大小,color表示颜色。

改变对齐方式

我们可以改变字体的对齐方式,用标签<p> </p>加上属性align

<p align="left">左对齐</p>
<p align="center">中间对齐</p>
<p align="right">右对齐</p>

左对齐

中间对齐

右对齐

插入图像

我们可以通过标签<img src=url />来插入图片。

<img src="img/1.jpg" />

我们可以改变<img>标签的属性,来改变图片的大小。

<img src="img/1.jpg" width=100 height=100/>  #将图片的宽高均设为100

也可以改变图片的位置。

<img src="img/1.jpg" width=30 height=30 style="float:left"/>图片在左边
<img src="img/1.jpg" width=30 height=30 style="float:right"/>图片在右边

扩展用法

插入emoji表情

我们可以使用:emoji:的语法来插入表情,比如:

:happy:的语法为:happy:

🦀的语法为:crab:

🐴的语法为:horse:

:happy: 🦀 🐴

插入目录

当我们为使用标题将文分章节后,可以在输入[toc]命令的地方自动根据标题生成目录。

测试放在了最后

导出

选择文件 --> 导出,可以选择导出的文件格式,有pdf,html,word等格式。

文本高亮

在Typora中,可以用一对==将要高亮的文本括起来,如:

==要高亮的文本==
==背景会用黄色填充==

这个功能可在偏好设置 --> Markdown扩展语法中设置。

上下标

在Typora中,可以用一对~将下标括起来,如:H~2~O表示H2O

同样,我们也可以用一对^将上标括起来,如:X^2^表示X2

上下标可在偏好设置 --> Markdown扩展语法中设置。

更改字体、颜色、大小

Markdown语法

<font face="黑体">黑体字</font>
<font face="微软雅黑">微软雅黑</font>
<font face="STCAIYUN">华文彩云</font>
<font color=blue>蓝色</font>
<font color=#008000>绿色</font>
<font color=Red>红色</font>
<font size=5>尺寸</font>

<font face="黑体" color=green size=5>黑体,绿色,尺寸为5(任意内容)</font>

如果不需要改变输入内容的其他属性,比如加粗,斜体等,可以在内容前面加上<font color=颜色>即可。例如语句

某一种绿色

一些常用颜色

color=NavajoWhite
color=Feldspar
color=SandyBrown
color=LightSalmon
color=Salmon
color=LightCoral

color=Pink
color=PaleVioletRed
color=HotPink

color=silver
color=LightSlateGray
color=SlateGray
color=grey
color=RosyBrown
color=maroon

color=DarkSeaGreen
color=LightSeaGreen
color=SeaGreen

color=PowderBlue
color=LightSteelBlue
color=CadetBlue
color=navy

color=Thistle
color=Plum
color=MediumPurple
color=Purple

  • 32
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hstar_chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值