这是一篇关于讲解如何正确使用51CTO博客-Markdown的排版示例,希望通过此,大家都能轻松上手,都能通过Markdown 能够让自己的文章有更加出色、更清晰明了的排版。

什么是 Markdown

Markdown (MD) 是现在普遍使用的一种文档书写语言格式,只需用一些非常简单易记的符号,如(# * / > [] ()\ ),就可以轻松写出一篇具有良好的排版和可读性的文章。

语法示例

1.基本语法

一些常规的语法格式。

1.1 标题

标题用#+空格表示,不同数量的#可以表示不同的标题

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

1.2 粗体和斜体粗体

在需要操作的文字前后各加三个“*”

这个是粗体斜体:在需要斜体的文字前后各加一个“*”

这个是斜体用粗体加斜体:在需要操作的文字前后各加三个“*”

这个是粗体加斜体

1.3 删除线删除线语法

在需要删除的文字前后各使用两个符合“~~”要删除的文字

1.4 引用

符号“>”后面书写文字。示例:

 这个是引用

1.5 目录

可通过:@[toc](目录) 生成目录。

1.6 空行

如需空行,则可\ +回车换行。

2.LaTeX公式

LaTeX数学公式有两种:行中公式和独立公式(行间公式)。行中公式放在文中与其它文字混编,独立公式单独成行。

2.1 行内公式

$=mc^2$

$=mc^2$

2.2 独立公式

$$=mc^2$$

$$=mc^2$$

更多语法参考:Markdown 编辑器添加 Latex数学公式教程

3.代码高亮

3.1 普通


*emphasize*    **strong**

_emphasize_    __strong__

@a = 1

3.2 语法高亮支持

如果在 ``` 后面跟随语言名称,可以有语法高亮的效果,如:

3.2.1 html/xml 代码高亮示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>  

</body>

</html>

3.2.2 Python高亮示例

#!/usr/bin/python3

# Fibonacci series: 斐波纳契数列

# 两个元素的总和确定了下一个数

a, b = 0, 1

while b < 10:

    print(b)

    a, b = b, a+b

3.2.3 CSS 文件示例

body {

    background-color: red;

}



h1 {

    color: orange;

    text-align: center;

}



p {

    font-family: "Times New Roman";

    font-size: 20px;

}

支持语言有: HTML/XML, JSON, Bash, CSS, Java, JavaScript, PHP, Python, Rust, C/C++

4.绘制表格

| Column 1 | Column 2 | Column 3 |

| -------- | -----: | :----: |

| cell 1 | cell 2 | cell 3 |

| cell 4 | cell 5 | cell 6 |

| cell 7 | cell 8 | cell 9 |

| Column 1 | Column 2 | Column 3 |

| -------- | -----: | :----: |

| cell 1 | cell 2 | cell 3 |

| cell 4 | cell 5 | cell 6 |

| cell 7 | cell 8 | cell 9 |

5.Todo列表

语法:

- [ ] 在Blog-51CTO写一篇技术博客

- [x] 5分钟搞定俄罗斯方块---组件化实战

- [x] 服务早期红利与各项技术场景创新分析

显示:

  • [ ] 在Blog-51CTO写一篇技术博客

  • [x] 5分钟搞定俄罗斯方块---组件化实战

  • [x] 服务早期红利与各项技术场景创新分析

6.链接

支持直接粘贴链接地址。链接语法和显示如下:

语法1:[链接名称](http://链接网址)

显示:链接名称

或语法2:<http://链接网址>

显示:http://链接网址

7. 图片

可通过上传按钮上传图片,也支持直接粘贴图片,也支持拖拽上传图片。图片语法和显示如下:

语法:![请添加链接描述](图片地址)

显示:![请添加链接描述](图片地址)

8. 有序列表&有序列表

无序列表的使用,在符号“-”后加空格使用。如下:

  • 列表项

  • 列表项

  • 列表项

如果要控制列表的层级,则需要在符号“-”前使用空格。如下:

  • 列表项

  • 列表项

    • 列表内容

    • 列表内容

有序列表的使用,在数字及符号“.”后加空格几个,如下:

  1. 列表项

  2. 列表项

    1. 列表内容

    2. 列表内容

      1. 子列表内容

      2. 子列表内容

      3. 子列表内容

9. 分割线

可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,同时需要在分隔线的上面空一行。

例:

-------

*****

______




10. 符号转义

如果你的描述中需要用到 markdown 的符号,比如 # * 等,但又不想它被转义,这时候可以在这些符号前加反斜杠,如 \ # *进行避免。

11. 导入和导出

支持正文导出.md的文档,支持导入.md格式的文档。

导入:支持导入本地 .md格式的文档

导出:正文内容可以导出本地.md格式的文档

12.高效绘制流程图


 ` ` `flow

st=>start: Start

op=>operation: Your Operation

cond=>condition: Yes or No?

e=>end



st->op->cond

cond(yes)->e

cond(no)->op

` ` `

显示:


st=>start: Start

op=>operation: Your Operation

cond=>condition: Yes or No?

e=>end



st->op->cond

cond(yes)->e

cond(no)->op

13.高效绘制序列图


 ` ` `seq

Alice->Bob: Hello Bob, how are you?

Note right of Bob: Bob thinks

Bob-->Alice: I am good thanks!

` ` `


Alice->Bob: Hello Bob, how are you?

Note right of Bob: Bob thinks

Bob-->Alice: I am good thanks!

14.高效绘制甘特图


 ` ` `gantt

    axisFormat  %m/%d

    title 项目开发流程

    section 项目立项

        需求分析       :a1, 2021-01-01, 5d

        可行性报告     :after a1, 6d

        概念验证       : 5d

    section 项目实施

        概要设计      :2021-01-14  , 5d

        详细设计      :2021-01-19, 10d

        编码          :2021-01-29, 10d

        测试          :2021-02-08, 5d

    section 发布验收

        发布: 3d

        验收: 3d

` ` `


    axisFormat  %m/%d

    title 项目开发流程

    section 项目立项

        需求分析       :a1, 2021-01-01, 5d

        可行性报告     :after a1, 6d

        概念验证       : 5d

    section 项目实施

        概要设计      :2021-01-14  , 5d

        详细设计      :2021-01-19, 10d

        编码          :2021-01-29, 10d

        测试          :2021-02-08, 5d

    section 发布验收

        发布: 3d

        验收: 3d

15. 其他说明

使用WuKong编辑器发布的内容只能WuKong编辑器编辑,不可切换Markdown编辑器;

使用Markdown编辑器发布的内容只能Markdown编辑器编辑,不可切换WuKong编辑器编辑。

阿里云有个开发者社区,入驻过的朋友可能想要把自己的博客发布到阿里云社区上。

今天我来介绍一下blog-auto-publishing-tools自动发布博客到阿里云的实现原理。

阿里云的博客发布界面比较简单,只有标题,正文,摘要,关联试用产品,发布子社区,文章图片这几个选项。

一起来看看如何实现吧。

前提条件

前提条件当然是先下载 blog-auto-publishing-tools这个博客自动发布工具,地址如下:https://github.com/ddean2009/blog-auto-publishing-tools

阿里云的实现

因为阿里云的博客发布界面比较简单,只有标题,正文,摘要,关联试用产品,发布子社区,文章图片这几个选项。

其中标题,正文,摘要和文章图片这几个是必须的。

关联试用产品,和发布子社区并不是刚需,所以这两个目前选择默认值即可。

如果有感兴趣的朋友可以自行实现这两个功能。

所以在config/alicloud.yaml中,我们只需要配置阿里云的发文地址即可:

site: https://developer.aliyun.com/article/new#/

有同学要问了,标题,正文,摘要和文章图片在哪里配置呢?

在最新的工具实现中,有两种方式来设置这些值。

  1. 第一种方式

第一种方式是在config/common.yaml中:

# 文章的标题
title: 一键自动化博客发布工具,用过的人都说好(阿里云篇)
# 文章的内容
content: /Users/wayne/Downloads/blogthings/blogs/blog/projects/004-auto-blog-publish-tool-oschina.md
# 文章的摘要
summary: 使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到阿里云上。

这种是最基本的方式。

  1. 第二种方式

如果你的markdown文件中已经包含了title和summary这些信息,那么你就不需要再重复在common.yaml中再写一次了。

这种方式,你需要把title和summary(对应的是description),写到markdown文件的YAML Front Matter中,如下所示:

image-20240507154807745

这样,在程序中会优先读取markdown文件中的YAML Front Matter,免去你重复设置的烦恼。

设置封面图片

封面图片就是在上图的image中设置的。

这里image是一个网络图片链接。一般来说博客的图片上传中上传的图片需要是一张本地的图片。

不过不要担心,这个工具已经实现了自动把远程图片转换成本地图片再上传的整套过程。

大家只管设置即可。

不过能够设置封面图片的前提是博客网站的上传图片是一个input标签。

可惜的是阿里云的上传是一个button,并没有input,所以目前来说阿里云是没有办法通过这个工具来自动上传封面图片的。

这个功能,后续再优化,看看有没有实现的可能。

image-20240507160825718

设置标题

阿里云的标题比较简单,直接通过ID获取,或者通过下面的XPATH来获取,设置:

    # 文章标题
    title = driver.find_element(By.XPATH, '//input[@placeholder="请填写标题"]')
    title.clear()
    if 'title' in front_matter['title'] and front_matter['title']:
        title.send_keys(front_matter['title'])
    else:
        title.send_keys(common_config['title'])
    time.sleep(2)  # 等待3秒

设置正文

阿里云的正文是一个textarea,不像之前的oschina和segmentfault用的是codemirror,那种动态的代码风格。

所以设置正文就比较简单了,我们直接拿到textarea,调用send_keys就行了:

    # 文章内容 markdown版本
    file_content = read_file_with_footer(common_config['content'])
    content = driver.find_element(By.XPATH, '//div[@class="editor"]//textarea[@class="textarea"]')
    content.send_keys(file_content)
    time.sleep(3)  # 等待3秒

设置摘要

阿里云的摘要也是一个textarea,我们可以用类似设置正文的方式来设置摘要:

    # 摘要
    if 'description' in front_matter['description'] and front_matter['description']:
        summary = front_matter['description']
    else:
        summary = common_config['summary']
    if summary:
        summary_input = driver.find_element(By.XPATH, '//div[@class="abstractContent-box"]//textarea[@placeholder="请填写摘要"]')
        summary_input.send_keys(summary)

发布博客

所有的内容都设置好了,接下来我们就可以点击发布博客按钮了。

    # 发布
    if auto_publish:
        publish_button = driver.find_element(By.XPATH, '//div[@class="publish-fixed-box-btn"]/button[contains(text(),"发布文章")]')
        publish_button.click()

总结

阿里云的博客发布界面还是中规中矩的,没有太多特殊的地方,除了上传封面没有使用input标签之外,其他都还是挺常规的用法。

点我查看更多精彩内容:www.flydean.com