Jekyll is escaping an anchor tag on my page

1

I’ve got a really weird problem with a page that uses Vue.js on it: https://www.raymondcamden.com/stats

In order for Jekyll not to try to use my Vue tokens, I wrapped the code Vue was working with in raw and endraw tags. You can see the source here: https://github.com/cfjedimaster/raymondcamden2018/blob/master/stats.md

On my local machine, running Jekyll 4, everything works fine. In production, also running Jekyll 4, the anchor tags in the first two lines of my stats had their brackets escaped. The rest of the Vue application works just fine, but since the anchor tag is escaped, Vue can’t replace the URL.

Any ideas? As a test, I added two simple links, one inside the div where Vue is working and one outside. Both are left alone. So it seems that Jekyll sees <a :href="firstPost.url"> and decides it needs to escape the anchor (but again, only in production).

2

As a test have you tried setting the Jekyll’s production environment flag and building locally? That would clue you in if there’s some sort of internal Jekyll thing (i.e. a plugin or perhaps Jekyll itself) that is manipulating your HTML.

The fact that it works locally has me thinking it’s either related to the JEKYLL_ENV=production or perhaps some sort of optimization Netlify does to your HTML after the fact.

You might also need to wrap it some Kramdown specific attribute tags (e.g. <div markdown="0">, etc.) to disable any sort of Markdown processing. Though that wouldn’t really explain why it works locally vs. in peroduction.

3

The Kramdown tag did not help. I also tried running Jekyll in production mode but it refused to pick it up .I did it like so:

env JEYLL_ENVIRONMENT=production bundle exec jekyll serve --config _config.dev.yml

I honestly don’t know what to think now. To make matters more interesting, my desktop has the same issue. It’s just my laptop where it works well.

4

I made a brand new Jekyll site and edited the default markdown to be just this:

---
layout: page
title: About
permalink: /about/
---

<div markdown="0">
<a :href="firstPost.url">test</a> 
</div>

No Vue loaded at all. It still acts the same. Removing the div doesn’t help. Removing the colon before the href fixes the issue. Why would Jekyll or Markdown care about it?

5

For what it’s worth I cloned down your repo and built it locally in both JEKYLL_ENV=development and production and both worked just fine for me.

I got the following output with the colons:

<a :href="firstPost.url">{{firstPost.title}}</a> published {{firstPost.age}} on {{firstPost.date}}

To my knowledge Jekyll and or Kramdown shouldn’t behave differently unless you’re using different gem versions. Or another plugin is doing something to the HTML after the fact to try and fix what it thinks isn’t valid markup.

The only other thing I could think of is Netlify, but the fact that you’re getting different results on your desktop and laptop tells me it might be related to the build environment. I guess the next step is identifying what’s different between those two, whether it’s Ruby versions, gem versions, etc.

6

See above - I see it on a site w/o Netlify involved at all. So dumb question, how can I print out the gems being used? I can then compare desktop to laptop.

7

If you’re using bundle exec to jekyll build then the gems will be what’s in your Gemfile.lock.

So unless you didn’t bundle update in both environments and one is using a different version that shouldn’t be the issue. Though I’d still be surprised if that’s the culprit.

You’re not using any sort of plugins either that could mess with the HTML so the whole thing is really strange.

8

Apparently there is another Kramdown tag you can wrap your HTML with to prevent it from escaping.

{::nomarkdown}
{:/nomarkdown}

Might be worth a try.

9

That did it! And it worked with my raw tags too so the Vue code could still work. Thank you! (FYI in case you read this reply IMMEDIATELY I haven’t checked it into source control yet.)

10

Just in case anyone else Googles this question in the future with the same problem I had: My issue was that I forgot to wrap my href={{ someurl }} in quotes (i.e. href="{{ someurl }}"). This caused it to think “oh! this isn’t actually a tag!” and thus it html escaped it. :sweat_smile: