Markdown 入门 :文章目录生成、合并单元格、文章快速插入链接(使用剪切板的链接插到选中文字)【修订】

简介: Markdown 入门 :文章目录生成、合并单元格、文章快速插入链接(使用剪切板的链接插到选中文字)【修订】
  • 1.1 斜体
  • 1.2 粗体
  • 1.3 删除线
  • 1.4 分隔线
  • 1.5 引用
  • 1.6 代码块
  • 1.7  Diff 高亮
  • 2.1 链接
  • 2.2 文章快速插入链接
  • 2.3 插入图片
  • 3.1 Atx 形式标题
  • 3.2 Setext 形式标题
  • 4.1无序列表
  • 4.2  有序列表
  • 4.3 待办列表
  • 4.4 Markdown 的转义
  • 5.1  表格
  • 5.2 合并单元格 (难点)
  • 5.3 HTML的table表格
  • 5.4 合并单元格的例子
  • 6.1  用 `[TOC]`来生成目录:
  • 6.2  浏览器生成目录
  • 7.1 mdnice
  • 7.2 Typora
  • 7.3 CSDN富文本模式使用小技巧
  • 7.4、markdown模式使用小技巧
  • 8.1 罗马数字


前言

创作背景:

很多号主非技术出身,经常问题下面这种效果怎么弄?尤其是代码块的展示格式

image.png

因此我觉得有必要写一篇针对小白的文章。

image.png

推荐你使用mdnicce网站进行练习,可选择一个自己喜欢的主题订阅

image.png

Markdown 是一种用来写作的轻量级标记语言,它允许使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。

它用简洁的语法代替排版,而不像富文本编辑器( Word 或 Pages) 有大量的排版、字体设置。使我们专心于码字,用「标记」语法,来代替常见的排版格式。

相对于更为复杂的HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。Markdown 文档从内容到格式,甚至插图,通过键盘就可以通通搞定。

1、目前很多写作平台的编辑器都支持markdown,同时它是纯文本内容,兼容所有的文本编辑器与字处理软件,因此为了以后管理及搬迁文章,推荐使用markdown写作 2、推荐的博客平台:使用CSDN平台(支持markdown),而且可以设置付费专栏,订阅还有短信提醒

接下里介绍常用的几个语法格式

I、强调

1.1 斜体

将内容用 * 或 _ 包裹起来,包围的字词会被转成用<em>标签包围

*这里是斜体内容1*

_这里是斜体内容2_ 如果要在文字前后直接插入普通的星号或下划线,可以用反斜杠 \*  \_

效果

公众号:iOS逆向

1.2 粗体

用两个 * 或 _ 包起来的话,则会被转成粗体<strong>;

公众号:iOS逆向

1.3 删除线

使用两个 ~ 来给内容加上删除线,效果和使用<del>标签一样

公众号:iOS逆向博客:https://kunnan.blog.csdn.net

1.4 分隔线

你可以在一行中用三个或以上的*、-、_来创建一个分隔线,行内不能有其他东西。

1.5 引用

在要引用内容每行的最前面加上 >

  1. 区块引用可以有级别(例如:引用内的引用),只要根据级别加上不同数量的 > :
  2. 引用的区块内也可以使用其他的 Markdown 语法,包括标题、列表、代码块等:

1.6 代码块

行内代码:使用两个 ` 将代码内容包裹起来即可

有转义符的效果

高亮显示代码段:在需要高亮的代码块的前后各使用三个反引号( )把中间的代码包裹起来,并在第一个的末尾标识上语言类型即可

```objectivec 在这里插入代码片 ```

1.7  Diff 高亮

```diff 在这里插入代码片 ```

//  JoinCartAnimationTool
-//
+//公众号:iOS逆向
 //  Created by mac on 2021/6/23.
 //  Copyright © 2021 https://kunnan.blog.csdn.net/ . All rights reserved.

image.png

II、链接

在CSDNmarkdown编辑器按需查帮助语法

image.png

1 、行内链接

[内容](http_url)[博客](https://kunnan.blog.csdn.net)博客

2、参考样式链接

可以使用 参考样式 的方式添加一个链接,其结构为 [内容][1] + [1]: http_url "alt 提示" 的组合 This is [an example][id] reference-style link. Then, anywhere in the document, you define your link label like this, on a line by itself: [id]: http://example.com/  "Optional Title Here"

3、脚注 Footnote:

You can create footnotes like this[^footnote].

[^footnote]: Here is the text of the footnote.

image.png

4、微信公众号的文章中不允许添加除了公众号文章之外的站外链接,只能通过“阅读原文”、二维码等曲折方式实现

2.2 文章快速插入链接

  • 借助工具typora进行快速插入链接

【选中文字+command+K 】:使用剪切板的链接插到选中文字

  • 应用场景:预防被爬,文章除了设置为付费专栏文章,另外可以把文章的链接复制到剪贴板后,在文中快速地随机插链接

例如先使用 markdown编辑器typora进行文章编辑,在发布到CSDN。毕竟的typora插链接快捷键command+K自动用剪贴板中的链接插到选中文字的功能真的太给力了。

  • 技术博客写作工具总结:利用Typora提升写作效率

https://kunnan.blog.csdn.net/article/details/111589547

2.3 插入图片

图片的语法格式

![](pic_url "Optional title")

![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/20201114102711309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwMTg5Nzk=,size_16,color_FFFFFF,t_70#pic_center)

在这里插入图片描述

到目前为止, Markdown 还没有办法指定图片的宽高,如果需要的话,可以使用 HTML 中的 <img>标签:

<img src="https://ucc.alicdn.com/images/user-upload-01/20201114102711309.png" width="300px" height="200px" alt="好好学习">

去掉平台水印:直接去除图片URL的get参数即可

比如把URLhttps://ucc.alicdn.com/images/user-upload-01/20201114102711309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwMTg5Nzk=,size_16,color_FFFFFF,t_70#pic_center 修改为https://ucc.alicdn.com/images/user-upload-01/20201114102711309.png

在这里插入图片描述

III、标题

标题可以使用 - = 设置标题 可以使用 # 设置标题,至多支持 6级 标题设置

3.1 Atx 形式标题

Atx 形式则是在行首插入 1 到 6 个 #(最多支持 6 级标题) ,对应到标题 1 到 6 级

image.png

Setext 形式是用底线的形式,利用 等号= (一级标题)和 中划线/连字符 - (二级标题)

IV 列表

4.1无序列表

无序列表使用 * 、 + 或是 - 作为列表标记,比如:

+ 博客:https://blog.csdn.net/z929118967+ 公众号:iOS逆向

4.2  有序列表

有序列表则使用数字接着一个英文句号:

1. 博客:https://blog.csdn.net/z9291189672. 公众号:iOS逆向

  1. 博客:https://blog.csdn.net/z929118967
  2. 公众号:iOS逆向

4.3 待办列表

语法格式为 - [ ] todo,其中 [ ] (带空格的中括号)表示未完成的任务,x 表示已经完成的任务,比如:

- [x] 起床- [x] 吃饭- [ ] 工作- [ ] 看文章

  • [x] 起床
  • [x] 吃饭
  • [ ] 工作
  • [ ] 看文章

4.4 Markdown 的转义

转义符 \

针对语法中的符号进行转义

应用场景

在行首出现数字-句点-空白的内容时,Markdown 会将其当做一个列表进行展示,要避免这样的状况,可以在句点前面加上转义符 \

Markdown 支持在下面这些符号前面加上反斜杠来转移,以便在 Markdown 中插入普通的符号:

\   反斜杠 `   反引号 *   星号 _   下划线 {}  大括号 / 花括号 []  中括号 / 方括号 ()  小括号 / 括号 #   井号 +   加号 -   减号 .   英文句号 !   感叹号

V、创建表格

5.1  表格

表格语法:

项目     | 价格
-------- | ---
Computer | $1600
Phone    | $12
Pipe     | $1

第一行包含表头,并用"竖线"( | )分隔 第二行将标题与单元格分开,并且必须包含三个或更多破折号 第三行以及随后的任何行均包含单元格值

项目 价格
Computer $1600
Phone $12
Pipe $1

可以使用冒号来定义每一列的文本对齐方式

| 项目      |    价格 | 数量  |
| :-------- | :--:| --------: |
| left-aligned 文本居左| centered 文本居中|  5   |
| :--- 左侧冒号表示内容和标题栏居左对齐     |   :--: 两端都有冒号表示内容和标题栏居中对齐 |  ---: 右侧冒号表示内容和标题栏居右对齐 |
| Pipe      |    1 元 | 234  |
项目 价格 数量
left-aligned 文本居左 centered 文本居中 right-aligned 文本居右
:--- 左侧冒号表示内容和标题栏居左对齐 :--: 两端都有冒号表示内容和标题栏居中对齐 ---: 右侧冒号表示内容和标题栏居右对齐
Pipe 1 元 234

5.2 合并单元格 (难点)

Markdown虽然没有合并单元格的语法,但是 Markdown是兼容HTML,因此可以通过HTML的方式实现单元格合并。

5.3 HTML的table表格

  • 跨行合并:rowspan 跨列合并:colspan
  • caption元素定义表格标题。
<table>
 <caption>我是表格标题</caption>
</table>
  • 合并单元格思想:合并的顺序 先上先左

将多个内容合并的时候,就会有多余的东西,把它删除。例如,把3个td合并成一个,那么就多余了2个,就需要删除。公式:删除的个数=合并的个数-1

属性名 含义 常用属性值
border 设置表格的边框(默认border="0"无边框) 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认2像素)
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认1像素)
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、right、center
  • 常用属性

 

属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
CheckBox 复选按钮
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 用户自定义 控件名称
value 用户自定义 默认文本值
size 正整数 控件在页面中的显示宽度
checked checked 定义选择控件默认被选中项
maxlength 正整数 控件允许输入的最多字符

5.4 合并单元格的例子

<table>
 <tr>
     <th>数据类型</th>
     <th>数据元素</th>
     <th>敏感信息的脱敏规则</th>  
 </tr >
 <tr >
     <td rowspan="3">持卡数据</td>
     <td>信用卡卡号(PAN)</td>
     <td>信用卡号可显示前6后4,中间部分需要脱敏,可以“*”或其他字符代替</td>
 </tr>
 <tr>
     <td>有效期</td>
     <td rowspan="2">因PCI要求,有效期,验证码不可存储。</td>
 </tr>
 <tr>
     <td>验证码:CAV2/CVV2/CVC2/CID</td>
 </tr>

VI、 目录生成

6.1  用 [TOC]来生成目录:

目前支持这个语法的编辑器有

  • CSDN
  • mdnice

6.2  浏览器生成目录

推荐的Chrome插件是 SmartTOC

  • 效果

image.png

  • 安装:Chrome插件安装方式:打开Chrome浏览器,新开一个TAB。输入:chrome://extensions 并打开 "开发者模式"。加载提前下载好的安装包即可。
  • 例子:加载来源:~/桌面/Smart TOC

image.png

  • SmartTOC下载地址

VII、工具推荐

7.1 mdnice

目前支持md适配公众号和知乎平台排版

7.2 Typora

  • 技术博客写作工具总结:利用Typora提升写作效率

https://kunnan.blog.csdn.net/article/details/111589547

7.3 CSDN富文本模式使用小技巧

在标题行打开标题下拉 会有 已选择样式的 ,再次点击 当前行取消 标题样式设置;在标题行换行 自动切回 正常文本状态

image.png

  • 线上标签字符串,可使用行内代码 `或者使用转义符\

<script><script>

以下为效果对比图

image.png

VIII 、see also


目录
相关文章
|
2月前
Markdown如何学习,看完这篇文章就够了。(下)
Markdown如何学习,看完这篇文章就够了
|
2月前
typro收费了,怎么看markdown文章?推荐谷歌markdown插件
typro收费了,怎么看markdown文章?推荐谷歌markdown插件
typro收费了,怎么看markdown文章?推荐谷歌markdown插件
如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容
相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众号编辑器往往让我们费劲了脑汁。本人尝试了各种工具,比如:秀米一些在线提供多种不同样式的编辑器。虽然这些编辑器都能够完成编辑任务,但是效果并不理想。与我们所追求的简洁、清晰风格总是格格不入,尤其是对于代码的展示非常的不友好。所以,这里给大家推荐一个本站的在线工具,可以帮助大家快速地把Markdown文章转换成微信公众号支持的漂亮格式。
321 0
如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容
|
1月前
|
开发者
Markdown:解放排版,简洁高效的文字创作神器!
Markdown 是一种轻量级标记语言,以易读易写著称,常用于生成 HTML 页面。其简洁的语法加速了排版,尤其在写作、博客和文档领域广泛应用。虽然不擅长复杂排版,但能轻松实现字体大小调整、插入表格、图片和超链接等。Markdown 通过键盘快捷操作,避免了 Word 等软件的繁琐设置。本文将深入讲解 Markdown 语法,助你提升效率。Markdown 适合快速学习,兼容各种文本编辑器,支持导出多种格式,广泛应用于 GitHub 和多个在线平台。
16 0
|
2月前
Markdown如何学习,看完这篇文章就够了。(上)
Markdown如何学习,看完这篇文章就够了。
|
2月前
公众号“请勿插入不合法的图文消息链接”错误解决办法(Markdown)
公众号“请勿插入不合法的图文消息链接”错误解决办法(Markdown)
251 2
|
2月前
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
130 0
|
7月前
怎么添加文章目录,然后点击目录跳转到对应的内容目录标题+怎么打开MarkDown编辑
怎么添加文章目录,然后点击目录跳转到对应的内容目录标题+怎么打开MarkDown编辑
46 0
|
9月前
|
前端开发
【前端】从markdown格式文本中提取图片链接
【前端】从markdown格式文本中提取图片链接
104 0
|
10月前
CSDN-markdown 借助 html 实现文字样式设置
CSDN-markdown 借助 html 实现文字样式设置