Rendering markdown in layout page

Hello,

I’m trying to do something that I thought would be easy but looks like it’s not.

I’m currently building a personal website to host my resume.
On the frontpage, I want to display a timeline made by a list of the missions I’ve previously worked on.

I have a yaml data file that contains a list of missions with several information, such as the client, the time, and the description, etc.

The description is in markdown, and so is a second detail field.

The goal is to be able to easily generate the list of missions in several languages, so to centralize the data.

I’ve managed to work with a range function that calls the elements of the datafile. So far, so good.

index.html:

<div class="content">                                                                                                                                                                     
    {{ range .Site.Data.missions.missions }}                                                                                                                                              
    <div class="ewrap event">                                                                                                                                                             
        <div class="event-info-col">                                                                                                                                                      
            <strong class="job">{{ .job }}</strong>                                                                                                                                       
            <strong class="company">{{ .company }}</strong>                                                                                                                               
            <strong class="date">{{ .date }}</strong>                                                                                                                                     
        </div>                                                                                                                                                                            
        <div class="event-desc-col">                                                                                                                                                      
{{ .description }}                                                                                                                                                                        
            <details>                                                                                                                                                                     
                <summary>Plus de détails</summary>                                                                                                                                        
{{ .details }}                                                                                                                                                                            
            </detail>                                                                                                                                                                     
        </div>                                                                                                                                                                            
    </div>                                                                                                                                                                                
    {{ end }}                                                                                                                                                                             
</div>  

Which uses the missions.yaml that follows:

missions:
   - job: test                                                                                                                                                                             
    company: test                                                                                                                                                                         
    date: test                                                                                                                                                                            
    description:                                                                                                                                                                          
      |                                                                                                                                                                                   
        # title                                                                                                                                                                           
        test                                                                                                                                                                              
        this is a test                                                                                                                                                                    
        ** My markdown is good man **                                                                                                                                                     
    details:                                                                                                                                                                              
      |                                                                                                                                                                                   
        # test                                                                                                                                                                            
        This is not going great                                                                                                                                                           
        ## secondary title 

And unfortunately renders:

<div class="content"> 
 <div class="ewrap event">
        <div class="event-info-col">
            <strong class="job">test</strong>
            <strong class="company">test</strong>
	    <strong class="date">test</strong>
        </div>
        <div class="event-desc-col">
# title
test
this is a test
** My markdown is good man **

            <details>
                <summary>Plus de détails</summary>
# test
This is not going great
## secondary title

            </detail>
        </div>
    </div>
</div> 

The only problem is that it displays the Markdown as is, instead of converting it to html.

I’ve tried building a shortcode, but shortcodes can’t be called from the layout.
I’ve tried putting everything in the _index.md, but you can’t iterate through a range in a content file.
I’ve tried iterating in the index.html of the layout, but it seems that I can’t access variables from the content file either to send to a shortcode.

I’m a bit out of ideas.

Is there any way to do what I want to do ? Any alternative ?

Is there a way working with md files, putting the “single lined” data in the front matter and the description in the body ? How would that work with the fact that I need 2 separate markdown “variables” ?

Have you tried to use markdownify?

1 Like

My god.

I’ve spent 3h trying to find something and this was so easy.

My Google-fu failed me.

Thanks a lot !

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.