I'm trying to set up syntax highlighting for my Jekyll page using redcarpet but I can't get it to work. If I try it out I always see that still rogue is being used. This is how my _config.yml looks like:
redcarpet:
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
highlighter: redcarpet
markdown: redcarpet
What am I doing wrong? I followed the guidelines both on the redcarped webpage and on the Jekyll webpage.
This is the fenced code block I have in my test markdown file test.md
```java
class Foo {
public void bar() {
}
}
```
Jekyll hasn't supported redcarpet since May 2016 (source: https://github.com/blog/2151-github-pages-drops-support-for-rdiscount-redcarpet-and-redcloth-textile-markup-engines).
The only parser they support is kramdown. You'll either need to change to kramdown, or build your site locally and commit the output instead.
Related
I would like to export my Next.js project for the use with a Template Engine. (In my case "twig") I replaced all the texts in my HTML with the {{ ... }} twig markdown.
When I run next build && next export the HTML is generated as intended. The problem now is, that when I render e.g. the "index.html" with the twig renderer the texts are replaced again bei the markdown {{ ... }} from the .../index.js code. (Since this calls createElement and replaces all creates the tags for faster loading)
Now my question is: is it possible to disable the generating of the .js file for every page sothat I can change the .html file without it being overwritten?
P.S. The build is running as a SSG (Static Site Generator) eventhough I am not using getInitalProps, getStaticProps, getStaticPaths or getServerSideProps which I find strange. And I have no configuration in the next.config.js file.
Thank you so much in advance!
I am using GitHub pages to publish files from a project. These files are Java source code files, which I have been able to add as static files into Jekyll as a collection. I would need to apply a layout to these files for, e.g., code formatting. I am unable to do this.
My static source code files are in a collection defined in _config.yml:
collections_dir: material
collections:
cse-solutions:
output: true
This part of my site works fine: .java-files under material/_cse-solutions appear on the static site into /cse-solutions.
However, I would need to include a title and code formatting. For this I am trying to apply a layout to these static files. My current effort is the following. First, in _config.yml I set
defaults:
- scope:
path: ""
type: "cse-solutions"
values:
layout: java-code
Then I have a file _layouts/java-code.html with contents, for simplicity at this point
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test title </title>
</head>
<body>
<h1> Test code page heading </h1>
{{ content }}
</body>
</html>
However, this layout has no effect on the .java files on the site. To be honest, if the layout were effective, I do not know whether the output would even have .java-suffix. Still, I can not find any corresponding .html-pages on the site either.
Can this be done? If it can, what am I doing wrong?
EDIT: I suspect Jekyll just ignores layout for static files. Using jsonify from Liquid I can actually print the value of this collection, and there I can see that the system has correctly set, for these static files:
”layout”:”java_code”
But there is absolutely no effect in the formatting of these files.
(The underscore, that is, java_code instead of java-code is not an error here, because I noticed that some parts of Jekyll do not like dashes in identifiers, so I changed dashes to underscores everywhere. I think Ruby does not allow dashes in identifiers.)
I think you may be over complicating things a bit. If I understand correctly, you are trying to simply display the actual source code on your page correct? For example you would like your code to look like:
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
If this is the case, you can simply save the written source code as a markdown file (.md) and let the kramdown mardkown converter handle displaying it correctly. To do this you need to make sure that you have the following in your _config.yml file:
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
This will make sure kramdown is enabled and will use rouge for syntax highlighting if you would like.
Then for each page you want, simply create a pagename.md file and add at least the following front matter at the very top of the page:
---
layout: java-code
title: "Here is my source code page"
---
This tells jekyll to use the "java-code" layout you already made and to define the title for the page as whatever you put in the quotes. After the front matter, simply copy your source code into a code block for markdown. It is very simple, all you need to do is have a line with ``` before and after you code. You can optionally have the first line be ```java to tell rouge to highlight for java syntax to make it easier to read.
You can put any markdown text outside of the code block that you would like as well. That means you can have a description of the code, or even break the code into segments with text descriptions before each part.
To put it all together you file should look something like:
---
layout: java-code
title: "Here is my source code page"
---
Here is my simple "Hello, world" program:
```java
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
```
Check out the docs page for posts on jekyll's website for more info, and if you are unfamiliar with markdown there are tons of guides on writing with it if you do a quick google search (its how stackoverflow answers are formatted!).
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
---
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!
I want to visualize README.md files from a project in github, in my website.
What is the best way to do this? Like fetch the markdown code and process the mark down locally? Or there is a way to fetch the already processed markdown from github?
One possible solution is to use a javascript-based markdown parser, such as https://github.com/evilstreak/markdown-js.
That library can be loaded from the browser and can display the markdown. In this example (taken from the aforementioned site), you would need to fetch and insert the markdown in the output of your site:
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Insert proxied **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
Use Github API - Markdown on your javascript.
Here is a much better way to do it that seems to be more in line with the questions and it certainly suited my needs.
This implements a server-side, back-end processor that servers up HTML rendered from Markdown on the fly.
Here is an excerpt for PHP, but other languages are supported and documented in the link:
PHP
Download PHP Markdown (or PHP Markdown Extra) and PHP SmartyPants
from Michel Fortin.
Put markdown.php and smartypants.php somewhere in
PHP's include path (or in the same directory as render.php).
Add an alias in your Apache config:
Alias /markdown/ "/var/www/support/markdown/"
Add rewrite rules. This can be done in the .htaccess file for a specific folder, or in the global Apache config. Some common extensions are included, but you can adjust them to your needs. (You might want to process all text as Markdown by adding "txt".)
# display Markdown as HTML by default
RewriteEngine on
RewriteRule .+\.(markdown|mdown|md|mkd)$ /markdown/render.php
RewriteRule .+\.(markdown|mdown|md|mkd)\-text$ /markdown/render.php [L]
https://github.com/zhlicen/md.htm
An example of zeromd.js
Just serve the md.htm file and md files, and visit directly by url: /md.htm?src=README.md
Or directly use my github page, Example:
https://b.0-0.plus/blog/md.htm?src=https://raw.githubusercontent.com/microsoft/vscode/main/README.md