Jekyll, Github Pages: syntax highlighting not working - jekyll

A similar question has been asked before but the solutions don't work for me.
I'm using Jekyll 3.3.0 with a Github Pages blog. According to the documentation, Jekyll supports code snippet highlighting natively as long as the _config.yml points to Kramdown for markdown processing and Rouge (I'm running 2.0.7) for syntax highlighting.
I can't get it to work using the approved method or various methods I've found on the internet. The only thing it recognises is that there is code there. For example, using either backticks or {% highlight html %} will remove this code and show my actual code, as expected. So it's recognising that it's a code snippet. But the highlighting doesn't work at all.
Here's my _config.yml:
baseurl: /blog
exclude: ['README.md']
permalink: pretty
# Conversion
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
hard_wrap: false
syntax_highlighter: rouge
extensions: fenced_code_blocks
And here's an example of a test I've tried in a .md:
```applescript
tell application "Safari" to quit
```
Applescript is supported by Rouge, so that shouldn't be the issue. Nevertheless, I have tested it with html:
```html
<a href="https://github.io>Here's a link to Github</a>
```
I've also tried:
{% highlight applescript %}
tell application "Safari" to quit
{% endhighlight %}
Github shows the highlighting when I view it through the github.com/user/repo but it breaks when viewed over user.github.io/repo
Thanks

The link address in _layouts/default.html was incomplete: it didn't include {{ site.baseurl }}
The full line should be:
<link href="{{ site.baseurl }}/css/syntax.css" rel="stylesheet">

As answered in this question: Add syntax highlighting to gh-pages , it was supposedly enough to use the correct markdown, as you've posted in your question. It was not working for me either, that's how I found this post.
I've added a syntax.css myself and are now using the lowercase name of the highlighted language that I need. Now it does work!

Related

Jekyll redirects to a 404 and does not render post.md

I want my index.md seen at
http://jtm-lis.github.io/Julien_Tremblay_McLellan/
to redirect to pages I have written in markdown
I tried implementing, post_url variable , such as documented
in order to successful redirect to a page written in markdown without success, as it points to a 404 at
[Name of Link]({% post_url 2010-07-21-name-of-post %})
http://www.jekyllrb.com/docs/liquid/tags/#linking-to-posts
At first I thought this was an error from the for loop, so I added the link manually as detailed in the documentation specifically for pages written in markdown.
index.md
# Index of all my content
[Library Carpentry Workshop July 2020]({% post_url 2020-07-27-library-carpentry-workshop-american-university-notes %})
<ul>
{% for post in site.posts %}
<li>
{{ post.title }}
</li>
{% endfor %}
</ul>
_config.yml
theme: jekyll-theme-slate
url: https://jtm-lis.github.io
baseurl: /Julien_Tremblay_McLellan #NO TRAILING SLASH
title: Julien Tremblay McLellan's Website
author: Julien Tremblay McLellan
email: jtremc#gmail.com
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
# social links
twitter_username: jtm-lis # DO NOT include the # character, or else the build will fail!
github_username: jtm-lis # DO NOT include the # character, or else the build will fail!
show_excerpts: true # set to false to remove excerpts on the homepage
What am I doing wrong?
The problem here is that the link does not use the site.baseurl,
so instead of linking to
https://jtm-lis.github.io/Julien_Tremblay_McLellan/2020/07/27/library-carpentry-workshop-american-university-notes.html
you are linking to
https://jtm-lis.github.io/2020/07/27/library-carpentry-workshop-american-university-notes.html which does not exist.
The fix is easy though, you just need to add site.baseurl to your link as in
[Name of Link]({% post_url 2010-07-21-name-of-post | prepend: site.baseurl %})
When doing this, you may encounter an other problem on your localhost environment, since most likely your site.baseurl folder does not exist there. So it will work on your live site, but has broken links in your local environment.
To work normally on localhost just override the baseurl property when you serve it:
jekyll serve --baseurl ""
or if you work with bundler
bundler exec jekyll serve --baseurl ""

How do I change the layout extensions in Jekyll to .liquid?

By default, Jekyll uses *.html, however, the program I use (Sublime Text 3) has an a package that adds Liquid syntax support but it will only auto detect and do the code suggestions if the file has the extension *.liquid. The other problem is, Jekyll is looking for default.html as well as the other layouts. How do I make Jekyll look for *.liquid files instead like default.liquid?
In the bottom right hand corner of sublime it will have the name of the filetype being used, for example 'HTML'. If you click this you can change it to liquid.
What worked for me is to rename files to *.liquid.html and then
update the front-matter to use the new name, e.g.,
Including abc.liquid.html in default.liquid.html
=== default.liquid.html ===
---
---
{% include file.liquid.html %}
Using layout default.liquid.html in a Blog Post
---
layout: default.liquid
title: "My post title"
date: 2021-01-24 19:00
---

Jekyll - link to posts from pages

A very basic question.
I can not find out how to refer or cite a post in a page.
If this is my post
---
layout: post
title: "Serve Jekyll Websites with servr and knitr"
categories: [jekyll, rstats]
tags: [knitr, servr, httpuv, websocket]
---
The R package [**servr**](https://github.com/yihui/servr) can be used to set up an HTTP server to serve files under a directory.
How I am suppose to cite it in my page
---
layout: page
title: About
permalink: /about/
---
You can find out more info in this post
Could you help me out ?
You can do this 2 ways:
Copy-pasting the link generated for your post as a link to it.
[Check Out My Post!](www.example.com/posts/2015-10-1-name-of-post/)
This definitely works, but will break/fail when you decide to change link style, or have another permalink, or when you change file names.
The smarter way: Jekyll's built in post_url
Jekyll has a built in function that allows you to internally link or cite back to posts on your website. Here is the documentation for it, but I will explain the syntax and usage as well.
Assuming you want to link to a Jekyll post with the filename of 2015-07-17-jekyll-servr-tutorial.md which is located in the _posts folder, the syntax for this would be:
{% post_url 2015-07-17-jekyll-servr-tutorial %}
{% post_url /tutorials/2015-07-17-jekyll-servr-tutorial %} if you have your posts organized in a subdirectory called tutorials
The R Package [servr]({% post_url 2015-07-17-jekyll-servr-tutorial %}) if you want to make hyperlinks.
There is no need to include the file extension name when using this liquid tag function.
Here is additional information and a tutorial on how to use Jekyll post-links that you might find useful as well.

Dynamic Links in jekyll

currently I'm working on static website, so I'm using jekyll to generate it. To have a nice structure and fancy URLs, I use permalinks.
permalink: /impressum/
So for example the impressum.html is rendered to impressum/index.html. And in my HTML i can simply link to that file with
<a href="/impressum">
That works for me very well. But you know, I'm a programmer. What if I want for example to change the URL to /imprint/? Well, I can change the permalink without any problems. But what's about all the other links on the site? Yeah, sure, I can use the search & replace function of my editor to change the linked URLs and check the whole site with a site checker for broken links, but that's not the fancy way I want to go. That's why I tried to create some kind of global variables with the permalink.
_config.yml:
lnk_impressum: /impressum/
impressum.html
---
layout: layout
title: Your New Jekyll Site
permalink: {{ site.lnk_impressum }}
---
But that does not work. I get this error:
Generating... error: no implicit conversion of Hash into String. Use --trace to view backtrace
So what's wrong or is there a better way?
It doesn't seem to be possible to place Liquid tags inside the YAML Frontmatter or _config files, per this SO answer.
Something else you could try is based on the approach used by the documentation pages for Bootstrap, which uses a Page Variable they call slug that provides a unique, unchanging reference to each page.
For instance, if you'd like to place a link to your impressum.html page (for which the permalink could change), you can place this code on another page, such as index.html:
{% for mypage in site.pages %}
{% if mypage.slug == 'impressum' %}
Link to Impressum page
{% endif %}
{% endfor %}
Then, in the YAML frontmatter for each of your pages, place code similar to the following:
---
slug: impressum
permalink: /my-permalink-to-impressum/
---
To change your permalinks in the future, you would just make the change to the Page Variable permalink in each page. The URLs referenced in your other pages would be automatically updated by Jekyll, as long as the slug variable remains unchanged.

why won't github pages render my code blocks correctly?

I'm using the https://github.com/mmistakes/so-simple-theme which is really nice. It seems like last night github was correctly highlighting my fenced code blocks. locally, in development, everything seems to be good. but when I push to the github repo, fenced code blocks are not product the proper html structure to ensure code gets hightlight. I'm not sure how to display this in my SO post.
given the below repo
https://github.com/rubyonrailstutor/rubyonrailstutor.github.io
consider this screenshot
the page displayed on the left has the correct html structure, the page on the right, the github page, displaying the same code as on the left does not. what can I be looking at to further debug this? thanks.
and for some more depth, i'm using kramdown style ~~~ which
#### modify spec/spec_helper.rb
~~~ruby
config.expect_with :rspec do |c|
c.syntax = :expect
end
~~~
#### modify spec/models/restaurant_spec.rb
~~~ ruby
require 'spec_helper'
describe Restaurant do
subject(:restaurant) { FactoryGirl.build(:restaurant, name: nil)}
it {expect(restaurant.valid?).to be_false}
end
~~~
there is definitely a problem using
~~~ ruby
#some code
~~~
instead of kramdown I had to use
{% highlight ruby %}
{% endhighlight %}
I'm not sure how I feel about this.