Cleaning Up OpenAI API Output with a Simple PHP Markdown Parser

If you’ve been working with the OpenAI API, you know it can generate some incredibly insightful content. But, there’s one problem: in its raw form, the output is often filled with markdown symbols like **, *, #, and more, which isn’t user-friendly unless you’re used to reading raw markdown.

For a WordPress site, displaying this raw output directly is not ideal. Imagine posting a blog and seeing all those markdown symbols staring back at you—it’s pretty ugly, right? Thankfully, this problem is easy to solve with a little PHP magic! Let’s take a look at how you can clean up the content and present it beautifully to your readers.

The Problem: Raw OpenAI Output

Here’s an example of what the raw OpenAI API response might look like if you use it directly:

# This is a heading

Here is some **bold** text, some *italic* text, and a `code snippet`.

- Item 1
- Item 2

If you post this directly into your WordPress blog, it won’t look good. The markdown symbols (**, *, #, -) will show up as plain text, which ruins the readability and design of your post.

The Solution: Parse the Markdown

To make this output user-friendly and attractive, we need to process the markdown into HTML. Here’s a simple, vanilla PHP function that you can use to convert the markdown output from the OpenAI API into HTML that WordPress loves.

function parseMarkdown($text) {
    // Convert headings
    $text = preg_replace('/###### (.*?)(\n|$)/', '<h6>$1</h6>', $text);
    $text = preg_replace('/##### (.*?)(\n|$)/', '<h5>$1</h5>', $text);
    $text = preg_replace('/#### (.*?)(\n|$)/', '<h4>$1</h4>', $text);
    $text = preg_replace('/### (.*?)(\n|$)/', '<h3>$1</h3>', $text);
    $text = preg_replace('/## (.*?)(\n|$)/', '<h2>$1</h2>', $text);
    $text = preg_replace('/# (.*?)(\n|$)/', '<h1>$1</h1>', $text);

    // Convert bold and italics
    $text = preg_replace('/\*\*\*(.*?)\*\*\*/', '<b><i>$1</i></b>', $text); // bold and italic
    $text = preg_replace('/\*\*(.*?)\*\*/', '<b>$1</b>', $text); // bold
    $text = preg_replace('/\*(.*?)\*/', '<i>$1</i>', $text); // italic

    // Convert unordered lists
    $text = preg_replace('/\n\s*-\s*(.*?)(\n|$)/', '<ul><li>$1</li></ul>', $text);
    $text = preg_replace('/<\/ul>\s*<ul>/', '', $text); // Merge consecutive lists

    // Convert inline code
    $text = preg_replace('/`(.*?)`/', '<code>$1</code>', $text);

    // Convert code blocks
    $text = preg_replace('/```(.*?)```/s', '<pre><code>$1</code></pre>', $text);

    // Convert line breaks
    $text = nl2br($text);

    return $text;
}

Example: Before and After

Before using the function:

# This is a heading

Here is some **bold** text, some *italic* text, and a `code snippet`.

- Item 1
- Item 2

After using the function:

<h1>This is a heading</h1>

<p>Here is some <b>bold</b> text, some <i>italic</i> text, and a <code>code snippet</code>.</p>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

nce you pass your content through this function, the output will be transformed into clean, WordPress-ready HTML. No more markdown symbols, just beautiful, styled content.

Integrating with WordPress

If you want to use this in your WordPress blog, you can easily integrate it into your theme or plugin. Just add this function to your functions.php file, and whenever you pull content from the OpenAI API, run it through the parseMarkdown() function before displaying it on the page.

For example:

$content_from_ai = $openai_api->getContent();  // Assuming this pulls the raw AI output
$processed_content = parseMarkdown($content_from_ai); // Process the markdown into HTML
echo $processed_content;  // Display the cleaned content

Final Thoughts

Using OpenAI’s API for content generation is a game-changer, but displaying raw output with markdown symbols is less than ideal. By parsing the markdown with a simple PHP function, you can make sure your content looks polished and professional on WordPress.

No more ugly, raw markdown—just beautiful, styled posts that match the rest of your site.

Happy coding!