wordpress 发布markdown内容及格式问题解决方案

你提到的问题是：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 插件，支持实时预览、代码高亮等功能。
• 安装方法：
  1. 在 WordPress 后台，进入“插件” -> “安装插件”。
  2. 搜索“WP Githuber MD”，安装并激活。
  3. 在文章编辑器中，切换到 Markdown 模式。

插件 2：Jetpack

• Jetpack 是 WordPress 官方推出的多功能插件，其中包含 Markdown 支持。
• 安装方法：
  1. 在 WordPress 后台，进入“插件” -> “安装插件”。
  2. 搜索“Jetpack”，安装并激活。
  3. 启用 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

• 这是一个流行的代码高亮插件，支持多种编程语言。
• 安装方法：
  1. 在 WordPress 后台，进入“插件” -> “安装插件”。
  2. 搜索“SyntaxHighlighter Evolved”，安装并激活。
  3. 在文章中使用 [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

1. 打开当前主题的 style.css 文件（位于 wp-content/themes/your-theme/style.css）。
2. 添加以下样式：

/* 代码块样式 */
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。

总结

根据你的需求，可以选择以下方案：

1. 保留 Markdown 格式：将 Markdown 转换为 HTML 并保存。
2. 使用 Markdown 插件：安装 WP Githuber MD 或 Jetpack，直接保存 Markdown 内容。
3. 使用代码高亮插件：安装 SyntaxHighlighter Evolved，将代码块用短代码包裹。
4. 自定义 CSS 样式：在主题中添加自定义 CSS，手动控制文章样式。

推荐使用 Markdown 插件（如 WP Githuber MD），因为它可以自动处理 Markdown 解析和代码高亮，同时保持文章的格式正确。