Search code examples
htmltwitter-bootstrapmarkdownjekyllgithub-pages

Markdown link escaping layout

I have a website I am making with Bootstrap and Jekyll. I recently ran into a problem where, on blog posts, if an author's name is hyperlinked (to a Google+ profile, for example), a snippet of html is displayed above the body as if the HTML syntax is broken.

The blog post is written in markdown, and the layout is a separate HTML file. Here is the code in question, including the layout code, but basically the file is like this:

---
layout: post
(some other front matter metadata)
---

by [author](link)

Authors names who are not linked do not have this problem, and the problem does not occur on the blog feed page. Also, if I place some text in the line above the by-line, the snippet goes away. How can I get rid of this bug? It seems like there is an error in my markdown.

Edit: If it helps any, my markdown highlighter in the config.yml is pygments

Solution

  • The error is stemming from line 16 to 18 of your gist that contains the html output, this is where it's from:

    <meta property="og:description" content="<p>by <a href="https://plus.google.com/+NickSuch/">Nick Such</a></p>

" >

    This means that the erroneous output generated is not from your post layout or the markdown, but the way that the provided head include in the theme is parsing the data. You'll have to trace this back to the header used in the page layout as the post layout is using it. Chances are the when you add some text above the 'by' line the HTML generated is closed properly and the problem is 'hidden' after that.

    Referring to the comments, here is a summary of the problem and the solution:

    The main issue was that the post contained markdown that would be parsed into HTML tags which is then put into the og:description meta property.

    Here was the original template code in the header include for the theme's layout.

    <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt }}{% else %}{{ site.description }}{% endif %}" >

    The solution to this is to strip out all the HTML before putting it into the meta property as HTML code is not allowed inside the meta properties content. This can be done with the strip_html Liquid code, as mentioned by @Erik. Read the documentation here

    <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html }}{% else %}{{ site.description | strip_html }}{% endif %}" />

    (HTML tags should also be closed with the / if they are one-liners for proper closing of tags)