If I wanted to use a specific github page theme, such as cayman, but wanted my markdown to look and be styled differently, say to be styled like the architect theme markdown, how would I do so? Essentially, is there a way for me to change the jekyll / kramdown markdown styling easily? Thanks.
In the Docu - Default Values you see the item markdown : kramdown inside _config.yml. Here you can change markdown renderer.
Some info can be found on the bottom of that page
Related
By configure I mean font size, font family, syntax highlight style, line numbers and so on. I have followed some tutorials but they don't worked for me.
What I did:
added markdown: kramdown and highlighter: rouge to _config.yml;
added a css theme from pygments directly in head / imported it in the main.scss file.
I tried this and the syntax highlight worked but in a limited way, cause I can't add the line numbers with lineos. I noticed that the {% highlight lang_name %} tag doesn't works, just the triple tildes.
Any help will be welcome
Pygments has been deprecated. For highlight tag, you may consider use rouge or maybe markdown code blocks with highlight.js.
I think the answer depends to some extent on the theme that you are using. If you want to change only a few small things, the best way is to use the Inspect Element feature that comes with your browser.
Start up your website using bundle exec Jekyll serve and navigate to a page with syntax highlighted code.
Right click on a code block and select "Inspect Element". Something should open up on the side or below. It will look like this:
Now play around with the color/font size as you see fit.
Then just copy the contents into the main.css file.
A tricky part may be finding the main.css or main.scss file for your theme. Try to grep for it the theme's directory (which you see using bundle show theme-name). For Minimal Mistakes, it is \assets\css\main.scss since this theme uses scss.
I'm using Jekyll on Github, and I wonder whether there's a way to link to a section within a page. Say I have a section like
## Section 1 ##
section content
and later in the same page I want to link to this section. I've found how to link to another page within the blog and do footnotes, but not this.
As a note, I use markdown: kramdown in my _config.yml
kramdown supports the automatic generation of header IDs if the option
auto_ids is set to true (which is the default). This is done by
converting the untransformed, i.e. plain, header text
So in the above example ## Section 1 ##, it would generate the following id: id="section-1", then the anchor is linked to via the A element:
Section One
Or in plain kramdown/markdown: [Section 1](#section-1)
It seems that this has been changed to #heading-section-1 (checking on Jekyll 3.7.3 right now).
As a way to figure this out on your own, you can inspect the element and see the id being used on the rendered page.
I found a nice repository that helps add anchors to all headers in three simple steps.
From docs:
Download the anchor_headings.html file from the master branch
Toss that file in your _includes folder
Where you typically would put {{ content }} in your layout,
you would instead use this Liquid tag to output your page's content:
{% include anchor_headings.html html=content anchorBody="#" %}
As result you will see:
Which is easy to customize.
If the section of the page you want to jump to is not a section heading, then this accepted answer didn't work for me. The following worked for me:
[jump](#final-solution)
<div id="final-solution"></div>
I am editing my markdown in some online editor dillinger.io. Then copying the content into jekyll _posts. However, the jekyll is rendering on the browser differently that what I am seeing in above mentioned editor/github preview of the file.
The major problem I am facing is with the bullet points. I am not able to display bullet points with "*" or "-" markdown syntax. To display it using jekyll I need to use tag in markdown file. I have googled for long hours and used below configuration in _config.yml file to get the better output.
markdown: kramdown
kramdown:
input: GFM
But still it is not the one I am expecting. Below are the screenshots
Online editor and github preview are same as shown in the following URL -
But Jekyll is rendering as follows -
With the mentioned change in _config.yml file. It is better but still it does not display bullet points properly -
Some of the stackoverflow posts is saying that it is the issue with the default Jekyll markdown rendering engine.
Can you please suggest me what change do I need to make to get the same output as I see in github preview as mentioned in the following URL? -
The kramdown GFM parser only supports some Github Flavored Markdown options (see documentation)
In Jekyll you need two new lines before your list :
The list
- item 1
- item 2
I have a rather nasty, huge HTML document that I converted to markdown.
When I do the usual layout and view the .md file in GitHub via preview tab, it looks fine. However, when I serve it and view it on my actual site, it renders all the HTML tags.
I have tried using different markdown interpreters like redcarpet versus kramdown, to no avail.
How do I get a good markdown rendering of HTML similar to the GitHub behavior?
Link to repo (notice the clean GitHub Flaovred markdown)
This is not a markdown but a html document.
Rename it to test.html
Remove html and body tags
give it a :
---
layout: page
title: Test
permalink: /test2/
---
I've made a pull request that works to you repo.
Note: before pasting word html to the web you can clean it.
I'm using github pages for my site.
I generate my pages from markdown to html using the built in Jekyll support.
The built in markdown renderer rdiscount does handle tripple backtick codeblocks.
but it just applies the language as a css class on the <pre>
What should I do to get Jekyll to highlight code on page generation?
I've also tried to copy all stuff from octopress, but whith no luck, the codeblocks still come out with a css class only.