快过年了，送你一份不一样的多姿多彩的typora~会简单使用md文档编辑器。是的。请带着这个问题，阅读下面的内容。官方下

typora

看前提示

本篇默认大家已经掌握了基础的md编辑技能，

会简单使用md文档编辑器。

思考

typora是啥？

你大概会不假思索的告诉我，“typora不就是一个文档编辑器嘛！”

是的。

但它真的是吗？

请带着这个问题，阅读下面的内容。

下载和安装

官方下载地址：https://www.typora.net/

或者https://typora.en.softonic.com/

下载安装无门槛，直接操作即可。

给你一个不一样的typora

打开你的typora,跟上我的节奏，

点击主题，可以看到6个可选主题，默认的是github主题。

他们分别对应不同的样式，不同的背景色调。

点击文件，往下找，可以看到偏好设置的选项。

点击它，可以看到如下的设置面板：

在这里插入图片描述
下面一个个的介绍。

通用

这里面有一个最重要的选项：开启调试模式
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LSvSlzgV-1643348906089)(C:\Users\melot\AppData\Roaming\Typora\typora-user-images\image-20220128113302177.png)]$
默认不勾选。
但是勾选此项后，关闭typora，然后再打开typora。
在typora上右击，鼠标菜单里是不是有了一个选项：检查元素

是的，你没有看错，这本该浏览器具有的功能，typora也有了。

此时，点击检查元素，可以看到：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X7ua00J8-1643348906090)(C:\Users\melot\AppData\Roaming\Typora\typora-user-images\image-20220128113522334.png)]$

有没有一点点震惊，这就是一个简易的浏览器呀！

既然它是一个html文件，我们当然可以改造它的样式。

举个例子：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0JEQBUKk-1643348906091)(C:\Users\melot\AppData\Roaming\Typora\typora-user-images\image-20220128113917601.png)]$

我们给这行文字设置了一个颜色，然后文本颜色发生了变化。

是不是很刺激？

后面还有更好玩的，到主题部分再讲述自定义自己的typora样式。

外观

因为我选择了night主题，所以，我勾选了在深色模式下使用独立的主题这个选项。

方便独立配置。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jJaMJWNd-1643348906092)(C:\Users\melot\AppData\Roaming\Typora\typora-user-images\image-20220128114204966.png)]$

编辑器

调节缩进：我一般设置为缩进4格。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-06Tl08YQ-1643348906093)(C:\Users\melot\AppData\Roaming\Typora\typora-user-images\image-20220128114246106.png)]$

匹配成对符号：这个挺好用，自动补全另一半的符号

拼写检查：默认选项是自动检测语言

如果你的typora中，有报错的下划线情况，比如

在这里插入图片描述

就可以通过设置不使用拼写检查来去除报错。
在这里插入图片描述

Markdown

扩展语法：可以让内容呈现出更多的表达方式

在这里插入图片描述

比如输入x的平方，勾选后就可以实现：

比如实现文字高亮：

高亮文字

代码块：

在这里插入图片描述

使用代码块时，可以看到效果：

console.log('@@@');
alert('###');

文件导出

typora左上角，选择文件 – 导出 – 格式

即可按照相应的格式，导出文件。

主题自定义配置

比如，我们想要一个这样的typora效果：
在这里插入图片描述

要怎么做到呢？

打开偏好设置配置面板，到外观配置项中，

找到打开主题文件夹：

在这里插入图片描述

此时，我们来到了typora的主题文件夹：

在这里插入图片描述

里面放置了可配置的主题的css样式文件。

于是，我们就可以通过对这些文件的更改，来改变我们的typora显示。

在此，以night主题为例。

用vscode打开这些文件。为避免对源文件的污染，我们另创建一个样式文件。

进入night文件夹，创建一个mynight.css文件。

在这里插入图片描述

如果需要引用图片，可以把图片也放进来。

在mynight.css文件中写入样式，样式要加上==!important==用于覆盖原有样式。

/* 自定义主题样式 */

h1, h2, h3, h4, h5, h6, p {
    margin: 0!important;
}

code {
    background-image: linear-gradient(to right, rgb(181, 232, 4), rgb(102, 179, 0))!important;
    color: #fff !important;
    border-radius: 4px !important;
    margin: 0 4px !important;
}

img {
    margin: 0 !important;
    margin-top: 5px !important;
    border: 2px solid rgb(111, 113, 114) !important;
}

h1::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 15px;
    height: 12px;
    background: url(./huaban.png) no-repeat center center;
    background-size: 100% 100%;
}

h1 span {
    background-color: rgba(0, 0, 0, .2)!important;
    text-shadow: 2px 2px #48111b!important;
    box-sizing: border-box!important;
    padding: 0 10px!important;
    border-radius: 8px!important;
}

h3 span {
    background-image: linear-gradient(rgb(246, 176, 0), rgb(249, 71, 4)) !important;
    box-sizing: border-box !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
}

mark {
    box-sizing: border-box !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    color: #ea5a67 !important;
}

pre {
    padding: 0px !important;
    margin: 10px 0 !important;
}

a {
    text-decoration: none!important;
}

a span {
    background-image: linear-gradient(rgb(43, 88, 201), rgb(53, 72, 196))!important;
    box-sizing: border-box!important;
    padding: 3px 8px!important;
    border-radius: 6px!important;
    border: 1px solid #b0b0b0!important;
}

然后打开/themes/night.css文件，引入刚才写的css样式：

在这里插入图片描述

保存代码，保存typora。

重新打开typora，输入内容，即可看到更改后的效果。

typora完整资料已放如gitee：

点击查看