Markdown自定义CSS样式

前言

当我第一次接触到Markdown时，我就深深爱上了它。这简洁的界面，编程式的书写都令我爱不释手，最重要的是，还能够支持自定义html、css。

自定义CSS样式

说到Markdown，就不得不提及Typora这个软件，本例子即是在此软件的环境下完成。想要自定义CSS，首先得有一定的htm，css基础。

1.寻找Typora的主题CSS文件

确认typora软件用的主题

文件 -> 外观 -> 打开主题文件 -> 找到对应的css文件，因为我用的主题是Night，所以我应该找night.css

2.新建主题名.user.css文件

新建一个night.user.css文件，在里面编写自己的css，从上图中可看到我已经创建好了，记住，用的什么主题，就新建对应的css文件（主题名.user.css)。在编写文章时，主题名.user.css文件中的样式优先级会更高。

比如在文件中添加一行css：

// 全局文字为绿色
span {
   color: green;
}

效果如下：

图片居中且添加图注

当我们在Typora上插入图片，图片是自动居中的，这是Typora内置的设置，但如果查阅文章的源码，发现其实并没做处理，如果直接复制粘贴源代码到其他平台发布，图片是默认左对齐。

如何使图片居中？

Markdown支持内嵌html、css代码。只需要会一点这方面的知识，就能够实现居中，甚至可以充分自定义文章的样式。

在Markdown中插入图片的默认格式如下：

![图片描述](图片链接)

提取图片链接，放到以下代码中，将代码直接粘贴到编辑区，即可实现图片居中：

<div align="center">
   ![](图片链接)
</div>

如果想添加图注，可以这样写：

<div align="center">
   ![](图片链接)
   <p>
      图注
   </p>
</div>

比如你看上面的图片都是向左对齐（除了分辨率高占满全屏的图片），引用这个方式之后就居中了↓

我居中了！

如果还不满意，自定义这些css吧。

结合讨论

通过以上两个实验，可以知道能够精细化定义css样式，我们在文本中添加html代码，自定义类选择器或ID选择器，然后在全局css文件中编写选择器样式，即可像web一样做出很多优美的定制化样式。

原文地址：https://blog.csdn.net/weixin_40571331/article/details/122753867?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905825116782425116257%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905825116782425116257&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-6-122753867-null-null.142^v88^insert_down38v5,239^v2^insert_chatgpt&utm_term=markdown