Hi Thierry.
Great question!
You’re correct - the Airtable API returns formatted long text fields using Markdown, which is a nice feature of the API. However, because of how the Air Publisher stack works, using a Markdown stack to convert the markdown returned by the API to HTML is problematic. (Specifically, the issue has to with when Air Publisher replaces tokens.)
I do have a solution for this, but it’s a technique that isn’t as straightforward as I’d like it to be. Essentially, it involves doing the “markdown to HTML conversion” on the client-side (using Javascript) instead of server-side (using PHP).
Here’s a screenshot showing some formatted text sourced from an Airtable base.
At some point, I’ll write up a blog post and provide a sample RapidWeaver project that demonstrates this technique. In the meantime, here are some notes on how the technique works.
First, in RapidWeaver, pull up the page that you want to display the formatted text on. Then, in the Inspector, select HTML, and click on the Head tab. Then paste in this code:
<!-- Source: https://marked.js.org/ -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Source: https://locutus.io/php/strings/nl2br/ -->
<script>
function nl2br (str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
</script>
Next, in the Record List Stacks area of the Air Publisher stack, where you want the formatted long text field to be displayed, use this code:
<script>document.write ( nl2br( marked(`{{Formatted}}`) ) );</script>
Be sure to update “{{Formatted}}” token with the name of your field. Also, be sure to retain the backticks (`) that wrap the token.
So there are two Javascript functions involved. One converts the markdown to HTML, and the other retains any line breaks in the field.
Here’s another screenshot. This shows the project’s stacks, etc.
Then preview your page, and you should see the field values displayed properly (with the correct formatting).
Note that this technique also works with Airtable fields in which you’ve directly entered Markdown. In other words, you can enter Markdown directly in long text fields, and then have it display properly on your site. So potentially, you could use Airtable, the Air Publisher stack, and Markdown, as a lightweight CMS.
If you have any questions about this technique, please let me know. Also, I’ll be sure to post back to this thread when I have a blog post and sample project available.
Thanks,
Tim
Thank you Tim, it is working now. Have a nice day.