How to output multiple line code snippets?

Hello!

I’m trying to use my Airtable base to output multiline code snippets based on the records, but I can’t seem to figure out how to give the output.markdown() the correct strings to render something like:

function test() {
  console.log("notice the blank line before this function?");
}

It works fine when using the single back tick, `, to create a preformatted text style, but if I use the triple back-tick like so, ```, it throws an error. Here’s an example:

image

Like this?

image

Hmm, it doesn’t seem to work for me:

Indeed, you need the code that I used inside that example - I first wanted to validate that this is what you’re trying to accomplish in a Script Block.

The script I used to achieve this formatting first required that I pull the “code” content from a long text field with markdown enabled and the function wrapped in the code formatting in that field - i.e.

image

The code required to render is a little more complex -

output.inspect(thisCode);
output.markdown("```\n\r" + thisCode.toString().replace(/\`/ig, " ").replace(/\n/ig, "\n"));

Hmm, so there’s no way to NOT have that textfield visible…

Lea,

Let’s make sure we understand the requirements. As I understand it, you want to …

  1. Display code fragments as viewable content in a script block;
  2. The code fragments will be stored in Airtable records in a rich-text field with Markdown enabled;
  3. For each record that each contains a code fragment, render the code fragment in a code-like formatting section in the Script Block output.

Does this sum up your objective?

I’m not suggesting the text field need be visible; I chose to display it to ensure I could see and understand the format that Airtable used to represent rich-text fields enabled with Markdown. Combined with the script I provided above the markdown content from an Airtable field can be rendered as markdown using the output.markdown() method.

I think this is what you want the rendering to look like -

If so… this is the script that achieves this:

/*

   ***********************************************************
   Airdrop - Script Code Viewer
   Copyright (c) 2020 by Global Technologies Corporation
   ALL RIGHTS RESERVED
   ***********************************************************
   
*/

output.markdown('# Format Code in Script Block');

// get the table name
output.markdown("### Select the Table");
let sourceTable     = await input.tableAsync("Pick the table that contains the source code fragments:");
let sourceTableName = sourceTable.name;

// get the source field name
output.markdown("### Select the Source Field");
let sourceField = await input.fieldAsync("Pick the name of the field that contains the code fragments:", sourceTable.id);
let sourceFieldName = sourceField.name;

// get the data set for this report
let result = await sourceTable.selectRecordsAsync();
let sourceRecords = result.records;

// get the record count
let recordCount = sourceRecords.length;

// iterate across all the records
for (var r = 0; r < sourceRecords.length; r++)
{

    try {

        // extract the function name from the code fragment
        var functionName = sourceRecords[r].getCellValue(sourceFieldName).toString().split("function ")[1].split("(")[0];
  
        // get the name of this source fragment
        var thisCode = sourceRecords[r].getCellValue(sourceFieldName);

        // render the code fragment
        output.markdown("### Function Name: " + functionName);
        output.markdown("```\n\r" + thisCode.toString().replace(/\`/ig, " ").replace(/\n/ig, "\n"));

    } catch(e) {
        // do nothing...
    }

}

Ahh, yes, I’m not trying to get the code out of a field, I’m trying to generate a piece of code from multiple values in the fields combined.

Sorry for not being clear enough.

Understood - this is still possible if you can shape the combined content items into the same format that Airtable stores its own content with Markdown tags. The trouble is, you have (thus far) apparently tried to establish strings containing the term “function” and curly braces and the Script Block interpreter has objected to this approach. I’m not entirely sure why, but I suspect it has something to do with its late binding script preprocessor and the requirement that the script fragments include newline characters.

Bottom line… if you can assemble code that looks like this (IN MEMORY):

"`function test1() {`
`  console.log("notice the blank line before this function?");`
`}`
"

You can process it with this string transformation as Markdown content.

output.markdown("```\n\r" + thisCode.toString().replace(/\/ig, " ").replace(/\n/ig, “\n”));`

Thanks for all the help, really appreciate it :D!

I might fiddle with this a bit more over the weekend, but for now… I’ll just go with plain text code blocks.