I have just begun working with Jekyll and it seems like a really neat tool, however I cannot make highlighting to work. I would like to use 'rouge' highlighter for that purpose to use the same tool that will be later used by github pages - but when my pages are being served, they contain only raw code block.
I have no idea what I am doing wrong.
This are the steps that I am following:
I am following Jekyll Bootstrap Quick Start instructions to the letter Link
Running command jekyll serve works as expected, default website is served. No errors in command line.
I am installing rouge via gem install rouge
I have verified that rouge is installed by checking gem list
I am adding highlighter: rouge to _config.yml file (replacing the default pygments)
I have added to following section to markdown page:
``` csharp
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
```
I have created css style file by running rougify style monokai > test.css command
I have added that style to served page
<link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet" type="text/css" media="all">
Now I would expect that the served page would contain code block with appropriate spans. That is not the case though - no errors or warning are thrown but the outcome of transformation is as follows:
<div class="highlighter-rouge">
<pre class="highlight">
<code>
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
</code>
</pre>
</div>
Could anyone please help ?
First things first then.
1st. Run Jekyll trough Bundler, which is the most recommended method, specially when hosting on GitHub Pages.
To do that:
Open your terminal and type gem install bundler
Run bundle update in order to update all your local gems.
Add a Gemfile (without any extension) to your site root and inside it type:
source 'https://rubygems.org'
gem 'github-pages'
gem 'wdm'
Open the terminal and go to your project folder. Run bundle install.
This will make bundler install all gem dependencies for you. Adding the gem wdm will allow you to run everything properly on Windows. Bundler will create a file called Gemfile.lock where it's gonna be listed all the gems and dependencies used.
2nd. Don't leave blank spaces between ``` and the code language:
```cs
public interface ITest : ITestKey
{
Task<string> SayHello(string name);
}
```
3rd: Add GFM to your _config.yml by doing like this:
markdown: kramdown
kramdown:
input: GFM
4th: Serve Jekyll with bundler by this running this command: bundle exec jekyll serve --watch
Done! You should be ok then!
For this part:
I have created css style file by running rougify style monokai >
test.css command
I have added that style to served page
<link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet"
type="text/css" media="all">
I'm not sure what you're doing, so I'm not on the loop to guide you through.
Hope to have helped!
All right.
Turns out I was doing everything well...
However I was also using MetroUI Styling with default metro.js file included to website.
Turns out that default metroui script was breaking the formatting...
Related
I am making my own theme in Jekyll, and I wanted to use syntax highlighting.
For this I did:
1) Install rouge and kramdown in my Gemfile
gem 'kramdown'
gem 'rouge'
2) Update my _config.yml
markdown: kramdown
highlighter: rouge
3) Write some code in my post
{% highlight javascript %}
$(".myClass").on("click", function(){...});
{% endhighlight %}
But I am still not getting any highlighting.
Why is that? Do I need to include an specific css file in the <head>?
I think it's possible you forgot to install the gems locally. You shouldn't need to add the stylesheet but do check your browser console for any errors.
You should also be able to export a base stylesheet and extend it as needed:
rougify style base16.solarized.dark > css/syntax.css
<link href="/css/syntax.css" rel="stylesheet">
Default site
The initial default index.html is not showing any style. I have not edited any code inside the folders that Jekyll created. When I try to run it on localhost this is what shows. No styles.
Basically just installed Jekyll on my system, then tried to create a new folder using "jekyll new 'foldername'" then ran "jekyll serve --watch". After that checked my localhost and it will not display the style.
This is the Repo Github
I just updated Jekyll to version 3.3.0 and styles now work. But still i didn't know why version 3.2.1 Doesn't display styles.
So I followed the guide on the Jekyll website by installing and running Jekyll (sure I don't have to post this here). And the site is up and running perfectly but for some reason I don't see the _layouts directory that's supposed to be there. In the pages I can see that it references some layouts i.e:
index.html
---
layout: default
---
<div class="home">
about.md
---
layout: page
title: About
permalink: /about/
---
This is the base Jekyll theme.
But when you look at the directory stucture of the project:
No layouts folder.. what's up with that? Everything works though. And it looks perfectly fine when run on localhost.
You must be running the recent Jekyll version 3.2, which introduces Gem based themes (from https://jekyllrb.com/docs/themes/):
Jekyll themes package layouts, includes, and stylesheets in a way that can be overridden by your site’s content.
The theme is set in _config.yml:
theme: minima
Initial files that were previously in _layouts, _includes, and _sass are now packaged with the theme.
Basically Jekyll wants you to use themes, so you can't see _layouts, _includes, _sass, _assets anymore.
To use previous behaviour simply copy from the gemfile:
open $(bundle show minima)
Copy the 4 folders into your jekyll directory
If you want the older style of Jekyll website directory which includes all the 4 folders then you can use this command :
jekyll new my-new-website-name --blank
I have done the same while creating a personal site.
i have been trying to create jekyll site and host on git-pages. Localy everything works fine. But on github-pages works only first pages and 10 newest blog post.
But after going to any of other pages like "Blogas" or "Straipniai" every link starts with 'localhost:4000' and naturaly breaks css, javascript...
And i am not sure where is problem, because everything is same even if i make change in /_includes/header.html site.url to site.baseurl.
Here is git-hub
And site
I think the problem is that you somehow have both a .md and an .html version of the same pages. The .html version you built locally and GH is preferring it. it has localhost in the urls so it won't work. Try deleting the .html files in those sub folders and see what happens. For example, delete the index.html file from invisibleghostt.github.io/blogas/ and see if that page is fixed.
No idea how you got those files in there, they should not be there.
Look, there are a few things you'd better fix on your _config.yml:
url: "http://codas.lt" # add the site url
gems: # remove `jekyll` from gems
- jekyll-sitemap
- jekyll-gist
- octopress
include: [".htaccess"] # remove this line (GitHub Pages does not support .htaccess)
The other thing is, you'll need to remove all the folders from the folder _posts, as explained here:
If you organized your categories as
/_posts/code/2008-12-24-closures.md, you will need to restructure your
directories to put the categories above the _posts directories, as
follows: /code/_posts/2008-12-24-closures.md.
You are probably working locally with a Jekyll version which diverges from GitHub Pages' (currently is Jekyll 3.0.3). That's why your site works locally and doesn't work there. To avoid that, build Jekyll with Bundler (a dependency manager). On this answer you can see how to do that, step-by-step.
Hope to have helped! :)
Note: If you get stuck in how to adapt your theme to work with GitHub Pages, you can try GitLab Pages, as you can easily set the Jekyll version you want to use to build your site. For example, this project builds the site with Jekyll 2.5.3.
md file with a link to Folder/file.md
When jekyll generates the index the link to the file is still folder/file.md and so doesn't connect to the generated file.html. Can jekyll replace links in markdown with their corresponding html files?
I really want to to maintain my folder structure (7 or so subfolders, each with 3 markdown files).
The answer since December 2016 is to use the jekyll-relative-links plugin.
It is a white-listed plugin if you are hosting on GitHub pages so you probably already have it.
If you are not using GitHub pages you will need the following installation instructions (from the README):
1.Add the following to your site's Gemfile:
gem 'jekyll-relative-links'
2.Add the following to your site's config file:
gems:
- jekyll-relative-links
The tag you're looking for is {% link %} and it arrived in 2016.
If you had {% link _funkyCollection/banjo.md %} it would generate the right path to the output file funkyCollection/banjo.html, or funkyCollection/banjo/index.html, or whatever, wherever it ends up being.
This is what I did to solve this problem with jekyll 3.8.5.
For link in root directory: /file.md
---
layout: page
title: Root File
permalink: /file/
---
This file is in root directory.
For link in subdirectory: /folder/file.md
---
layout: page
title: SubDir File
permalink: /folder/file/
---
This file is in sub-directory.
Now to link these file:
[Root File]({{site.baseurl}}/file/))
[Sub Dir File]({{site.baseurl}}/folder/file/)
Hope this helps someone.
i've written a simple plugin to solve this. put this in _plugins/, and make links refer to the *.md files (so github rendering linking works); if you build it with jekyll (when you are able to run plugins) the links are changed to *.html. since github doesn't run plugins, this isn't applied.
module ChangeLocalMdLinksToHtml
class Generator < Jekyll::Generator
def generate(site)
site.pages.each { |p| rewrite_links(site, p) }
end
def rewrite_links(site, page)
page.content = page.content.gsub(/(\[[^\]]*\]\([^:\)]*)\.md\)/, '\1.html)')
end
end
end
it's not perfect (i'm sure you could fool the regex) but it has been good enough for my purpose.
A Folder/file.md page will result in creation of a _site/Folder/file.html page.
So when your link to this page it's [Link to page]({{site.baseurl}}/Folder/file.html) not [Link to page]({{site.baseurl}}/Folder/file.md).
Jekyll will never rewrite file.md to file.html in url. So you have to set your links targets yourself to the resulting page.url which is usually a html file but can be css, je, json, ...
If you use permalink: /folder/folder/ in any file.md, it will generate a /folder/folder/index.html file which can be reached with [Link to page]({{site.baseurl}}/folder/folder/)
I've run into this and written a basic Jekyll/Kramdown plugin. It's less likely to break than the regular expression approach.
As long as your link doesn't start with http:// or something like it, and ends with .md, it will convert links to their lowercased and hyphenated names.
Of course, you could always modify the behavior to fit your needs.