Markdown Formatting with Showdown

Design help Custom code
1

I’m using this technique suggested by @samliew to embed text from Markdown files from Github and it’s working like a charm~

But I’m also trying to format that Markdown to HTML using Showdown, as per this post but it’s not working - I get the text but the markdown isn’t formatted… I’m sure I’m missing something very simple and having to do with Webflow’s rich text element…

If anyone can help figure this out, it’s a really nifty technique to incorporate collaborative/open source content from Github into Webflow’s CMS!

Here is my site Read-Only Link: https://preview.webflow.com/preview/codethenews?utm_medium=preview_link&utm_source=dashboard&utm_content=codethenews&preview=dcbee37352aaeb76f15c9869606b1e0b&workflow=preview
(see “Encylcopedia” page)

2

Hey @shawncarrie :wave:,

Which page has the rich text element with the markdown in it? I did a quick scan and couldn’t find any unformatted markdown text.

I used the same blog article to use markdown on my site and it took me a while to realize you need to put “markdown” as a class on the rich text element - just a quick guess.

3

Thanks for your response, @Andrew_Bass !

It’s on the page /encyclopedia - published page here

I’d appreciate if you could take a look ~ I’m not an expert, but I suspect that the problem may either have something to do with the way I’m embedding the raw data from GitHub using JQuery – it shows up in the page source code as being inside quotes, could that be causing Showdown to miss it? – or, otherwise, something about the way I’ve created a rich text element inside an embed block.

5

Hi Shawn, my guess is that using an AJAX-style approach to retrieve your content will mess with your timing, since the MD may not be loaded before your markdown-conversion script runs.

Is there a reason you want to avoid using the native Webflow CMS?

You can embed Markdown code inside of HTML Embeds within CMS Rich Text elements, and you can probably use a multiline plain text element to store markdown as well- with a bit of pre-processing to revert any HTML entity encodings like < → &lt;

6

The reason I want to avoid taking the content from the CMS directly is that I’m using a script to pull in raw content from GitHub (so that it can be publicly collaborative) and using the CMS item slugs to fetch each item.

I got it working, using an embed code for each collection item:

<div id="{{CMS-slug}}" class="markdown"></div>
    <script>
    var Webflow = Webflow || [];
    Webflow.push(function() {
      $.get('https://cdn.rawgit.com/………{{CMS-slug}}.md', 
      function(data) {
        $('#{{CMS-slug}}').append(markdownToHtml(data));
      });
    });
    </script>

Hope this might be helpful to someone out there!