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">
Related
I am looking for a way to integrate an existing yaml file in a .md document. the yaml file resides in a gitub repo and can also be accessed relative to the .md file (for example ../dir/test.yaml)
I am using mkdocs for my site.
Use the mkdocs-include-markdown-plugin which is added using: pip install --no-cache-dir mkdocs-include-markdown-plugin
Then enable it in mkdocs.yml:
plugins:
- include-markdown
Now use:
Include relative text:
{% include "../test.yml" %}
Include relative markdown:
{% include-markdown "../README.md" %}
Read more about it under https://github.com/mondeja/mkdocs-include-markdown-plugin or see it on my examples https://alinex.gitlab.io/lang/mkdocs.html#include which are build using https://alinex.gitlab.io/docker-mkdocs/.
What a likely cause would it be if my blog builds just fine locally but in GitHub? Once it is in GitHub nav bar does not display nor do post styles are applied; intriguingly, this strange behavior only affects post pages.
My blog is set here and here is its repository.
The strange behavior is visible whenever one clicks on a blog post.
Let's call it the Jekyll 3 shake
Your blog build ok locally because your still working with github-pages version 40 and jekyll version 2.4.0.
bundle update
bundle exec jekyll build
And it will break on posts.
From your workflow post -> post layout -> base layout that includes head.html
In jekyll 2.4.0 : from head you see page.layout = base and then you see base layout front matter variables.
In jekyll 3.0.3 : from head you see page.layout = post and then you can't see base layout front matter variables.
The idea can be to move base's front matter variables to _config.yml :
common-css:
- "/css/bootstrap.min.css"
- "/css/main.css"
common-ext-css:
- "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
...
And to get those variables in _includes/head.html
{% if site.common-ext-css %}
{% for css in site.common-ext-css %}
<link rel="stylesheet" href="{{ css }}" />
{% endfor %}
{% endif %}
Same for js files.
Note : upgrading to Jekyll 3.x implies that you add
gems: [jekyll-paginate]
to your _config.yml file.
You're gonna need to make sure you have this:
_config.yml:
highlighter: rouge
markdown: kramdown
kramdown:
input: GFM
gems:
- jekyll-paginate
# other gems
Gemfile:
source 'https://rubygems.org'
gem 'github-pages'
gem 'jekyll-paginate'
# other gems
Then, open the terminal at your project's location and run:
bundle update => will update all your gems
bundle install => will generate a new Gemfile.lock including all gems and their dependencies
bundle exec jekyll serve => will serve Jekyll via Bundler
Why?, you may ask. Jekyll has a new version 3, and GitHub Pages followed the upgrade. The default markdown in now kramdown and the default highlighter is now rouge. Any doubts, check it here.
ALSO:
Your blog posts don't have links for your stylesheets found in the index.html head:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
<link rel="stylesheet" href="/css/index.css" />
Probably something wrong with your includes.
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...
using jekyll 2.0.3,
I initially configured _config.yml with
markdown: kramdown
and I was able to add a table of contents as follows, in my example.md:
---
layout: page
title: Sample
---
{:toc}
## section 1
## section 2
however, I switched to redcarpet, see _config.yml:
markdown: redcarpet
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "strikethrough", "superscript", "with_toc_data"]
and now {:toc:} does not work.
The documentation of redcarpet v2.2.2 (used by jekyll 2.0.3):
https://github.com/vmg/redcarpet/blob/v2.2.2/README.markdown#and-its-like-really-simple-to-use
mentions :with_toc_data, but I don't where/how to use this.
how can i display the table of contents using redcarpet?
The problem here is that :with_toc_data is an option for an instance of the redcarpet renderer, and not a configuration extension.
Unfortunately, Jekyll doesn't seem to expose this renderer option, so I don't think you'll be able to use it. The docs say:
no renderer options aside from smart can be specified in Jekyll.
But you can use a table of contents jekyll plugin instead. A quick search returns a number of available options, and one is linked from the official Jekyll site.
Maybe this should work. Mention this in the _config.yml file.
markdown: redcarpet
redcarpet:
extensions: [with_toc_data]
I'm using markdown on my blog along with JQuery and a js file. This is how it looks like.
Here is the detailed guide on how to do it - Jekyll TOC
I've recently switched over to using Jekyll on Github Pages for my various blogs, and love that I can just push Markdown to Github and they handle the processing. I'd like to continue using it this way (rather than running Jekyll locally and just pushing the pre-generated site to Github), since the Github UI makes it easy to add and tweak posts if I'm not at my own machine.
There's just one thing I haven't been able to figure out: I can't get Markdown footnotes working. I'm using this style:
I bet you'd like more information about this sentence [^1].
[^1]: Well lucky for you, I've included more information in footnote form.
I did find one post (somewhere) that suggested enabling a footnotes extension for the redcarpet markdown processor, but this doesn't do it either:
markdown: redcarpet
redcarpet:
extensions: ["footnotes"]
Is there any way to use Markdown footnotes without pre-generating the static site before pushing it to Github?
I use kramdown for markdown parsing and it handles footnotes nicely.
Change this line in your _config.yml file:
markdown: redcarpet
to:
markdown: kramdown
As of Jekyll 3.0.0, kramdown is the default Markdown processor, so the example in OP's question now works out of the box. The pattern is:
Some text[^1].
Some other text[^2].
The identifier in the square brackets does not have to be numeric[^my_footnote].
[^1]: Some footnote.
[^2]: Other footnote.
[^my_footnote]: This also works fine.
Update 3rd Jan. 2020:
GitHub has its own markdown processor GFM, which is an extension of CommonMark. Both kramdown and GFM can be used to render GitHub Flavored Markdown.
Footnotes are not yet supported by GitHub Flavored Markdown, which means the above examples do not render correctly in the GitHub code repository.
Kramdown is still the default Markdown renderer for Jekyll. With kramdown, the above examples render correctly on sites based on GitHub Pages.
Redcarpet
When you want to use redcarpet there seems to be no convenient solution right now.
Although Redcarpet 3 supports footnotes with the syntax you've used, it is not included into Jekyll, because Redcarpet 3 removes Ruby 1.8 compatibility (source).
Solution 1: Use forked Redcarpet 2
See this solution by Jerod Santo:
Add a file called Gemfile to the root of your Jekyll folder with this content:
source "https://rubygems.org"
gem "jekyll"
gem "redcarpet", github: "triplecanopy/redcarpet"
or alternatively djui/redcarpet
Theny adjust your _config.yml to
markdown: redcarpet
redcarpet:
extensions: [footnotes]
Solution 2: Fork Jekyll and include Redcarpet 3
I don't know what's the easiest way to do this. Comments are welcome.
Maruku
Seems to support footnotes (source, source).
I found that plugin for jekyll Github orangejulius/jekyll-footnotes. May it solve the issue.
Also I read just today an blog post that Github improves the footnotes.