Seeking Help to Automatically Preserve Code Snippets When Importing CSV to Webflow

Hello everyone,

I’m reaching out to the community for some advice or guidance on an issue I’m facing with importing blog posts into Webflow.

The Challenge: I have around 500 blog posts that I need to migrate to Webflow. These posts are currently in a CSV format. A significant feature of these blog posts is that they contain over 3,000 code snippets, which are crucial to the content. These snippets are currently formatted within <pre><code> tags in the CSV.

The Problem: When I import these posts into Webflow, the platform’s HTML ‘clean-up’ process seems to strip away these <pre><code> tags. As a result, all my code snippets are converted into plain text within <p> tags, losing their distinct formatting and structure.

What I Need: A way to automatically preserve the formatting of these code snippets during the import process. Manually reformatting each snippet isn’t feasible due to the sheer volume.

I am looking for any suggestions, tools, or workflows that could help me maintain the original formatting of these code snippets in the imported blog posts. Has anyone here faced a similar challenge? How did you solve it? Any help or direction would be greatly appreciated!

Thank you in advance!

Hi Hubert,

You could try PowerImporter to preserve the formatting of your code snippets.
PowerImporter is designed to facilitate seamless CSV imports into Webflow, and it handles HTML content efficiently, ensuring your code snippets’ formatting is maintained.
Since you have your posts in CSV format with specific tags, PowerImporter should be able to import them into Webflow without stripping away these tags.

You can try it out here: https://www.powerimporter.com/

Good luck!
Sylvie

If you have the ability to easily modify and reformat your CSV content, I’d mock up a page in Webflow and examine the HTML being produced. Make your code blocks match the same style.

If you’re going for simple, you can just just replicate that using embeds. Code embed imports generally seem more successful when you match the same DIV-wrapper structure.

However if you’re going for syntax highlighting in your code and it’s not already in your raw source, you’ll need to adapt it somewhat to another solution.

On option is to HTML-encode parts, and use Finsweet’s code highlighter lib.

Another is to export the snippets into Gist, and then embed them using SA5’s Gist support.