Certain Kramdown elements not being processed

Help
1

Hi folks!
I’m helping develop some new content for a GH pages site maintained by my lab, and have been unable to convince Jekyll 3.01 /Liquid/Kramdown to parse YAML copy as markdown. I suspect this is a user error issue, but I have been unable to identify a solution that doesn’t involve hard-coding the page in HTML.

I have scoured stackOverflow, and poked around with markdown="1", and the markdownify filter with no luck. Again, this may be user error. I would prefer a minor tweak along those lines, but am willing to tackle structural/organizational changes if that yields a working product.

The current setup:

  • A YAML file with a header and many subsections. Looks like this:
- name: This is the page name

  subsections:
      - name: Subsection 1
        summary: >
            This section is the main body copy for the subsection. It has a [link](http://endless.horse/), and an unordered list:
* item one
* item two
        github: socialLink

      - name: Subsection 2
        summary: >
            This section is the main body copy for the subsection and goes on for quite a while about important things.
        twitter: socialButterfly
  • An HTML page using Liquid to parse and display the YAML data:
---
layout: page
title: SomePageTitle
permalink: /undergrad/
color: MediumVioletRed
---
{% for section in site.data.mypage %}
    <h1 id="{{section.name | downcase | replace:' ','_' }}">{{section.name}}</h1>
    {% for subsection in section.subsections %}
        <div class="myClass">
            <div class="myClass__container">
                <div class="myClass__header">
                    <span class="myClass__title">
                        {% if subsection.site %}
                            <a href="{{subsection.site}}" target="_blank">{{subsection.name}}</a>
                        {% else %}
                            {{subsection.name}}
                        {% endif %}
                    </span>
                    <span class="myClass__social">
                    {% if subsection.github %}
                        <a href="https://github.com/{{subsection.github}}" target="_blank"><i class="fa fa-github"></i></a>
                    {% endif %}
                    {% if subsection.twitter %}
                        <a href="https://twitter.com/{{subsection.twitter}}" target="_blank"><i class="fa fa-twitter"></i></a>
                    {% endif %}
                    </span>
                </div>
                <div class="ug__summary">
                    {{subsection.summary}}
                </div>
            </div>
        </div>
    {% endfor %}
{% endfor %}

A final note: I have also attempted to build this page using a .md file in place of the YAML data/HTML/Liquid combination. This would not be ideal if it worked (because the styling is less DRY), but that’s moot. In that implementation, Header styling, links, and some other markdown features parse properly, but unordered lists (using * or -) do not render as such.

Thanks for your time and support!
:monkey: Chris

2

so everything is working as expected, your problem is something is not being rendered properly as markdown? which part? can you be more specific as to what the problem is? I don’t really see anything that other than regular text unless it is the bold text in the summary.

3

Thanks for the quick response, @rdyar, and sorry for no providing enough detail.

CSS styling contributed by the HTML file is rendering properly, and the page looks great. (Thanks, Jekyll!)
Copy from the YAML subsections (e.g. the copy in summary) is not being parsed as markdown, despite my best efforts. As such, I’ve been unable to use bullet lists, tables, and hyperlinks, all of which I’ll need to make this page viable.

I’ve added a couple of things to the YAML file example above to help clarify what I’d like to parse as markdown.

All the best,
Chris

4

The answer is pretty simple. You need to tell Jekyll to Markdownify the YAML content.

On this line {{subsection.summary}} use the Markdownify filter and it’ll interpret the content as Markdown and convert to correct HTML.

<div class="ug__summary">
  {{subsection.summary | markdownify}}
</div>
5

Thanks @mmistakes. I mentioned in my post that this approach hasn’t worked for me. I did retry on your suggestion, but no improvement.

unordered_list
Is there something I should be doing/not doing in config.yml that would impact this? Something else I’m missing? At present, our config includes only title, description, url, baseurl, author, google_analytics lines, and the following:

# Build settings
markdown: kramdown

In case it helps, we are running a modified Daktilo theme.

6

Well if you’re using the YAML above then it’s not going to work because the indentation and spacing is off. YAML is extremely picky about all of that so I had to change your data to the following to get it to parse.

- name: This is the page name
  subsections:
    - name: Subsection 1
      summary: >
        This section is the main body copy for the subsection. It has a [link](http://endless.horse/), and an unordered list:
          * item one
          * item two
      github: socialLink
    - name: Subsection 2
      summary: >
        This section is the main body copy for the subsection and goes on for quite a while about important things.
      twitter: socialButterfly

Then I used your exact Liquid/HTML with just the addition of the markdownify filter and it worked locally for me.

As far as theme and _config.yml settings. None of that should really matter. I’m using the default markdown: kramdown setting.

If you can point me to a public repo with the exact files I can probably figure out what the issue is really quick. Just copy/pasting code into a forum likely is missing something.

7

Thanks so much, @mmistakes! Interestingly, your YAML didn’t work on my local machine, but your encouragement to focus on YAML whitespace got me moving in the right direction.

:sunny:
Chris