How to get YAML files to render in middleman with

I have a file written in yaml that I would like to render with middleman using erb. How do I render this so that the yaml file will be translated to HTML. I would later like to style it using CSS. I have found no information of how to do this basic task online anywhere.

For example say I have the yaml file:

main_title: 'Ruby Operators'

sections:
  - section_title: 'Arithmetic'
    items:
      - title: '[ + ] Addition: '
        value: 'Adds values on either side of the operator'
      - title: '[ − ] Subtraction: '
        value: 'Subtracts right hand operand from left hand operand'
      - title: '[ * ] Multiplication: '
        value: 'Multiplies values on either side of the operator.'

  - section_title: 'Comparison'
    items:
      - title: '[ == ]'
        value: 'Checks if the value of two operands are equal or not, if yes then condition becomes true.'
      - title: '[ != ]'
        value: 'Checks if the value of two operands are equal or not, if values are not equal then condition becomes true.'

I would like to render something like this in html

<!DOCTYPE html>
<html>

<head>
    <title>Beautifyconverter.com Yaml To HTML Converter</title>
</head>

<body>
    <table>
        <tr>
            <td>main_title</td>
            <td>sections.0.section_title</td>
            <td>sections.0.items.0.title</td>
            <td>sections.0.items.0.value</td>
            <td>sections.0.items.1.title</td>
            <td>sections.0.items.1.value</td>
            <td>sections.0.items.2.title</td>
            <td>sections.0.items.2.value</td>
            <td>sections.1.section_title</td>
            <td>sections.1.items.0.title</td>
            <td>sections.1.items.0.value</td>
            <td>sections.1.items.1.title</td>
            <td>sections.1.items.1.value</td>
        </tr>
        <tr>
            <td>Ruby Operators</td>
            <td>Arithmetic</td>
            <td>[ + ] Addition: </td>
            <td>Adds values on either side of the operator</td>
            <td>[ − ] Subtraction: </td>
            <td>Subtracts right hand operand from left hand operand</td>
            <td>[ * ] Multiplication: </td>
            <td>Multiplies values on either side of the operator.</td>
            <td>Comparison</td>
            <td>[ == ]</td>
            <td>"Checks if the value of two operands are equal or not</td>
            <td> if yes then condition becomes true."</td>
            <td>[ != ]</td>
            <td>"Checks if the value of two operands are equal or not</td>
            <td> if values are not equal then condition becomes true."</td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </table>
</body>

</html>

I'll limit this answer strictly to accessing data from the YAML file. This will get you the data output you are after, and you can decide how to style it from there.

Assuming your file is named mydata.yaml and located in the /data folder of your Middleman app, the following code will work to generate the nested data loops you are looking for:

<h1><%= data.mydata.main_title %></h1>

<% data.mydata.sections.each do |section| %>
    <h2><%= section.section_title %><h2>
    <% section.items.each do |item| %>
        <h3><%= item.title %></h3>
        <h4><%= item.value %></h4>
    <% end %>
<% end %>