测试博客园的MarkDown性能

Posted xin01

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了测试博客园的MarkDown性能相关的知识,希望对你有一定的参考价值。


按右边的1跳转到文章尾部 1


测试博客园的MarkDown性能

第一节、添加文章各种内容

一、文本格式

1、无序列表

用以下三种符号+-*都可以。

+ 文本1
- 文本2
* 文本3
  • 文本1

  • 文本2

  • 文本3

2、有序列表

1. 文本1
2. 文本2
3. 文本3 
  1. 文本1
  2. 文本2
  3. 文本3

有序列表与无序列表都可以嵌套使用。

1. 第一项
+ 文本1
+ 文本2
+ 文本3 
2. 第二项
+ 文本1
+ 文本2
+ 文本3
  1. 第一项
  • 文本1
  • 文本2
  • 文本3
  1. 第二项
  • 文本1
  • 文本2
  • 文本3

还有一种不是很常用的任务列表

- [ ] 任务一 未做任务 
- [x] 任务二 已做任务
  • [ ] 任务一 未做任务
  • [x] 任务二 已做任务

3、粗体和斜体、下划线与删除线

第一种是斜体,第二种是粗体。第三种,斜体与粗体综合起作用。

*介绍一下博客园的markdown的使用方法*

**介绍一下博客园的markdown的使用方法**

***介绍一下博客园的markdown的使用方法***

介绍一下博客园的markdown的使用方法

介绍一下博客园的markdown的使用方法

介绍一下博客园的markdown的使用方法

MarkDown原生语法中,不存在下划线的语法。
我们可以用html代码达到下划线的效果。

<u>下划线</u>
~~删除这些~~

下划线
删除这些

4、缩进

开始一行作为标准,来看空了多少。
&ensp;半角的空格
&emsp;全角的空格
  两全角空格
&emsp;&emsp;建议使用全角的空格。刚开始的时候,为了缩进,可能会按空格啊,Tab啊,会发现达不到满意的效果。现在可以看到,空两格的效果出来了。

开始一行作为标准,来看空了多少。
?半角的空格
?全角的空格
  两全角空格
??建议使用全角的空格。刚开始的时候,为了缩进,可能会按空格啊,Tab啊,会发现达不到满意的效果。现在可以看到,空两格的效果出来了。

5、字体、字号和颜色

MarkDown原生语法中,做不到这些效果。
有些时候,可以用html代码来达到相应效果:

浅红色文字:浅红色文字:

浅红色文字:<font color="#dd0000">浅红色文字:</font><br/>

有些MarkDown软件,是通过层叠样式表(css)文件来进行相关设置。

设置背景色、文字颜色、和字体:

  --bg-color: #ececd8;
  --text-color: #0080ff;

html, body {
  background-color: var(--bg-color);
  font-family: Yahei Mono, Roboto, Open Sans, sans-serif;
}

6、表格

| 1左对齐 | 2右对齐 | 3居中 |
| :- | -: | :-: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
1左对齐 2右对齐 3居中
单元格 单元格 单元格
单元格 单元格 单元格
单元格 单元格 单元格

在Typora中,直接按快捷键 Ctrl+T ,然后进行相关操作即可。

二、引用

1、引用链接

网页链接

基本格式: [显示文本](链接地址)

[博客园](https://www.cnblogs.com/)
[百度](https://www.baidu.com/)

博客园
百度

本地链接

MarkDown 可以指向本地硬盘上的目录与文件。

选择打开链接,会打开对应的文件夹或文件。

网页上试不出来的。本地的MarkDown文件打开之后,就可以试了。

这对管理本地文件夹和文件,非常方便。

[指向x盘文件夹](file://x:)
[指向文件aaa.txt](file://x:/aaa.txt)

指向x盘文件夹
指向文件aaa.txt

2、引用图片

基本格式: ![图片名称](图片链接地址)

把图片文件,上传到某图床网站之后,得到一个图片URL链接,就可以引用图片了。

有时候打开网页,会看不到图片,那可能是因为浏览器的关系,可以换一个浏览器再试试。

![KEjNm4.jpg](https://image.cha138.com/20210823/82adbe1b6cbe47ffa0761532d3e9bad0.jpg)

技术图片

当然,也可以引用本地图片,比如这样写:

![图片名称](file://x:/md.jpg)

3、段落引用

段落引用可以嵌套的。

>相见时难别亦难,东风无力百花残。
春蚕到死丝方尽,蜡炬成灰泪始干。
>>晓镜但愁云鬓改,夜吟应觉月光寒。
蓬山此去无多路,青鸟殷勤为探看。

相见时难别亦难,东风无力百花残。
春蚕到死丝方尽,蜡炬成灰泪始干。

晓镜但愁云鬓改,夜吟应觉月光寒。
蓬山此去无多路,青鸟殷勤为探看。

4、代码引用

不分行的代码引用,用反引号" ` "包裹。
反引号在键盘左上角Esc键的下面。
比如:

浅红色文字:<font color="#dd0000">浅红色文字:</font><br/>

分行的用三个反引号" ``` "包裹。
第一行反引号后面可以跟要使用的语言,也可不加。

代码引用,起到了一个保存代码格式不变的效果。

有些还可以使代码有不同颜色、加亮的效果。

三个反引号,没有嵌套的功能。如果我想把整个包含MarkDown标记的文章,作为代码保存下来,再引用到文章中来,是做不到预想的效果的。

三、特殊字符

如果我想在文章中用#号,而不想这个#号,起到标记标题的作用,咋办?

可以用#

类似地,其他符号也这样解决:

\\   反斜线      
`   反引号      
*   星号        
\\_   底线        
{}  花括号      
[]  方括号      
()  括弧        
#   井字号      
+   加号        
-   减号        
.   英文句点    
!   惊叹号      

反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

四、跳转

页内跳转,用html代码来实现的话,最常用的就是加锚点。
在Typora中,有非常详细的树形目录结构,跳转已经很方便了。
在页面的任何地方,加上:[TOC]
然后回车,就会自动生成树形目标结构,而且是带链接的。点击即可实现跳转。

五、其他

  • 分隔线

用三个星号、减号来建立一个分隔线,行内不能有其他东西。

***
---


加号不行。

++++++

  • 备注
测试注释2 [^2] 
中间是长文。。。。。。

[^2]: 这是注释2

测试注释2 2
中间是长文。。。。。。

第三行不见了,因为自动到文章尾部去了。
在博客园中,注释会自动跑到文章最后面。
转换成pdf文件后,也这样。

很多时候,我们需要立刻返回文章头部。在手机阅读的时候,只能不断往上拉。文章很长的时候,要拉老半天。
用注释的功能,可以解决这个问题。
(还有一个解决方法,是在文章尾部加入链接。这就需要后期编辑,因为写文章的时候,还不知道链接地址。)

在文章头部加上:
按右边的1跳转到文章尾部 [^1] 
中间一定要至少一个空行。。
[^1]: 按右边的回车符跳转到文章头部
  • 换行

连续两个以上空格+回车。

如果不加空格就回车,导出pdf文件后可能会发现并没有产生换行。

第二节、在博客园上发表文章

非常简单,在Typora中,写好文章之后,复制全部。

在博客园中,在设置中,设置默认编辑模式为:MarkDown编辑器。

发布就可以了。

MarkDown很好玩,很给力。

Enjoy!

19.12.21


  1. 按右边的回车符跳转到文章头部?

  2. 这是注释2?

以上是关于测试博客园的MarkDown性能的主要内容,如果未能解决你的问题,请参考以下文章

博客园的markdown图片居中对齐并调整大小

博客园的Markdown编辑器学习

MarkDown语法-使用博客园的markDown编辑

优化博客园的JS代码总结

MarkWord - 可发布到博客园的Markdown编辑器(支持图片同步)

将博客园的页面变得简洁清爽