你提到的问题是：Markdown 转换后的文章在 WordPress 中格式不正确，尤其是代码部分无法完美显示。这是因为 WordPress 默认使用纯文本格式保存文章内容，而 Markdown 中的代码块、标题、列表等格式需要特定的处理才能正确显示。
以下是解决这个问题的几种方法：
1. 保留 Markdown 格式
如果你希望文章在 WordPress 中仍然保留 Markdown 格式（如代码块、标题、列表等），可以将 Markdown 转换为 HTML，并将 HTML 内容直接保存到 WordPress 文章中。
修改代码
在发布文章时，不要将 Markdown 转换为纯文本，而是直接保存为 HTML：
// 使用 Parsedown 解析 Markdown
$parsedown = new Parsedown();
$content = $parsedown->text($markdown); // 直接保存为 HTML
// 发布文章
$post_id = wp_insert_post([
'post_title' => $title,
'post_content' => $content, // 保存 HTML 内容
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_category' => [$category],
]);优点
- 代码块、标题、列表等格式可以正确显示。
- 不需要额外的插件或主题支持。
缺点
- 文章内容以 HTML 格式保存，可能会影响某些 WordPress 主题的样式。
2. 使用 Markdown 插件
WordPress 本身不支持 Markdown，但可以通过插件来实现 Markdown 解析和显示。以下是推荐的两款插件：
插件 1：WP Githuber MD
- 这是一个功能强大的 Markdown 插件，支持实时预览、代码高亮等功能。
- 安装方法：
- 在 WordPress 后台，进入“插件” -> “安装插件”。
- 搜索“WP Githuber MD”，安装并激活。
- 在文章编辑器中，切换到 Markdown 模式。
插件 2：Jetpack
- Jetpack 是 WordPress 官方推出的多功能插件，其中包含 Markdown 支持。
- 安装方法：
- 在 WordPress 后台，进入“插件” -> “安装插件”。
- 搜索“Jetpack”，安装并激活。
- 启用 Markdown 模块：进入 Jetpack 设置，找到“Markdown”模块并启用。
修改代码
如果你使用 Markdown 插件，可以直接将 Markdown 内容保存到文章中，插件会自动解析并显示：
// 直接保存 Markdown 内容
$content = $markdown;
// 发布文章
$post_id = wp_insert_post([
'post_title' => $title,
'post_content' => $content, // 保存 Markdown 内容
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_category' => [$category],
]);优点
- 插件会自动处理 Markdown 解析和显示。
- 支持代码高亮、表格等高级功能。
缺点
- 需要安装额外的插件。
3. 使用代码高亮插件
如果文章中的代码部分无法正确显示，可以安装代码高亮插件，例如：
插件：SyntaxHighlighter Evolved
- 这是一个流行的代码高亮插件，支持多种编程语言。
- 安装方法：
- 在 WordPress 后台，进入“插件” -> “安装插件”。
- 搜索“SyntaxHighlighter Evolved”，安装并激活。
- 在文章中使用
[code]短代码包裹代码块。
修改代码
在发布文章时，将代码块用 [code] 短代码包裹：
// 使用 Parsedown 解析 Markdown
$parsedown = new Parsedown();
$html = $parsedown->text($markdown);
// 将代码块用 [code] 短代码包裹
$content = preg_replace('/<pre><code>(.*?)</code></pre>/s', '[code]$1[/code]', $html);
// 发布文章
$post_id = wp_insert_post([
'post_title' => $title,
'post_content' => $content, // 保存包含短代码的内容
'post_status' => 'publish',
'post_author' => get_current_user_id(),
'post_category' => [$category],
]);优点
- 代码部分可以高亮显示。
- 支持多种编程语言。
缺点
- 需要安装额外的插件。
4. 自定义 CSS 样式
如果你希望手动控制文章的样式，可以在 WordPress 主题中添加自定义 CSS。
修改主题的 style.css
- 打开当前主题的
style.css文件（位于wp-content/themes/your-theme/style.css）。 - 添加以下样式：
/* 代码块样式 */
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: Consolas, Monaco, monospace;
font-size: 14px;
color: #d63384;
}
/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: bold;
}
h1 { font-size: 2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 0.875em; }
/* 列表样式 */
ul, ol {
margin-left: 20px;
margin-bottom: 1em;
}
li {
margin-bottom: 0.5em;
}优点
- 完全自定义文章样式。
- 不需要安装插件。
缺点
- 需要手动编写和维护 CSS。
总结
根据你的需求，可以选择以下方案：
- 保留 Markdown 格式：将 Markdown 转换为 HTML 并保存。
- 使用 Markdown 插件：安装 WP Githuber MD 或 Jetpack，直接保存 Markdown 内容。
- 使用代码高亮插件：安装 SyntaxHighlighter Evolved，将代码块用短代码包裹。
- 自定义 CSS 样式：在主题中添加自定义 CSS，手动控制文章样式。
推荐使用 Markdown 插件（如 WP Githuber MD），因为它可以自动处理 Markdown 解析和代码高亮，同时保持文章的格式正确。
