使用教程前言

一次偶然的机会,让我接触到了 .md 文档,进而开始摸索,并意外结识了 这个编辑器。

简介

是一种轻量级标记语言,创始人为 John 。它允许人们「使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者 HTML)文档」。

为什么要用

对于我而言,我选择的原因如下:

回归到内容本身,注重文章本身的结构,而不是样式

的语法简单,记住几个常用的就可以释放鼠标了

当前许多网站都支持用 来撰写文档

基本语法一、标题

语法格式:#+空格+标题,一个#是一级标题,两个##是两级标题,以此类推,支持六级标题

二、字体三、引用

语法格式:>+引用文字

我是引用文字

引用也可以嵌套:

如加两个>>

三个>>>

支持无线套娃~~

四、分割线

语法格式:三个或者三个以上的 - 或者 * 都可以,如***

五、图片

语法格式:![alt](图片地址 ''title'')

alt 指的是当图片链接失效时显示的提示文字,可加可不加 title是图片的标题,当鼠标移到图片上时显示的内容,可加可不加

博客园主题_博客园主题美化sakura_博客园背景图

如果你想要调整图片大小,有两种方式:

右击图片,选择缩放图片后,语法格式将变成

,20%可自行调整

通过HTML调节,格式如下:

<center>
    <img style="border-radius: 20px;"
         src="Typora.assets/baymax.jpg" 
         alt="baymax"
         width="688" >

</center>

博客园主题_博客园主题美化sakura_博客园背景图

你也可以通过如下代码为图片添加图注:

<center>
    <img style="border-radius: 20px;"
         src="" 
         alt=""
         width="688" >

    <br>
    <div style="color: #999; padding: 2px;">
        图注
    </div>
</center>

博客园主题_博客园主题美化sakura_博客园背景图

Hello,I'm ,your .

> 我使用的博客园主题不支持缩放代码,所以我选择了使用HTML的方式调整图片大小。放置上 设置圆角 的代码后我才发现,我使用的主题同样也不支持-:weary:

六、超链接

语法格式:[超链接名](超链接地址)

七、列表

语法格式:无序列表用 - + * 任何一种都可以,如+ 我是无序列表

加号和内容之间需要放置一个空格

语法格式:数字+点+空格+内容,如1. 我是有序列表

在子列表前按下tab键即可构成子列表。

八、表格

语法格式:

|左对齐|居中对齐|右对齐|
|:----|:----:|---:|
|左|中|右|

左对齐居中对齐右对齐

第二行分割表头和内容,并声明内容的对齐格式。一般而言,不这么用,感觉太费劲了,下面再介绍快捷键。

九、代码

语法格式:用一个反引号包起来代码内容,代码会以主题中设置的样式出现在行内,但不会实现代码高亮。

语法格式:代码之间分别用三个反引号包起来,且两边的反引号单独占一行

``` 语言 代码内容 ```

语言:C、C++、JAVA 等

十、高级技巧

转义

使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符, 使用反斜杠转义特殊字符:

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

行内公式()用$...$括起公式,公式会出现在行内。

块间公式()用$$...$$括起公式(注意$$后需要换行),公式会默认显示在行中间。

$$
块间公式
$$

支持HTML

是一款轻便简洁的 编辑器,支持即时渲染技术,这也是与其他编辑器最显著的区别。即时渲染使得你写 就像是写Word文档一样流畅自如。个人认为是一款很好用的 编辑器,特来分享给大家❤️

软件安装

官网下载:

阿里云:

支持正版

以下内容引用自 的下载和破解|博客园

软件安装后,下载破解补丁 app.asar,并覆盖至安装路径的 文件夹内,参考路径:

D:\

打开 ,点击输入序列号;

博客园主题_博客园主题美化sakura_博客园背景图

邮箱一栏中任意填写(但须保证邮箱地址格式正确),输入序列号,点击激活。

可选序列号:

博客园主题_博客园背景图_博客园主题美化sakura

在中书写

语法快捷键

一级标题

ctrl+1

二级标题

##

ctrl+2

三级标题

###

ctrl+3

四级标题

####

ctrl+4

五级标题

#####

ctrl+5

六级标题

######

ctrl+6

加粗

**粗体**

ctrl+B

斜体

*斜体*

ctrl+I

下划线

下划线

ctrl+U

删除线

~~删除线~~

alt+shift+5

创建表格

ctrl+T

创建超链接

[超链接名](超链接地址)

ctrl+K

插入图片

![alt](图片地址)

ctrl+shift+I

插入公式块

$$公式$$

ctrl+shift+M

添加引用

>内容

ctrl+shift+Q

无序列表

+ 内容

ctrl+shift+]

有序列表

1. 内容

ctrl+shift+[

粘贴为纯文本

ctrl+shift+V

返回顶部

ctrl+Home

返回底部

ctrl+End

启用/退出 源代码模式

ctrl+/

搜索

ctrl+F

搜索并替换

ctrl+H

选中光标所在行

ctrl+L

生成文档目录

[toc]+Enter

快速打开最新文档

ctrl+P

TOC从文档中提取所有标题,其内容将自动更新。

图片插入

插入图片除了使用插入语句外,还可以:

会自动帮你插入符合 语法的图片语句,并给它添加alt。

打字机模式和专注模式

通过 视图→→打字机模式/专注模式 开启或关闭:

空格与换行

需要说明的是,在 语法中,换行(line break)与换段是不同的,且换行分为软换行和硬换行。

支持emoji 表情

在 中,你可以用:emoji:的形式来打出 emoji,软件会自动给出图形的提示。

Tips

安利一个快捷键提示工具,轻量级+快捷方便。

官网:

它本身支持的软件列表并不包含,但给出了自定义软件快捷键的方式,所以博客园主题,我就自己捣鼓了一下:

博客园主题_博客园主题美化sakura_博客园背景图

自行选择下载:.json

不含开机自启的选项,如果你想要设置成开机自启,可参考如下方法:

将需要自启动软件创建一个快捷方式

按 win+ R,键入shell:,打开 「启动」 文件夹

将需要开机自启动的软件的快捷方式拖到启动文件夹中

设置图片自动上传

固然好用,也固然好用,但图片该怎么处理?总不能自己一张张的上传,然后在复制网络连接吧,也不是不可以

下面介绍两种方式实现自动上传。

一、使用 PicGo-Core

下载 PicGo-Core

博客园主题_博客园主题美化sakura_博客园背景图

选择sm.ms作为图床并配置 token

免费版存储容量 5GB,每分钟限制上传20张,每小时限制上传100张博客园主题,每天限制上传200张,每周限制上传500张,每月限制上传1000张,单张图片最大5M。该图床建立于2015年,目前免费用户无法使用香港节点因此速度比较慢(白嫖党没这么多事)。

打开官网 ,注册后登录。

打开该网址 ,生成 token。

博客园主题美化sakura_博客园背景图_博客园主题

最后点击③位置配置 token,放置如下代码:

{
  "picBed": {
    "uploader""smms",
    "smms": {
      "token""xxxxxxxxxxxxxxxxxxxxxx"
    }
  },
  "picgoPlugins": {}
}

token 换成刚刚生成的 sm.ms 的token。

按照步骤配置好后,点击验证图片上传选项,如果提示验证成功,那么恭喜,你毕业了;

拖拽图片到 实现自动上传并更改 url 的功能。

二、使用 PicGo 软件

安装 Node.js

下载地址:

安装步骤:

双击``node-v16.14.2-x64.msi`进行安装。

自定义安装路径

博客园主题美化sakura_博客园主题_博客园背景图

注意:不要勾选附加选项

安装完成记得重启电脑。

Gitee相关

打开 Gitee(官网:),如果没有账户,新建一个。

新建仓库

仓库开源设置

博客园主题美化sakura_博客园背景图_博客园主题

博客园背景图_博客园主题_博客园主题美化sakura

生成私人令牌

博客园背景图_博客园主题_博客园主题美化sakura

注意保存好私人令牌的序列号,只显示这一次。

安装 PicGo

下载地址:

在官网上下载要选择正式稳定的版本。

安装步骤:

双击PicGo-Setup-2.3.0-x64.exe进行安装。

自定义安装路径

博客园主题美化sakura_博客园主题_博客园背景图

插件安装,选择-plus或者gitee-,二者择其一即可,我选择的是git-plus。

博客园背景图_博客园主题美化sakura_博客园主题

配置 gitee,并设置为默认图床:

token放置上述过程生成的序列号即可

重启 PicGO 软件(关闭后重新打开)。

图像配置

重新打开 ,选择 文件->偏好设置->图像:

博客园背景图_博客园主题_博客园主题美化sakura

如果出现如下选项:

恭喜你,你拥有了自己的图床了~~

三、我的配置

对于我而言,我更倾向于先将拖拽到的图像保存到本地,便于管理:

博客园背景图_博客园主题美化sakura_博客园主题

最后再统一上传:

博客园主题美化sakura_博客园背景图_博客园主题

四、注意事项

自定义的HTML中的图片无法上传,只有通过创建的图像才可以。

不要在上传同名的图片,如果要修改图片内容,去Gitee上传。

既然提到了图床,那就顺带安利一个图片压缩工具:

在获取API的时候,如果长时间未收到反馈邮件,去垃圾邮件看看,会有意想不到的收货

主题

使用 内置主题:点击状态栏「主题」,选择喜欢的主题样式

自定义主题:通过「文件-偏好设置-外观-打开主题文件夹」打开的主题文件夹,将自定义的 CSS 文件导入到文件夹中并重启,在「主题」中选择你导入的主题样式即可

自定义的主题样式:

博客园背景图_博客园主题_博客园主题美化sakura

博客园背景图_博客园主题美化sakura_博客园主题

博客园背景图_博客园主题美化sakura_博客园主题

博客园主题美化sakura_博客园背景图_博客园主题

我根据他们的样式,在主题的基础上,做了小小的改动️

博客园背景图_博客园主题_博客园主题美化sakura

博客园主题美化sakura_博客园主题_博客园背景图

结尾

希望这篇 保姆级教程能够帮助到大家,如果这篇文章对你有帮助,你能给我三连一下是最大的支持!

热门内容:
最近面试BAT,整理一份面试资料Java面试BAT通关手册,覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。
获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。

明天见(。・ω・。)ノ♡

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注