安企CMS作为一款高效、可定制的内容管理系统，在内容展示方面提供了极大的灵活性。对于内容创作，我们深知Markdown的便捷性与普及度。安企CMS新版本也全面支持Markdown编辑器，并能将其内容渲染成HTML，默认情况下会引入github-markdown.min.css以提供一致且美观的样式。然而，作为网站运营人员，我们经常会遇到需要根据品牌形象、用户体验或特定业务需求，对Markdown渲染后的内容进行个性化样式定制的情况。
本文将详细指导您如何在安企CMS中实现Markdown渲染后的自定义CSS样式，彻底摆脱默认的github-markdown.min.css限制，让您的内容展示更具特色。
理解安企CMS的模板结构与Markdown渲染机制
在安企CMS中，网站页面的呈现离不开其强大的模板系统。根据《模板制作的一些基本约定》和《模板制作的目录和模板》文档，我们的模板文件通常以.html后缀存放于/template目录下，而静态资源如CSS、JS和图片等则统一管理在/public/static/目录中。页面通常有一个基础模板，例如base.html，用于定义网站的整体布局和引入全局资源。
《安企CMS如何在网页正确使用Markdown以及显示数学公式和流程图》文档明确指出，为了在网页上应用Markdown默认样式，我们需要在base.html文件的头部添加如下一行代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
这行代码负责从外部CDN加载github-markdown.min.css，为所有Markdown渲染出的HTML元素提供默认的GitHub风格样式。Markdown本身并不包含样式，它只是将特定的标记语法转换成标准的HTML标签（例如，# 标题会转换为<h1>，**粗体**会转换为<strong>）。因此，要自定义Markdown的样式，本质上就是对这些由Markdown转换而来的HTML标签进行CSS样式定义。
移除默认Markdown样式
定制化的第一步是移除或禁用默认的github-markdown.min.css。如果您直接在base.html中覆盖其样式，可能会因为CSS选择器权重等问题导致部分样式无法生效，或者增加不必要的代码量。最直接有效的方法是在base.html中找到并注释掉或删除上述引入github-markdown.min.css的<link>标签。
在您模板的base.html文件中，定位到类似以下的代码行：
{# ... 其他样式或元数据 ... #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
{# ... 其他样式或元数据 ... #}
将其注释掉：
{# ... 其他样式或元数据 ... #}
{# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> #}
{# ... 其他样式或元数据 ... #}
或者直接删除该行代码。完成这一步后，您的Markdown内容在页面上将不再具有GitHub风格的默认样式，通常会以浏览器默认的HTML元素样式呈现。
创建与引入自定义Markdown样式
接下来，我们将创建自己的CSS文件来定义Markdown内容的样式。根据安企CMS的静态资源管理约定，我们可以将自定义CSS文件放置在/public/static/css/目录下，例如命名为custom-markdown.css。
您可以通过FTP、SFTP或宝塔面板等工具，在网站根目录的/public/static/css/路径下创建一个新的CSS文件，例如custom-markdown.css。
在新创建的custom-markdown.css文件中，您可以开始定义针对Markdown渲染后HTML元素的样式。以下是一个简单的示例，展示如何为一些常见的Markdown元素定义样式：
/* custom-markdown.css */
/* 定义整个Markdown内容容器的样式 */
.markdown-body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
color: #333;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
.markdown-body h1 {
font-size: 2.2em;
border-bottom: 1px solid #eee;
padding-bottom: 0.3em;
margin-top: 1em;
margin-bottom: 16px;
color: #2196f3; /* 蓝色 */
}
.markdown-body h2 {
font-size: 1.8em;
border-bottom: 1px dashed #eee;
padding-bottom: 0.3em;
margin-top: 1em;
margin-bottom: 16px;
color: #4caf50; /* 绿色 */
}
.markdown-body h3 {
font-size: 1.4em;
margin-top: 1em;
margin-bottom: 16px;
color: #ff9800; /* 橙色 */
}
/* 段落样式 */
.markdown-body p {
margin-bottom: 1em;
}
/* 链接样式 */
.markdown-body a {
color: #0366d6;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
/* 列表样式 */
.markdown-body ul, .markdown-body ol {
margin-left: 20px;
margin-bottom: 1em;
}
.markdown-body ul li {
list-style-type: disc;
}
.markdown-body ol li {
list-style-type: decimal;
}
/* 引用块样式 */
.markdown-body blockquote {
border-left: 4px solid #ccc;
padding: 0 1em;
color: #6a737d;
margin: 1em 0;
background-color: #f9f9f9;
}
/* 行内代码样式 */
.markdown-body code {
background-color: rgba(27,31,35,.05);
border-radius: 3px;
padding: 0.2em 0.4em;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 85%;
color: #e91e63; /* 粉色 */
}
/* 代码块样式 */
.markdown-body pre {
background-color: #282c34;
color: #abb2bf;
padding: 1em;
border-radius: 5px;
overflow-x: auto;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.markdown-body pre code {
background-color: transparent;
padding: 0;
color: inherit;
font-size: 100%;
}
/* 表格样式 */
.markdown-body table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
font-size: 0.9em;
}
.markdown-body table th, .markdown-body table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.markdown-body table th {
background-color: #f2f2f2;
font-weight: bold;
}
定义完自定义样式后，您需要在base.html中引入这个新的CSS文件。在之前移除默认样式的位置，添加如下代码：
{# ... 其他样式或元数据 ... #}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/custom-markdown.css" />
{# ... 其他样式或元数据 ... #}
这里我们使用了{% system with name='TemplateUrl' %}标签。根据《系统标签》文档的说明，TemplateUrl可以获取模板静态文件地址，这确保了您的CSS文件能够正确加载，即使在多站点或不同部署环境下也能保持路径的正确性。
重要提示：
Markdown内容在安企CMS中默认会被包裹在一个带有特定class或id的容器中（通常是编辑器渲染的结果）。为了确保您的CSS样式仅应用于Markdown内容而不影响页面其他部分，建议将Markdown内容包裹在一个具有特定class的div元素中，例如markdown-body。如果您无法直接控制内容外层容器的class，您可能需要检查浏览器开发者工具，了解Markdown内容实际渲染的HTML结构，并编写更具针对性的CSS选择器。
例如，在您的文章详情模板（如archive/detail.html）中，Markdown渲染后的内容通常通过{% archiveDetail archiveContent with name="Content" %}{{archiveContent|safe}}{% endarchiveDetail %}这样的标签输出。您可以在这个输出外部包裹一层div：
<div class="markdown-body">
{%- archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}
{% endarchiveDetail %}
</div>
请注意render=true参数，它明确告诉系统对内容进行Markdown到HTML的转换。如果您的Markdown编辑器已启用，通常不需要显式设置此参数，但为了确保兼容性和明确性，加上它是一个好习惯。
测试与优化
完成上述步骤后，您需要清除安企CMS的缓存（在后台的“更新缓存”功能中操作），然后刷新您的网站页面，查看Markdown内容的样式是否已按预期显示。
使用浏览器的开发者工具（通常按F12键），您可以检查Markdown内容渲染后的HTML结构，并实时调整CSS样式。这有助于您理解Markdown标记如何转换为HTML元素，并精确地定位需要修改的样式规则。
不断迭代和测试，直到您的Markdown内容呈现出您所期望的视觉效果。这种方法不仅提供了完全的样式控制权，也让您的网站内容更符合整体设计。
常见问题解答 (FAQ)
1. 我已经添加了自定义CSS并清除了缓存，但Markdown样式仍然没有变化，这是为什么？
这通常是由几个原因造成的。首先，请确保您已经彻底移除了默认的github-markdown.min.css引用，而不仅仅是覆盖。其次，检查您的自定义CSS文件路径是否正确，以及在base.html中引入该文件的<link>标签是否正确书写。可以使用浏览器开发者工具的网络(Network)选项卡，查看custom-markdown.css文件是否成功加载。如果加载失败，请检查路径。
另一个常见原因是CSS选择器的优先级问题。如果您的自定义CSS选择器权重不够高，可能会被其他默认样式或框架样式覆盖。请尝试在您的选择器前添加更具体的父级选择器，例如.markdown-body h1，或者在样式声明后添加!important（不推荐滥用，但可用于调试）。同时，确保您的Markdown内容确实被一个具有.markdown-body类的div或其他适当的容器包裹。
2. 如何知道Markdown会生成哪些HTML标签，以便我能针对性地编写CSS？
最直接有效的方法是在一个简单的Markdown文档中编写各种Markdown语法（例如标题、段落、列表、链接、代码块、表格等），然后在浏览器中查看该文档的渲染结果。使用浏览器的开发者工具（通常是按F12键打开），右键点击Markdown内容中的某个元素，选择“检查元素(Inspect Element)”，即可看到该Markdown语法对应的HTML标签结构。
例如，通过检查，您会发现：
# Heading会生成<h1>## Subheading会生成<h2>This is a paragraph.会生成<p>* List item会生成<ul><li>1. Ordered item会生成<ol><li>`inline code`会生成<code>- `