Markdown table is not rendered through front matter variables

support
1

Hi everyone!

I am new to Hugo and I’ve recently inherited the website with a customized theme where all content is added through front matter variables.

I would like to add a table, however, it does not render properly through front matter variable but works just fine in blog page.

Here’s the template part:

<div class="col-lg-10 mt-5 mt-lg-0">
        <div class="section-title">
          <h2 class="h1 mb-4">{{ .tabletitle | markdownify}}</h2>
          <div class="content pe-0 pe-lg-5">{{.tablecontent | markdownify}}</div>
        </div>
      </div>

Here’s what I add to the page file:

tablecontent: "
    |   |   |   |   |   |
    |---|---|---|---|---|
    |   |   |   |   |   |
    |   |   |   |   |   |
    |   |   |   |   |   |
    "

Screen Shot 2022-08-02 at 18.05.00
Screen Shot 2022-08-02 at 18.05.001040×268 33 KB

Is there a way to add markdown table through front matter variables? Any guidance is appreciated.
Thanks!

2

I suspect your multi-line string in your YAML frontmatter is incorrect syntax for multiline.

See here for all the many ways to continue a line.

3

Thanks @gaetawoo!

I tried doing how your answer suggested, however, it didn’t work and I got this one:

failed to unmarshal YAML: yaml: line 41: did not find expected comment or line break

I think it’s related to the " I must add after the tablecontent.

4 
---
title: Test
date: 2021-01-01T00:00:00-00:00
draft: false
tablecontent: |
  | col1 | col2 |
  |---|---|
  | a | b |
  | c | d |
---
5

As @jmooring suggests:

image

^^ From the linked SO answer.

You don’t actually need quotes for strings in YAML, unless they are in an array

6

thanks @jmooring but it didn’t work. I’ve got

Screen Shot 2022-08-02 at 18.59.14
Screen Shot 2022-08-02 at 18.59.141780×440 106 KB

7

Thanks @jmooring & @gaetawoo !

I figured out that there was an indentation problem while trying out your solutions. Thanks!

8

Look at the indentation in my example, and try again.