WordPress编辑器实现markdown转html代码实现

最近文章都是使用markdown写的，但是wordpress编辑器不支持直接解析markdown格式，插件下载了markdown-import导入插件，但是发现不太方便，也不太好用，每次都要在本地新建md文件，然后再导入到网站，比较麻烦，而且对有li列表样式和代码样式时就容易解析错误，于是潘老师自己使用通义灵码，写了一个初版，然后自己再微调修改下，就轻松搞定了。

功能实现

将自定义Markdown转HTML按钮放置在“添加媒体”按钮那一排，以下是详细的步骤和代码：

步骤1：引入marked.js库

首先，确保marked.js库已经加载到你的WordPress项目中。我们在主题的functions.php文件中添加以下代码来引入marked.js：

function add_marked_js() { wp_enqueue_script('marked-js', 'https://cdn.jsdelivr.net/npm/marked/marked.min.js', array(), null, true); } add_action('admin_enqueue_scripts', 'add_marked_js');

步骤2：添加自定义按钮

接下来，你需要在WordPress编辑器上方添加一个自定义按钮。这可以通过JavaScript来实现。我们在主题的functions.php文件中添加以下代码来加载自定义脚本：

function add_custom_editor_button_script() { wp_enqueue_script('custom-editor-button', get_template_directory_uri() . '/js/custom-editor-button.js', array('jquery'), null, true); } add_action('admin_enqueue_scripts', 'add_custom_editor_button_script');

然后，在主题的js文件夹中创建一个名为custom-editor-button.js的文件（这个文件路径大家可以根据自己的主题实际情况调整），并添加以下代码：

jQuery(document).ready(function($) { // 创建按钮 var button = $('&lt;button&gt;', { text: 'Markdown转HTML', class: 'button', id: 'markdown-to-html-button' }); // 将按钮添加到“添加媒体”按钮后面 $('#insert-media-button').after(button); // 绑定按钮点击事件 $('#markdown-to-html-button').on('click', function(event) { // 阻止默认行为 event.preventDefault(); // 获取编辑器中的Markdown内容 $("#content").val(marked.parse($("#content").val())); }); });