WordPress Parsedown: Markdown to Html Conversion

Posted on

WordPress, by default, does not support Markdown. However, you can easily extend its functionality by using the Parsedown library, a popular and efficient Markdown parser written in PHP. By integrating Parsedown into your WordPress theme, you can write posts in Markdown and have them automatically converted to HTML when saved, allowing for a more streamlined and flexible writing process.

Introduction to Parsedown

Parsedown is a well-maintained and widely-used PHP library that converts Markdown text into HTML. It’s known for its speed and performance, making it an excellent choice for integrating Markdown support into WordPress. With Parsedown, you can write in a simple and intuitive syntax, focusing on the content rather than HTML tags. This is especially useful for writers who prefer a cleaner and more readable text format.

Setting Up Parsedown in WordPress

  1. Download Parsedown:

    • Start by downloading the Parsedown library from its official GitHub repository.
    • Extract the Parsedown.php file from the downloaded archive.
  2. Upload to Theme Directory:

    • Upload the Parsedown.php file to your WordPress theme directory, typically located at wp-content/themes/your-theme/.
    • Ensure the file is accessible within your theme directory for inclusion in the WordPress functions.
  3. Modify functions.php:

    • Edit your theme’s functions.php file to include the Parsedown library.
    • Add a function to convert Markdown to HTML whenever a post is saved.
    • Use the save_post action hook to trigger this function.
// Include Parsedown library
require_once get_template_directory() . '/Parsedown.php';

function save_markdown_as_html($post_id, $post, $update) {
    // Only apply to posts and pages
    if ($post->post_type != 'post' && $post->post_type != 'page') {
        return;
    }

    // Check if this is an auto-save routine
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // Check user permissions
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // Get the post content
    $content = $post->post_content;

    // Convert Markdown to HTML
    $Parsedown = new Parsedown();
    $html_content = $Parsedown->text($content);

    // Sanitize the HTML output
    $safe_html_content = wp_kses_post($html_content);

    // Remove the filter to avoid infinite loop
    remove_action('save_post', 'save_markdown_as_html', 10);

    // Update the post content with the sanitized HTML
    wp_update_post(array(
        'ID'           => $post_id,
        'post_content' => $safe_html_content,
    ));

    // Re-add the filter
    add_action('save_post', 'save_markdown_as_html', 10, 3);
}

// Hook into the save_post action
add_action('save_post', 'save_markdown_as_html', 10, 3);

Benefits of Using Markdown with Parsedown

  • Simplicity: Markdown allows you to write using an easy-to-read and easy-to-write plain text format, which can be quickly converted to structurally valid HTML.
  • Efficiency: Writing in Markdown can significantly speed up your content creation process, as you can focus on the content rather than the formatting.
  • Readability: Markdown documents are more readable in their raw form compared to HTML, which makes editing and managing content easier.

Security Considerations

When integrating Markdown to HTML conversion, it’s essential to consider security, especially regarding user-generated content. Parsedown itself is safe, but you should always sanitize the output to prevent XSS (Cross-Site Scripting) attacks. The wp_kses_post function in the provided code ensures that the converted HTML content is sanitized, allowing only safe HTML tags and attributes.

Testing the Integration

After setting up the Parsedown integration, test it to ensure it works as expected:

  • Create a New Post: Write your post using Markdown syntax in the WordPress editor.
  • Save the Post: Save or publish the post and ensure the content is converted to HTML.
  • View the Post: Check the front end of your website to verify the post displays correctly.

Customization and Extensibility

The integration can be customized further based on your needs. For example, you might want to:

  • Extend Markdown Syntax: Use additional Markdown extensions or plugins to enhance functionality.
  • Apply to Custom Post Types: Modify the code to apply Markdown conversion to custom post types if necessary.
  • Live Preview: Implement a live preview feature in the WordPress editor to see the converted HTML in real-time as you write in Markdown.

Summary

Integrating Parsedown into WordPress is a powerful way to enhance your content creation workflow, providing a simple yet robust method for writing and formatting posts. By automatically converting Markdown to HTML, you can enjoy the benefits of Markdown’s simplicity and readability while maintaining the flexibility and functionality of HTML. With the steps outlined above, you can set up and customize this integration to suit your specific needs, making your WordPress experience even more seamless and efficient.

Was this helpful?

Thanks for your feedback!