Syntax highlighting not working in MD files for Jekyll?
Your Markdown file syntax is fine, you don't need to change it (check my comment bellow)
To get the code highlighting working, you need to check 2 things:
- the highlighter and the markdown processors are correctly configured in
_config.yml
- the generated html files have access to a CSS highlighting-syntax style rules
1. Highlighter and the markdown processors configuration
As of jekyll 3.0, Kramdown as the Markdown engine, and Rouge as the syntax highlighter. are the default jekyll setting, and the only setting supported by github pages.
So you can remove their related setting, or set it explicitly at _config.yml
as follows:
# Conversion
markdown: kramdown
highlighter: rouge
# Markdown Processors
kramdown:
input: GFM
auto_ids: true
syntax_highlighter: rouge
2. Code highlighting style:
the generated html file should have access to a CSS code-highlighting rules, that depends on the theme that you're working with.
One way to do so, is to have a code-highlighting style rules defined in the main css file, then include that file in the html head of the default layout.
define the CSS code-highliting rules
Make sure that the main CSS file, (located at /assets/css
, and usually named main.scss
or style.scss
) has some code highlight CSS rules defined, either explicitly defined there, or by importing a file (scss, sass, or less) that contains the CSS rules.
for a quick check, I've putted some scss code-highlighting themes in this repo
- clone sass-code-highlight repo
- put
sass-code-highlight
folder inside the sass directory (by default:_sass
) - inport the code-highlight to the main css file
in assets/css/main.scss
add the following:
@import "sass-code-highlight/monokai"; // 'monokai' as example
include the Main CSS in the HTML HEAD
you need to have the sinppet bellow in the default layout (_layouts/default.html
)
<head>
<!-- head stuff-->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{{site.baseurl}}/assets/css/main.css"> <!-- IMPORTANT -->
</head>
either directly, or by including a head.html
file - located at _includes
directory - into it, as follows:
<!DOCTYPE html>
<html lang="en">
{% include head.html %} <!-- <- include the head -->
<body>
{{ content }}
</body>
</html>
Note: make sure that the css path
is valid.
Jekyll, Github Pages: syntax highlighting not working
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">
I can't change jekyll syntax highlighter at my github blog
You're mixing up the command line instructions with the jekyll instructions. Also it seems that your command rougify style monokai.sublime
does not work properly as if I look at the CSS file in your blog it says unknown theme: monokaisubline
(https://azzyjk.github.io//assets/css/syntax.css).
So easiest solution just c&p one of these CSS stylesheets into your style.css
files https://github.com/jwarby/jekyll-pygments-themes.
Here are the Jekyll docs https://jekyllrb.com/docs/liquid/tags/#code-snippet-highlighting
Edit:
As CSS is now correct but the correct CSS classes are not applied to your code snippets, can you try to set your syntax highlighter in your jekyll config.
kramdown:
syntax_highlighter: rouge
input: GFM
Related Topics
IE8 Renders Font Weights Randomly
How to Use Both Rel="Preload" and Rel="Stylesheet" for the Same Tag
Sass Throws an Error for Bem Syntax
Svg Transform-Origin Problems in Firefox
CSS Grid - Number of Columns Can Be Different in the First Row Than Second Row
Do Inline Elements Establish a Line Box for Their Content
Internet Explorer 10+ Media Queries and Responsive Break Points
Remove/Reset CSS Behavior Property
CSS Word-Wrap: Break-Word Don't Work on IE9
Easy Equal Height Divs Without JavaScript Possible
Overflow:Hidden Not Working as Expected in Google Chrome
How to Have an Image Placeholder in Angularjs
CSS Selectors - Selecting a Specific Child Element
Ionic 2 How to Customize Ion-Range
Less: How to Pass a Mixin as an Argument to Another Mixin
How to Wrap Long Words on Newline, and Avoid Horizontal Scroll Using CSS