Configure Jekyll to highlight code on page generation? - jekyll

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.

Related

In Github when creating github.io profile what the difference of .md .html .rmd files?

I'm trying to create a github.io profile.
May I know the difference between of .md .html .rmd files?
For example, I see the same file name with different filetypes like
Readme.md vs Readme.html XXX.rmd vs XXX.html
github.io (aka Github pages) can create a website from either
html with optional css
Markdown files (.md and .rmd)
A combination of the above
It uses a set of tools called Jekyll and kramdown to translate markdown files into html to be displayed as part of the website.
Markdown files are a file format generally used for producing documentation in github on similar websites, and has a mopre streamlined syntax for that purpose than html. You can try it out at https://stackedit.io
The use of markdown for Github Pages is however completely optional and you may use only html if you wish. You can follow the guide at https://jmcglone.com/guides/github-pages show you how to make a github pages site with html. Stop when you get to the section Using Jekyll with GitHub Pages if you don't wish to incorporate any markdown.

How to change markdown style for github pages

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

Changing mkdocs code blocks with a custom theme

I am trying to add some html elements (like a div) in a custom theme, that wrap the mkdocs generated code blocks from the html output.
mkdocs has their fenced code blocks with the triple backticks ``` stuff ``` and when it produces the html output it creates <pre><code (some stuff here)> stuff </pre></code>. I was wondering if there is a way with custom themes that preserve the pre and code tags output with the highlight.js class attribute but also allow me to wrap it in a custom div so that I can put the code blocks in a container with some other elements.
The code blocks are generated by the Markdown parser, not by the MkDocs template. In fact the HTML generated from Markdown for a page is passed to the template as a single block. Therefore, to alter the HTML output by Markdown, you need to use a Markdown extension. MkDocs uses Python-Markdown and fully supports Python-Markdown extensions.
If one exists, you could use an existing third party extension which provides the desired behavior. Alternatively, you could create your own custom extension.

Include standalone HTML page in sphinx document

For most of my project's documentation I prefer a standard sphinx layout. However for the landing page I would prefer to use custom HTML/CSS/JS without any of the layout, TOC, or sidebars of the normal sphinx site. Is there a way to include a raw HTML standalone page in a sphinx-generated website in a way that completely disregards the normal layout of the rest of the site?
As a counter example I know that I can include raw HTML bits into a page using the following (see also this question)
.. raw:: html
:file: myfile-html
However this just embeds a file within the normal layout. I would like to have a completely standalone HTML page.
I just ran into this problem myself, and the way I solved it was to simply include the html file in my source/_static folder, then refer to it with a relative link.
So if source/_static/my_standalone.htm is the path where I have my non-generated HTML file, and the .rst file where I want to type my link is at source/otherfolder/index.rst, I write it like this in my rst:
Link to my non-Sphinx HTML file
===============================
To get to my standalone, non-generated HTML file,
just `click here <../_static/my_standalone.html>`_ now!

How do I get HTML rendered as markdown via GitHub Pages?

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.