Highlight in html issue with Jekyll/Liquid and pygments - html

I'm using Jekyll with pygments and having an issue using {% highlight %} in .html posts. As you can see here, it is just printing out {% highlight %} yet on my homepage the syntax highlighting works See here: iwasasuperhero.
Here is the code for the index, and the code for the post: Here
I'm not really sure the issue or why it is working on the index but not the post page. Any ideas?

It seems I have figured out my problem. I was using {{ page.content }} in my post.html instead of just {{ content }}.

Related

liquid variables stop working when layout is defined

Big thanks to anyone who looks at this! I think the question is straightforward. It is only long because I wanted to be very thorough/ well-documented. I have taken the following example code from the jekyll documentation and edited it only so that I can find it with a permalink:
---
food: Pizza
permalink: "/pizza"
---
<h1>{{ page.food }}</h1>
When I run jekyll serve, the variable is outputted as it should be, but it has no layout. When I try to add a layout that I wrote to the page, the variable no longer outputs, as seen here.
Ultimately, I want to write an archive page that loops through categories, exactly like this code in the documentation:
{% for category in site.categories %}
<h3>{{ category[0] }}</h3>
<ul>
{% for post in category[1] %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
But, because the liquid variables are not working, I cannot make the archive without either putting in in the _layouts directory or manually copy-pasting my layout to the archive page.
Sorry if I'm coming across as a jekyll newbie (I am) or if the answer is in the docs somewhere and I could not find it, but here are my questions:
Why is this behavior happening? Is it something about how jekyll works or is it my layout that is causing this?
What would be the best practice for writing the archive/ correcting this error?
The github repository for this entire project is here
It looks like you are using the wrong liquid tag for trying to get the content. When injecting the page content, use {{ content }} not {{ page.content }}. You can see an example in the docs.
Looking at your includes for post_body.html and body.html, you just need to fix the above and it should work.

Jekyll - How do you get rendered content of posts?

I need to get the rendered content (without html tags) of some posts in Jekyll. When I do 'post.content' It returns the full HTML instead of the rendered text. How do I do this?
You can use strip_html filter {{ post.content | strip_html }}

Jekyll templates/snippits/shortcuts

I've been playing around with Jekyll for a couple of days, I've got a working site, but on many pages I want to use templates/snippits/shortcuts to make it easy to re-use commonly-typed content.
In MediaWiki, this is what I would have done;
This is a test {{ iconSmileFace }}
Where {{ iconSmileFace }} obviously translates to something like <img src = "resources/images/smile.png" />
I've seen that Jekyll has includes, so I could do {{% include iconSmileFace.html %}} but this syntax seems kinda verbose, and maybe not quite the Jekyll-way of doing things. Is there another better way?
I would create a snippet to hold all of my icons whether they are images or svgs or font icons:
{% case include.icon %}
{% when 'smiley-face' %}
Smiley face
{% when 'heart' %}
Heart
{% when 'close' %}
X
{% when 'next' %}
>
{% endcase %}
Then include it where you need it {% include icon.html icon="smiley-face" %}
A good idea would be to define a liquid tag.
Create the _plugins directory and a file called smile.rb with this content:
module Jekyll
class RenderSmileTag < Liquid::Tag
def render(context)
'<img src = "resources/images/smile.png" />'
end
end
end
Liquid::Template.register_tag('smile', Jekyll::RenderSmileTag)
Then every time you want to render the image just use: {% smile %} and it will generate <img src="resources/images/smile.png" />
If your intent is to output image tags with the shortcut, there's another way with a GitHub Pages supported plugin:
(Though I haven't tested this myself)
From the plugin jemoji's documentation, you can serve custom emojis by pointing to a custom source in your _config.yml:
emoji
src: "/resources/images"
Then reference the emoji in your markdown document:
It's a beautiful day! :smile:

Jekyll not parsing ## Tags

I have a Jekyll website and everything works fine, just it doesn't parse <h2> tags in markdown (I also tried putting the actual HTML and still doesn't work. Example: here or here. When I test it with a local server everything works though.
Source code for the /apps page:
---
layout: page
title: My Apps
---
Here's a list of all my published apps, sorted by platform.
[If you need Support and would like to open a ticket, please go to the Support page.](/support)
Most applications are available in English, Italian and Polish so far.
[Click here to take a look at the Patch Notes](/apps/patchnotes)
{% for member in site.data.apps %}
{% if member.link %}
##{% if member.fontAwesome %}{% for image in member.fontAwesome %}<i class="fa fa-{{ image }}"></i> {% endfor %}{% endif %}{{ member.name }}
<br><br>
{{ member.description }}
{% if member.bundleName %}Included in [{{ member.bundleName }}]({{bundleLink }}) bundle.{% endif %}
{% endif %}
{% endfor %}
[Source for app/patchnotes - Page Layout]
Try this:
## {% if member.fontAwesome %}
I just added a whitespace between ## and {℅
Let me know if it works, yeah?
Your Gemfile includes some dependencies like bourbon or time-to-read. Those are not supported plugins/gems (list of gh-pages supported gems/plugins).
If you leave only github-pages gem in your Gemfile and build or serve locally, it fails.
I think that Github pages is also failing but more gracefully.
If you want to work with "exotics" gems, you will have to generate locally and push the generates site on github.

{{ content }} Liquid tag not showing blog posts

Link to repo: https://github.com/AlvSovereign/AlvSovereign.github.io
I am coding my portfolio site, with a link to my blog. The fully processed portfolio site sits in _site/index.html which contains a link to the blog (fully processed link exists in _site/blog.html)
Blog.html at the root of the repo has in the front matter a layout of "bl", which is defined in my layouts folder under "bl.html".
"bl.html" is the layout I want for my blog page, which contains my includes etc. It also contains the {{ content }} liquid tag.
If I am thinking about this the right way, my posts are being parsed (I think this is the right terminology) into "post.html" - which has the front matter "layout: bl", which then parsed into "bl.html", and that this is so as they both have {{ content }} in each files.
Now all my posts are showing correctly (i think) within _site/(year)/(month) etc. However, they are not ending being parsed through my "blog.html" file, and then visible on my webpage. How I know this is that the fully processed "blog.html" file does not have any of the posts in them.
What will I need to do to solve this issue?
If it helps, I use Prepros for LiveReload, and using LANYON template, http://lanyon.getpoole.com/
{{ content }} refers to all the content that in the file that is being converted to HTML code.
For example, if you are passing a blog post on 'What is Jekyll' to any layout that has the {{ content }} tag, all text other than the YAML front matter will be put in that place. Basically the content of the post. You can also limit the scope by using {{ post.content }}, see Variables for more info here.
So the Liquid {{ content }} variable works as intended.
Looking at your website, I believe you're trying to display all the posts in your blog.html file, so what you're actually asking about is why aren't my posts being displayed (not parsed) in your blog.html file, hence not visible on your webpage.
The reason for that is because you shouldn't use {{ content }} tag for that, what you want instead is something like this snippet of code as mentioned in the Jekyll docs, that will grab all your posts, and display them by post title, as well as a link to that post. Here's the code to display a list of your posts. (taken from the website I linked you)
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
So just swap out {{ content }} in your bl.html layout with that code snippet and you've got what you want.
Additionally, if you also want to display the content/excerpt in the list of posts, just add the liquid tag {{ post.content }} or {{post.excerpt}} like so:
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
{{ post.content }} /* or post.excerpt */
</li>
{% endfor %}
</ul>
Of course, edit the HTML accordingly for your preference. Read the documentation on how to set up post excerpts here, which uses the <!--more--> comment separator for excerpts.
I strongly recommend reading the JekyllRb documentation for more information, it's a lot to read and not always easily understandable, but keep referring to it and you'll understand more in no time.